From 01bedb94d06b74e37ed025adc7d3d39cf8598585 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 07:54:16 +0200
Subject: [PATCH 01/25] feat #7311: enable leftmenu option

---
 src/router/modules/account.js    | 174 +++++++++++++++++++++++++++++++
 src/router/modules/index.js      |   2 +
 src/router/routes.js             |   2 +
 src/stores/useNavigationStore.js |   1 +
 4 files changed, 179 insertions(+)
 create mode 100644 src/router/modules/account.js

diff --git a/src/router/modules/account.js b/src/router/modules/account.js
new file mode 100644
index 000000000..674184383
--- /dev/null
+++ b/src/router/modules/account.js
@@ -0,0 +1,174 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/account',
+    name: 'Account',
+    meta: {
+        title: 'accounts',
+        icon: 'vn:account',
+        moduleName: 'Account',
+    },
+    component: RouterView,
+    redirect: { name: 'AccountMain' },
+    menus: {
+        main: ['AccountList', 'AccountDepartment'],
+        card: [
+            'AccountBasicData',
+            'AccountNotes',
+            'AccountPda',
+            'AccountNotificationsManager',
+            'AccountPBX',
+            'AccountLog',
+            'AccountCalendar',
+            'AccountDms',
+            'AccountTimeControl',
+        ],
+        departmentCard: ['BasicData'],
+    },
+    children: [
+        {
+            path: '',
+            name: 'AccountMain',
+            component: () => import('src/pages/Account/AccountMain.vue'),
+            redirect: { name: 'AccountList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'AccountList',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Account/AccountList.vue'),
+                },
+                {
+                    path: 'department',
+                    name: 'AccountDepartment',
+                    meta: {
+                        title: 'department',
+                        icon: 'vn:greuge',
+                    },
+                    component: () => import('src/pages/Account/AccountDepartment.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'AccountCreate',
+                    meta: {
+                        title: 'accountCreate',
+                        icon: 'add',
+                    },
+                    component: () => import('src/pages/Account/AccountCreate.vue'),
+                },
+            ],
+        },
+        {
+            name: 'AccountCard',
+            path: ':id',
+            component: () => import('src/pages/Account/Card/AccountCard.vue'),
+            redirect: { name: 'AccountSummary' },
+            children: [
+                {
+                    name: 'AccountSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () => import('src/pages/Account/Card/AccountSummary.vue'),
+                },
+                {
+                    path: 'basic-data',
+                    name: 'AccountBasicData',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Card/AccountBasicData.vue'),
+                },
+                {
+                    path: 'notes',
+                    name: 'NotesCard',
+                    redirect: { name: 'AccountNotes' },
+                    children: [
+                        {
+                            path: '',
+                            name: 'AccountNotes',
+                            meta: {
+                                title: 'notes',
+                                icon: 'vn:notes',
+                            },
+                            component: () =>
+                                import('src/pages/Account/Card/AccountNotes.vue'),
+                        },
+                    ],
+                },
+                {
+                    name: 'AccountPda',
+                    path: 'pda',
+                    meta: {
+                        title: 'pda',
+                        icon: 'phone_android',
+                    },
+                    component: () => import('src/pages/Account/Card/AccountPda.vue'),
+                },
+                {
+                    name: 'AccountNotificationsManager',
+                    path: 'notifications',
+                    meta: {
+                        title: 'notifications',
+                        icon: 'notifications',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Card/AccountNotificationsManager.vue'),
+                },
+                {
+                    path: 'pbx',
+                    name: 'AccountPBX',
+                    meta: {
+                        title: 'pbx',
+                        icon: 'vn:pbx',
+                    },
+                    component: () => import('src/pages/Account/Card/AccountPBX.vue'),
+                },
+                {
+                    name: 'AccountDms',
+                    path: 'dms',
+                    meta: {
+                        title: 'dms',
+                        icon: 'cloud_upload',
+                    },
+                    component: () => import('src/pages/Account/Card/AccountDms.vue'),
+                },
+                {
+                    name: 'AccountLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'vn:History',
+                    },
+                    component: () => import('src/pages/Account/Card/AccountLog.vue'),
+                },
+                {
+                    name: 'AccountCalendar',
+                    path: 'calendar',
+                    meta: {
+                        title: 'calendar',
+                        icon: 'calendar_today',
+                    },
+                    component: () => import('src/pages/Account/Card/AccountCalendar.vue'),
+                },
+                {
+                    name: 'AccountTimeControl',
+                    path: 'time-control',
+                    meta: {
+                        title: 'timeControl',
+                        icon: 'access_time',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Card/AccountTimeControl.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 7fff2f2e5..5c2d44f58 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -18,6 +18,7 @@ import Parking from './parking';
 import Agency from './agency';
 import ItemType from './itemType';
 import Zone from './zone';
+import Account from './account';
 
 export default [
     Item,
@@ -40,4 +41,5 @@ export default [
     Agency,
     ItemType,
     Zone,
+    Account,
 ];
diff --git a/src/router/routes.js b/src/router/routes.js
index 04780ee17..46b7293d4 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -18,6 +18,7 @@ import roadmap from 'src/router/modules/roadmap';
 import parking from 'src/router/modules/parking';
 import agency from 'src/router/modules/agency';
 import zone from 'src/router/modules/zone';
+import account from './modules/account';
 
 const routes = [
     {
@@ -77,6 +78,7 @@ const routes = [
             agency,
             ItemType,
             zone,
+            account,
             {
                 path: '/:catchAll(.*)*',
                 name: 'NotFound',
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index ee1e04e9b..6ae571cfc 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -22,6 +22,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         'worker',
         'wagon',
         'zone',
+        'account',
     ];
     const pinnedModules = ref([]);
     const role = useRole();

From c8b9233c8793723651d3e79d122d969499b0da1e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 08:00:53 +0200
Subject: [PATCH 02/25] feat #7311: i18n pageTitles

---
 src/i18n/locale/en.yml | 13 ++++++++++++-
 src/i18n/locale/es.yml | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 0e27eeade..f3025a9e0 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1231,10 +1231,21 @@ item/itemType:
         summary: Summary
 zone:
     pageTitles:
-        zones: Zone
+        zones: Zones
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
+account:
+    pageTitles:
+        users: Users
+        usersList: Users
+        roles: Roles
+        alias: Mail aliasses
+        accounts: Accounts
+        ldap: LDAP
+        samba: Samba
+        acls: ACLs
+        connections: Connections
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index bc246a6cb..9127e6609 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1230,10 +1230,21 @@ item/itemType:
         summary: Resumen
 zone:
     pageTitles:
-        zones: Zona
+        zones: Zonas
         zonesList: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
+account:
+    pageTitles:
+        users: Usuarios
+        usersList: Usuarios
+        roles: Roles
+        alias: Alias de correo
+        accounts: Cuentas
+        ldap: LDAP
+        samba: Samba
+        acls: ACLs
+        connections: Conexiones
 components:
     topbar: {}
     itemsFilterPanel:

From 0947dcc17ea08864ef315360487b46e270505afe Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 08:28:50 +0200
Subject: [PATCH 03/25] feat #7311:sunmodules

---
 src/pages/Account/AccountAccounts.vue    | 118 ++++++++++++
 src/pages/Account/AccountAcls.vue        | 116 ++++++++++++
 src/pages/Account/AccountAlias.vue       | 116 ++++++++++++
 src/pages/Account/AccountConnections.vue | 116 ++++++++++++
 src/pages/Account/AccountFilter.vue      | 225 +++++++++++++++++++++++
 src/pages/Account/AccountLdap.vue        | 116 ++++++++++++
 src/pages/Account/AccountList.vue        | 148 +++++++++++++++
 src/pages/Account/AccountMain.vue        |  17 ++
 src/pages/Account/AccountRoles.vue       | 116 ++++++++++++
 src/pages/Account/AccountSamba.vue       | 118 ++++++++++++
 10 files changed, 1206 insertions(+)
 create mode 100644 src/pages/Account/AccountAccounts.vue
 create mode 100644 src/pages/Account/AccountAcls.vue
 create mode 100644 src/pages/Account/AccountAlias.vue
 create mode 100644 src/pages/Account/AccountConnections.vue
 create mode 100644 src/pages/Account/AccountFilter.vue
 create mode 100644 src/pages/Account/AccountLdap.vue
 create mode 100644 src/pages/Account/AccountList.vue
 create mode 100644 src/pages/Account/AccountMain.vue
 create mode 100644 src/pages/Account/AccountRoles.vue
 create mode 100644 src/pages/Account/AccountSamba.vue

diff --git a/src/pages/Account/AccountAccounts.vue b/src/pages/Account/AccountAccounts.vue
new file mode 100644
index 000000000..ba6f50cbc
--- /dev/null
+++ b/src/pages/Account/AccountAccounts.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountAcls.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountAlias.vue b/src/pages/Account/AccountAlias.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountAlias.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountConnections.vue b/src/pages/Account/AccountConnections.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountConnections.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
new file mode 100644
index 000000000..23b72266c
--- /dev/null
+++ b/src/pages/Account/AccountFilter.vue
@@ -0,0 +1,225 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const workers = ref();
+const states = ref();
+</script>
+
+<template>
+    <FetchData url="AccountStates" @on-fetch="(data) => (states = data)" auto-load />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        lazy-rules
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="xs"></QIcon> </template
+                    ></VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Client Name')"
+                        v-model="params.clientName"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Attender')"
+                        v-model="params.attenderFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Responsible')"
+                        v-model="params.accountResponsibleFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!states">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="states">
+                    <VnSelect
+                        :label="t('State')"
+                        v-model="params.accountStateFk"
+                        @update:model-value="searchFn()"
+                        :options="states"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.myTeam"
+                        :label="t('myTeam')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
+                <!-- <QItem>
+                        <QItemSection>
+                            <qSelect
+                                :label="t('Item')"
+                                v-model="params.itemFk"
+                                :options="items"
+                                :loading="loading"
+                                @filter="filterFn"
+                                @virtual-scroll="onScroll"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </QItemSection>
+                    </QItem> -->
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        clientFk: Customer
+        clientName: Customer
+        salesPersonFk: Salesperson
+        attenderFk: Attender
+        accountResponsibleFk: Responsible
+        accountStateFk: State
+        created: Created
+    myTeam: My team
+es:
+    params:
+        search: Contiene
+        clientFk: Cliente
+        clientName: Cliente
+        salesPersonFk: Comercial
+        attenderFk: Asistente
+        accountResponsibleFk: Responsable
+        accountStateFk: Estado
+        created: Creada
+    Customer ID: ID cliente
+    Client Name: Nombre del cliente
+    Salesperson: Comercial
+    Attender: Asistente
+    Responsible: Responsable
+    State: Estado
+    Item: Artículo
+    Created: Creada
+    More options: Más opciones
+    myTeam: Mi equipo
+</i18n>
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountLdap.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
new file mode 100644
index 000000000..f26c741c2
--- /dev/null
+++ b/src/pages/Account/AccountList.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="AccountList"
+                :label="t('Search account')"
+                :info="t('You can search by account id or customer name')"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Search account: Buscar reclamación
+    You can search by account id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+</i18n>
diff --git a/src/pages/Account/AccountMain.vue b/src/pages/Account/AccountMain.vue
new file mode 100644
index 000000000..f0dc2e500
--- /dev/null
+++ b/src/pages/Account/AccountMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/pages/Account/AccountRoles.vue b/src/pages/Account/AccountRoles.vue
new file mode 100644
index 000000000..a479ca330
--- /dev/null
+++ b/src/pages/Account/AccountRoles.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
new file mode 100644
index 000000000..ba6f50cbc
--- /dev/null
+++ b/src/pages/Account/AccountSamba.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'filters/index';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import AccountFilter from './AccountFilter.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import AccountSummary from './Card/AccountSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const STATE_COLOR = {
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
+};
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
+    router.push({ path: `/account/${id}` });
+}
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AccountFilter data-key="AccountList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AccountList"
+                url="Accounts/filter"
+                :order="['priority ASC', 'created DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.clientName"
+                        @click="navigate($event, row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('account.list.customer')">
+                                <template #value>
+                                    <span class="link" @click.stop>
+                                        {{ row.clientName }}
+                                        <CustomerDescriptorProxy :id="row.clientFk" />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv :label="t('account.list.assignedTo')">
+                                <template #value>
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
+                                    </span>
+                                </template>
+                            </VnLv>
+                            <VnLv
+                                :label="t('account.list.created')"
+                                :value="toDate(row.created)"
+                            />
+                            <VnLv :label="t('account.list.state')">
+                                <template #value>
+                                    <QBadge
+                                        text-color="black"
+                                        :color="stateColor(row.stateCode)"
+                                        dense
+                                    >
+                                        {{ row.stateDescription }}
+                                    </QBadge>
+                                </template>
+                            </VnLv>
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.description')"
+                                @click.stop
+                                outline
+                                style="margin-top: 15px"
+                            >
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AccountSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>

From 99ef7fad76d90fb365cad4a8567f2ddc0d850587 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 08:28:58 +0200
Subject: [PATCH 04/25] feat #7311: subsections

---
 src/i18n/locale/es.yml                        |   4 +-
 src/pages/Account/Card/AccountBasicData.vue   | 181 +++++++
 src/pages/Account/Card/AccountCard.vue        |  15 +
 src/pages/Account/Card/AccountDescriptor.vue  | 216 ++++++++
 .../Account/Card/AccountDescriptorMenu.vue    | 130 +++++
 src/pages/Account/Card/AccountLog.vue         |   6 +
 .../Account/Card/AccountMailForwarding.vue    | 256 +++++++++
 src/pages/Account/Card/AccountPrivileges.vue  | 354 ++++++++++++
 src/pages/Account/Card/AccountSummary.vue     | 502 ++++++++++++++++++
 src/pages/Account/locale/es.yml               |   2 +
 src/router/modules/account.js                 | 156 +++---
 11 files changed, 1747 insertions(+), 75 deletions(-)
 create mode 100644 src/pages/Account/Card/AccountBasicData.vue
 create mode 100644 src/pages/Account/Card/AccountCard.vue
 create mode 100644 src/pages/Account/Card/AccountDescriptor.vue
 create mode 100644 src/pages/Account/Card/AccountDescriptorMenu.vue
 create mode 100644 src/pages/Account/Card/AccountLog.vue
 create mode 100644 src/pages/Account/Card/AccountMailForwarding.vue
 create mode 100644 src/pages/Account/Card/AccountPrivileges.vue
 create mode 100644 src/pages/Account/Card/AccountSummary.vue
 create mode 100644 src/pages/Account/locale/es.yml

diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 9127e6609..e23f4328c 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1231,13 +1231,13 @@ item/itemType:
 zone:
     pageTitles:
         zones: Zonas
-        zonesList: Zonas
+        list: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
 account:
     pageTitles:
         users: Usuarios
-        usersList: Usuarios
+        list: Usuarios
         roles: Roles
         alias: Alias de correo
         accounts: Cuentas
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
new file mode 100644
index 000000000..7a3548b8b
--- /dev/null
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+import axios from 'axios';
+import { useSession } from 'src/composables/useSession';
+
+const route = useRoute();
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+
+const accountFilter = {
+    fields: [
+        'id',
+        'clientFk',
+        'created',
+        'workerFk',
+        'accountStateFk',
+        'packages',
+        'pickup',
+    ],
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const accountStates = ref([]);
+const accountStatesCopy = ref([]);
+const optionsList = ref([]);
+
+const workersOptions = ref([]);
+
+function setAccountStates(data) {
+    accountStates.value = data;
+    accountStatesCopy.value = data;
+}
+
+async function getEnumValues() {
+    optionsList.value = [{ id: null, description: t('account.basicData.null') }];
+    const { data } = await axios.get(`Applications/get-enum-values`, {
+        params: {
+            schema: 'vn',
+            table: 'account',
+            column: 'pickup',
+        },
+    });
+    for (let value of data)
+        optionsList.value.push({
+            id: value,
+            description: t(`account.basicData.${value}`),
+        });
+}
+
+getEnumValues();
+
+const statesFilter = {
+    options: accountStates,
+    filterFn: (options, value) => {
+        const search = value.toLowerCase();
+
+        if (value === '') return accountStatesCopy.value;
+
+        return options.value.filter((row) => {
+            const description = row.description.toLowerCase();
+
+            return description.indexOf(search) > -1;
+        });
+    },
+};
+</script>
+<template>
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <FetchData url="AccountStates" @on-fetch="setAccountStates" auto-load />
+    <FormModel
+        :url="`Accounts/${route.params.id}`"
+        :url-update="`Accounts/updateAccount/${route.params.id}`"
+        :filter="accountFilter"
+        model="account"
+        auto-load
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.client.name"
+                        :label="t('account.basicData.customer')"
+                        disable
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        v-model="data.created"
+                        :label="t('account.basicData.created')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelect
+                        :label="t('account.basicData.assignedTo')"
+                        v-model="data.workerFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        auto-load
+                        :rules="validate('account.accountStateFk')"
+                    >
+                        <template #before>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.workerFk"
+                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </VnSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.accountStateFk"
+                        :options="accountStates"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('account.basicData.state')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, statesFilter)"
+                        :rules="validate('account.accountStateFk')"
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model.number="data.packages"
+                        :label="t('globals.packages')"
+                        :rules="validate('account.packages')"
+                        type="number"
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.pickup"
+                        :options="optionsList"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('account.basicData.pickup')"
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Account/Card/AccountCard.vue b/src/pages/Account/Card/AccountCard.vue
new file mode 100644
index 000000000..4fa3bad7f
--- /dev/null
+++ b/src/pages/Account/Card/AccountCard.vue
@@ -0,0 +1,15 @@
+<script setup>
+import VnCard from 'components/common/VnCard.vue';
+import AccountDescriptor from './AccountDescriptor.vue';
+</script>
+<template>
+    <VnCard
+        data-key="Account"
+        base-url="Accounts"
+        :descriptor="AccountDescriptor"
+        searchbar-data-key="AccountList"
+        searchbar-url="Accounts/filter"
+        searchbar-label="Search account"
+        searchbar-info="You can search by account id or customer name"
+    />
+</template>
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
new file mode 100644
index 000000000..bdc0113a6
--- /dev/null
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -0,0 +1,216 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate, toPercentage } from 'src/filters';
+import { useState } from 'src/composables/useState';
+import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
+import AccountDescriptorMenu from 'pages/Account/Card/AccountDescriptorMenu.vue';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import { getUrl } from 'src/composables/getUrl';
+import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const state = useState();
+const { t } = useI18n();
+const salixUrl = ref();
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const filter = {
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                include: [
+                    { relation: 'salesPersonUser' },
+                    {
+                        relation: 'accountsRatio',
+                        scope: {
+                            fields: ['accountingRate'],
+                            limit: 1,
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'accountState',
+        },
+        {
+            relation: 'ticket',
+            scope: {
+                include: [
+                    { relation: 'zone' },
+                    {
+                        relation: 'address',
+                        scope: {
+                            include: { relation: 'province' },
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'worker',
+            scope: {
+                include: { relation: 'user' },
+            },
+        },
+    ],
+};
+
+const STATE_COLOR = {
+    pending: 'warning',
+    incomplete: 'info',
+    resolved: 'positive',
+    canceled: 'negative',
+};
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+const data = ref(useCardDescription());
+const setData = (entity) => {
+    if (!entity) return;
+    data.value = useCardDescription(entity.client.name, entity.id);
+    state.set('AccountDescriptor', entity);
+};
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+});
+</script>
+
+<template>
+    <CardDescriptor
+        ref="descriptor"
+        :url="`Accounts/${entityId}`"
+        :filter="filter"
+        module="Account"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+        data-key="accountData"
+    >
+        <template #menu="{ entity }">
+            <AccountDescriptorMenu :account="entity" />
+        </template>
+        <template #body="{ entity }">
+            <VnLv v-if="entity.accountState" :label="t('account.card.state')">
+                <template #value>
+                    <QBadge
+                        :color="stateColor(entity.accountState.code)"
+                        text-color="black"
+                        dense
+                    >
+                        {{ entity.accountState.description }}
+                    </QBadge>
+                </template>
+            </VnLv>
+            <VnLv :label="t('account.card.created')" :value="toDate(entity.created)" />
+            <VnLv :label="t('account.card.commercial')">
+                <template #value>
+                    <VnUserLink
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
+                    />
+                </template>
+            </VnLv>
+            <VnLv
+                v-if="entity.worker"
+                :label="t('account.card.attendedBy')"
+                :value="entity.worker.user.name"
+            >
+                <template #value>
+                    <VnUserLink
+                        :name="entity.worker.user.nickname"
+                        :worker-id="entity.worker.id"
+                    />
+                </template>
+            </VnLv>
+            <VnLv :label="t('account.card.zone')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.ticket?.zone?.name }}
+                        <ZoneDescriptorProxy :id="entity.ticket?.zone?.id" />
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv
+                :label="t('account.card.province')"
+                :value="entity.ticket?.address?.province?.name"
+            />
+            <VnLv :label="t('account.card.ticketId')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.ticketFk }}
+
+                        <TicketDescriptorProxy :id="entity.ticketFk" />
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv
+                :label="t('accountRate')"
+                :value="toPercentage(entity.client?.accountsRatio?.accountingRate)"
+            />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
+                >
+                    <QTooltip>{{ t('account.card.customerSummary') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
+                >
+                    <QTooltip>{{ t('account.card.accountedTicket') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="assignment"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
+                >
+                    <QTooltip>{{ t('account.card.saleTracking') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="visibility"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
+                >
+                    <QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+<style scoped>
+.q-item__label {
+    margin-top: 0;
+}
+</style>
+<i18n>
+    en:
+        accountRate: Claming rate
+    es:
+        accountRate: Ratio de reclamación
+</i18n>
diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
new file mode 100644
index 000000000..b63c0e5a8
--- /dev/null
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -0,0 +1,130 @@
+<script setup>
+import axios from 'axios';
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { usePrintService } from 'composables/usePrintService';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const $props = defineProps({
+    account: {
+        type: Object,
+        required: true,
+    },
+});
+
+const router = useRouter();
+const quasar = useQuasar();
+const { t } = useI18n();
+const { openReport, sendEmail } = usePrintService();
+
+const account = ref($props.account);
+
+function openPickupOrder() {
+    const id = account.value.id;
+    openReport(`Accounts/${id}/account-pickup-pdf`, {
+        recipientId: account.value.clientFk,
+    });
+}
+
+function confirmPickupOrder() {
+    const customer = account.value.client;
+    quasar.dialog({
+        component: SendEmailDialog,
+        componentProps: {
+            data: {
+                address: customer.email,
+            },
+            promise: sendPickupOrder,
+        },
+    });
+}
+
+function sendPickupOrder({ address }) {
+    const id = account.value.id;
+    const customer = account.value.client;
+    return sendEmail(`Accounts/${id}/account-pickup-email`, {
+        recipientId: customer.id,
+        recipient: address,
+    });
+}
+
+function confirmRemove() {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('confirmDeletion'),
+                message: t('confirmDeletionMessage'),
+                promise: remove,
+            },
+        })
+        .onOk(async () => await router.push({ name: 'AccountList' }));
+}
+
+async function remove() {
+    const id = account.value.id;
+    await axios.delete(`Accounts/${id}`);
+    quasar.notify({
+        message: t('globals.dataDeleted'),
+        type: 'positive',
+    });
+}
+</script>
+<template>
+    <QItem v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="summarize" />
+        </QItemSection>
+        <QItemSection>{{ t('pickupOrder') }}</QItemSection>
+        <QItemSection side>
+            <QIcon name="keyboard_arrow_right" />
+        </QItemSection>
+        <QMenu anchor="top end" self="top start" auto-close>
+            <QList>
+                <QItem @click="openPickupOrder" v-ripple clickable>
+                    <QItemSection avatar>
+                        <QIcon name="picture_as_pdf" />
+                    </QItemSection>
+                    <QItemSection>{{ t('openPickupOrder') }}</QItemSection>
+                </QItem>
+                <QItem @click="confirmPickupOrder" v-ripple clickable>
+                    <QItemSection avatar>
+                        <QIcon name="send" />
+                    </QItemSection>
+                    <QItemSection>{{ t('sendPickupOrder') }}</QItemSection>
+                </QItem>
+            </QList>
+        </QMenu>
+    </QItem>
+    <QSeparator />
+    <QItem @click="confirmRemove()" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
+        </QItemSection>
+        <QItemSection>{{ t('deleteAccount') }}</QItemSection>
+    </QItem>
+</template>
+
+<i18n>
+{
+    "en": {
+        "pickupOrder": "Pickup order",
+        "openPickupOrder": "Open pickup order",
+        "sendPickupOrder": "Send pickup order",
+        "deleteAccount": "Delete account",
+        "confirmDeletion": "Confirm deletion",
+        "confirmDeletionMessage": "Are you sure you want to delete this account?"
+    },
+    "es": {
+        "pickupOrder": "Orden de recogida",
+        "openPickupOrder": "Abrir orden de recogida",
+        "sendPickupOrder": "Enviar orden de recogida",
+        "deleteAccount": "Eliminar reclamación",
+        "confirmDeletion": "Confirmar eliminación",
+        "confirmDeletionMessage": "Seguro que quieres eliminar esta reclamación?"
+    }
+}
+</i18n>
diff --git a/src/pages/Account/Card/AccountLog.vue b/src/pages/Account/Card/AccountLog.vue
new file mode 100644
index 000000000..cfcf224c7
--- /dev/null
+++ b/src/pages/Account/Card/AccountLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Account"></VnLog>
+</template>
diff --git a/src/pages/Account/Card/AccountMailForwarding.vue b/src/pages/Account/Card/AccountMailForwarding.vue
new file mode 100644
index 000000000..d8a43c623
--- /dev/null
+++ b/src/pages/Account/Card/AccountMailForwarding.vue
@@ -0,0 +1,256 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import CrudModel from 'components/CrudModel.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import { tMobile } from 'composables/tMobile';
+
+const route = useRoute();
+
+const { t } = useI18n();
+
+const accountDevelopmentForm = ref();
+const accountReasons = ref([]);
+const accountResults = ref([]);
+const accountResponsibles = ref([]);
+const accountRedeliveries = ref([]);
+const workers = ref([]);
+const selected = ref([]);
+const saveButtonRef = ref();
+
+const developmentsFilter = {
+    fields: [
+        'id',
+        'accountFk',
+        'accountReasonFk',
+        'accountResultFk',
+        'accountResponsibleFk',
+        'workerFk',
+        'accountRedeliveryFk',
+    ],
+    where: {
+        accountFk: route.params.id,
+    },
+};
+
+const columns = computed(() => [
+    {
+        name: 'accountReason',
+        label: t('Reason'),
+        field: (row) => row.accountReasonFk,
+        sortable: true,
+        options: accountReasons.value,
+        required: true,
+        model: 'accountReasonFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'accountResult',
+        label: t('Result'),
+        field: (row) => row.accountResultFk,
+        sortable: true,
+        options: accountResults.value,
+        required: true,
+        model: 'accountResultFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'accountResponsible',
+        label: t('Responsible'),
+        field: (row) => row.accountResponsibleFk,
+        sortable: true,
+        options: accountResponsibles.value,
+        required: true,
+        model: 'accountResponsibleFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 3,
+        align: 'left',
+    },
+    {
+        name: 'worker',
+        label: t('Worker'),
+        field: (row) => row.workerFk,
+        sortable: true,
+        options: workers.value,
+        model: 'workerFk',
+        optionValue: 'id',
+        optionLabel: 'nickname',
+        tabIndex: 4,
+        align: 'left',
+    },
+    {
+        name: 'accountRedelivery',
+        label: t('Redelivery'),
+        field: (row) => row.accountRedeliveryFk,
+        sortable: true,
+        options: accountRedeliveries.value,
+        required: true,
+        model: 'accountRedeliveryFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 5,
+        align: 'left',
+    },
+]);
+</script>
+<template>
+    <FetchData
+        url="AccountReasons"
+        order="description"
+        @on-fetch="(data) => (accountReasons = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountResults"
+        order="description"
+        @on-fetch="(data) => (accountResults = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountResponsibles"
+        order="description"
+        @on-fetch="(data) => (accountResponsibles = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountRedeliveries"
+        order="description"
+        @on-fetch="(data) => (accountRedeliveries = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        :where="{ active: 1 }"
+        order="name ASC"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <CrudModel
+        data-key="AccountDevelopments"
+        url="AccountDevelopments"
+        model="accountDevelopment"
+        :filter="developmentsFilter"
+        ref="accountDevelopmentForm"
+        :data-required="{ accountFk: route.params.id }"
+        v-model:selected="selected"
+        auto-load
+        @save-changes="$router.push(`/account/${route.params.id}/action`)"
+        :default-save="false"
+    >
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                :grid="$q.screen.lt.md"
+                table-header-class="text-left"
+            >
+                <template #body-cell="{ row, col }">
+                    <QTd
+                        auto-width
+                        @keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
+                    >
+                        <VnSelect
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                            hide-selected
+                        >
+                            <template #option="scope" v-if="col.name == 'worker'">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            {{ scope.opt?.nickname }}
+                                            {{ scope.opt?.code }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard
+                            bordered
+                            flat
+                            @keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
+                        >
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList dense>
+                                <QItem v-for="col in props.cols" :key="col.name">
+                                    <QItemSection>
+                                        <VnSelect
+                                            :label="col.label"
+                                            v-model="props.row[col.model]"
+                                            :options="col.options"
+                                            :option-value="col.optionValue"
+                                            :option-label="col.optionLabel"
+                                            dense
+                                            input-debounce="0"
+                                            :autofocus="col.tabIndex == 1"
+                                            hide-selected
+                                        />
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+        <template #moreAfterActions>
+            <QBtn
+                :label="tMobile('globals.save')"
+                ref="saveButtonRef"
+                color="primary"
+                icon="save"
+                :disable="!accountDevelopmentForm?.hasChanges"
+                @click="accountDevelopmentForm?.onSubmit"
+                :title="t('globals.save')"
+            />
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            fab
+            color="primary"
+            icon="add"
+            @keydown.tab.prevent="saveButtonRef.$el.focus()"
+            @click="accountDevelopmentForm.insert()"
+        />
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+es:
+    Reason: Motivo
+    Result: Consecuencia
+    Responsible: Responsable
+    Worker: Trabajador
+    Redelivery: Devolución
+</i18n>
diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
new file mode 100644
index 000000000..b74e4a418
--- /dev/null
+++ b/src/pages/Account/Card/AccountPrivileges.vue
@@ -0,0 +1,354 @@
+<script setup>
+import axios from 'axios';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+import { toDate, toCurrency, toPercentage } from 'filters/index';
+import CrudModel from 'components/CrudModel.vue';
+import FetchData from 'components/FetchData.vue';
+import VnDiscount from 'components/common/vnDiscount.vue';
+import AccountLinesImport from './AccountLinesImport.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+
+const quasar = useQuasar();
+const route = useRoute();
+const { t } = useI18n();
+
+const stateStore = useStateStore();
+const arrayData = useArrayData('AccountLines');
+const store = arrayData.store;
+
+const accountFilter = {
+    fields: ['ticketFk'],
+};
+const linesFilter = {
+    include: {
+        relation: 'sale',
+        scope: {
+            fields: ['concept', 'ticketFk', 'price', 'quantity', 'discount', 'itemFk'],
+            include: {
+                relation: 'ticket',
+            },
+        },
+    },
+};
+
+const accountLinesForm = ref();
+const account = ref(null);
+async function onFetchAccount(data) {
+    account.value = data;
+    fetchMana();
+}
+
+const amount = ref();
+const amountAccounted = ref();
+async function onFetch(rows, newRows) {
+    if (newRows) rows = newRows;
+    amount.value = 0;
+    amountAccounted.value = 0;
+    if (!rows || !rows.length) return;
+
+    for (const row of rows) {
+        const { sale } = row;
+        amount.value = amount.value + totalRow(sale);
+        const price = row.quantity * sale.price;
+        const discount = (sale.discount * price) / 100;
+        amountAccounted.value = amountAccounted.value + (price - discount);
+    }
+}
+
+function totalRow({ price, quantity, discount }) {
+    const amount = price * quantity;
+    const appliedDiscount = (discount * amount) / 100;
+    return amount - appliedDiscount;
+}
+
+const columns = computed(() => [
+    {
+        name: 'dated',
+        label: t('Delivered'),
+        field: ({ sale: { ticket } }) => toDate(ticket.landed),
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('Quantity'),
+        field: ({ sale }) => sale.quantity,
+        sortable: true,
+    },
+    {
+        name: 'accounted',
+        label: t('Accounted'),
+        field: (row) => row.quantity,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: t('Description'),
+        field: ({ sale }) => sale.concept,
+    },
+    {
+        name: 'price',
+        label: t('Price'),
+        field: ({ sale }) => sale.price,
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+    {
+        name: 'discount',
+        label: t('Discount'),
+        field: ({ sale }) => sale.discount,
+        format: (value) => toPercentage(value / 100),
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: t('Total'),
+        field: ({ sale }) => totalRow(sale),
+        format: (value) => toCurrency(value),
+        sortable: true,
+    },
+]);
+
+const selected = ref([]);
+const mana = ref(0);
+async function fetchMana() {
+    const ticketId = account.value.ticketFk;
+    const response = await axios.get(`Tickets/${ticketId}/getSalesPersonMana`);
+    mana.value = response.data;
+}
+
+async function updateDiscount({ saleFk, discount, canceller }) {
+    const body = { salesIds: [saleFk], newDiscount: discount };
+    const accountId = account.value.ticketFk;
+    const query = `Tickets/${accountId}/updateDiscount`;
+
+    await axios.post(query, body, {
+        signal: canceller.signal,
+    });
+    await accountLinesForm.value.reload();
+}
+
+function onUpdateDiscount(response) {
+    const row = store.data[response.rowIndex];
+    row.sale.discount = response.discount;
+    quasar.notify({
+        message: t('Discount updated'),
+        type: 'positive',
+    });
+}
+
+function showImportDialog() {
+    quasar
+        .dialog({
+            component: AccountLinesImport,
+            componentProps: {
+                ticketId: account.value.ticketFk,
+            },
+        })
+        .onOk(() => accountLinesForm.value.reload());
+}
+
+async function saveWhenHasChanges() {
+    if (accountLinesForm.value.getChanges().updates) {
+        await accountLinesForm.value.onSubmit();
+        await accountLinesForm.value.reload();
+    }
+}
+</script>
+<template>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <div class="row q-gutter-md">
+            <div>
+                {{ t('Amount') }}
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
+                    {{ toCurrency(amount) }}
+                </QChip>
+            </div>
+            <QSeparator dark vertical />
+            <div>
+                {{ t('Amount Accounted') }}
+                <QChip color="positive" :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amountAccounted) }}
+                </QChip>
+            </div>
+        </div>
+    </Teleport>
+
+    <FetchData
+        :url="`Accounts/${route.params.id}`"
+        :filter="accountFilter"
+        @on-fetch="onFetchAccount"
+        auto-load
+    />
+    <div class="q-pa-md">
+        <CrudModel
+            data-key="AccountLines"
+            ref="accountLinesForm"
+            :url="`Accounts/${route.params.id}/lines`"
+            save-url="AccountBeginnings/crud"
+            :filter="linesFilter"
+            @on-fetch="onFetch"
+            v-model:selected="selected"
+            :default-save="false"
+            :default-reset="false"
+            auto-load
+            :limit="0"
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :columns="columns"
+                    :rows="rows"
+                    :dense="$q.screen.lt.md"
+                    row-key="id"
+                    selection="multiple"
+                    v-model:selected="selected"
+                    :grid="$q.screen.lt.md"
+                >
+                    <template #body-cell-accounted="{ row }">
+                        <QTd auto-width align="right" class="text-primary">
+                            <QInput
+                                v-model="row.quantity"
+                                type="number"
+                                dense
+                                @keyup.enter="saveWhenHasChanges()"
+                                @blur="saveWhenHasChanges()"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-description="{ row, value }">
+                        <QTd auto-width align="right" class="text-primary">
+                            {{ value }}
+                            <ItemDescriptorProxy
+                                :id="row.sale.itemFk"
+                            ></ItemDescriptorProxy>
+                        </QTd>
+                    </template>
+                    <template #body-cell-discount="{ row, value, rowIndex }">
+                        <QTd auto-width align="right" class="text-primary">
+                            {{ value }}
+                            <VnDiscount
+                                :quantity="row.quantity"
+                                :price="row.sale.price"
+                                :discount="row.sale.discount"
+                                :mana="mana"
+                                :promise="updateDiscount"
+                                :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
+                                @on-update="onUpdateDiscount"
+                            />
+                        </QTd>
+                    </template>
+                    <!-- View for grid mode -->
+                    <template #item="props">
+                        <div
+                            class="q-mb-md col-12 grid-style-transition"
+                            :style="props.selected ? 'transform: scale(0.95);' : ''"
+                        >
+                            <QCard>
+                                <QCardSection>
+                                    <QCheckbox v-model="props.selected" />
+                                </QCardSection>
+                                <QSeparator inset />
+                                <QList dense>
+                                    <QItem
+                                        v-for="column of props.cols"
+                                        :key="column.name"
+                                    >
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ column.label }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection side>
+                                            <template v-if="column.name === 'accounted'">
+                                                <QItemLabel class="text-primary">
+                                                    <QInput
+                                                        v-model="props.row.quantity"
+                                                        type="number"
+                                                        dense
+                                                        autofocus
+                                                        @keyup.enter="
+                                                            saveWhenHasChanges()
+                                                        "
+                                                        @blur="saveWhenHasChanges()"
+                                                    />
+                                                </QItemLabel>
+                                            </template>
+                                            <template
+                                                v-else-if="column.name === 'discount'"
+                                            >
+                                                <QItemLabel class="text-primary">
+                                                    {{ column.value }}
+                                                    <VnDiscount
+                                                        :quantity="props.row.quantity"
+                                                        :price="props.row.sale.price"
+                                                        :discount="
+                                                            props.row.sale.discount
+                                                        "
+                                                        :mana="mana"
+                                                        :promise="updateDiscount"
+                                                        :data="{
+                                                            saleFk: props.row.sale.id,
+                                                            rowIndex: props.rowIndex,
+                                                        }"
+                                                        @on-update="onUpdateDiscount"
+                                                    />
+                                                </QItemLabel>
+                                            </template>
+                                            <template v-else>
+                                                <QItemLabel>
+                                                    {{ column.value }}
+                                                </QItemLabel>
+                                            </template>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QCard>
+                        </div>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+    </div>
+
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="showImportDialog()" />
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    padding-top: 50px;
+    max-width: 900px;
+    width: 100%;
+}
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+en:
+    You are about to remove {count} rows: '
+        You are about to remove <strong>{count}</strong> row |
+        You are about to remove  <strong>{count}</strong> rows'
+es:
+    Delivered: Entregado
+    Quantity: Cantidad
+    Accounted: Reclamada
+    Description: Descripción
+    Price: Precio
+    Discount: Descuento
+    Actions: Acciones
+    Amount: Total
+    Amount Accounted: Cantidad reclamada
+    Delete accounted sales: Eliminar ventas reclamadas
+    Discount updated: Descuento actualizado
+    Accounted quantity: Cantidad reclamada
+    You are about to remove {count} rows: '
+        Vas a eliminar <strong>{count}</strong> línea |
+        Vas a eliminar <strong>{count}</strong> líneas'
+</i18n>
diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
new file mode 100644
index 000000000..c6b06ce54
--- /dev/null
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -0,0 +1,502 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate, toCurrency } from 'src/filters';
+import CardSummary from 'components/ui/CardSummary.vue';
+import FetchData from 'components/FetchData.vue';
+import { getUrl } from 'src/composables/getUrl';
+import { useSession } from 'src/composables/useSession';
+import VnLv from 'src/components/ui/VnLv.vue';
+import AccountNotes from 'src/pages/Account/Card/AccountNotes.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import axios from 'axios';
+import dashIfEmpty from 'src/filters/dashIfEmpty';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const AccountStates = ref([]);
+const accountUrl = ref();
+const salixUrl = ref();
+const accountDmsRef = ref();
+const accountDmsFilter = ref({
+    include: [
+        {
+            relation: 'dms',
+        },
+    ],
+});
+
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+    accountUrl.value = salixUrl.value + `account/${entityId.value}/`;
+});
+
+const detailsColumns = ref([
+    {
+        name: 'item',
+        label: 'account.summary.item',
+        field: (row) => row.sale.itemFk,
+        sortable: true,
+    },
+    {
+        name: 'landed',
+        label: 'account.summary.landed',
+        field: (row) => row.sale.ticket.landed,
+        format: (value) => toDate(value),
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: 'account.summary.quantity',
+        field: (row) => row.sale.quantity,
+        sortable: true,
+    },
+    {
+        name: 'accounted',
+        label: 'account.summary.accounted',
+        field: (row) => row.quantity,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: 'globals.description',
+        field: (row) => row.sale.concept,
+    },
+    {
+        name: 'price',
+        label: 'account.summary.price',
+        field: (row) => row.sale.price,
+        sortable: true,
+    },
+    {
+        name: 'discount',
+        label: 'account.summary.discount',
+        field: (row) => row.sale.discount,
+        format: (value) => `${value} %`,
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: 'account.summary.total',
+        field: ({ sale }) =>
+            toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
+        sortable: true,
+    },
+]);
+
+const STATE_COLOR = {
+    pending: 'warning',
+    incomplete: 'info',
+    resolved: 'positive',
+    canceled: 'negative',
+};
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+
+const developmentColumns = ref([
+    {
+        name: 'accountReason',
+        label: 'account.summary.reason',
+        field: (row) => row.accountReason.description,
+        sortable: true,
+    },
+    {
+        name: 'accountResult',
+        label: 'account.summary.result',
+        field: (row) => row.accountResult.description,
+        sortable: true,
+    },
+    {
+        name: 'accountResponsible',
+        label: 'account.summary.responsible',
+        field: (row) => row.accountResponsible.description,
+        sortable: true,
+    },
+    {
+        name: 'worker',
+        label: 'account.summary.worker',
+        field: (row) => row.worker?.user.nickname,
+        sortable: true,
+    },
+    {
+        name: 'accountRedelivery',
+        label: 'account.summary.redelivery',
+        field: (row) => row.accountRedelivery.description,
+        sortable: true,
+    },
+]);
+const accountDms = ref([]);
+const multimediaDialog = ref();
+const multimediaSlide = ref();
+
+async function getAccountDms() {
+    accountDmsFilter.value.where = { accountFk: entityId.value };
+    await accountDmsRef.value.fetch();
+}
+
+function setAccountDms(data) {
+    accountDms.value = [];
+    data.forEach((media) => {
+        accountDms.value.push({
+            isVideo: media.dms.contentType == 'video/mp4',
+            url: `/api/Accounts/${media.dmsFk}/downloadFile?access_token=${token}`,
+            dmsFk: media.dmsFk,
+        });
+    });
+}
+
+function openDialog(dmsId) {
+    multimediaSlide.value = dmsId;
+    multimediaDialog.value = true;
+}
+async function changeState(value) {
+    await axios.patch(`Accounts/updateAccount/${entityId.value}`, {
+        accountStateFk: value,
+    });
+    router.go(route.fullPath);
+}
+</script>
+
+<template>
+    <FetchData
+        url="AccountDms"
+        :filter="accountDmsFilter"
+        @on-fetch="(data) => setAccountDms(data)"
+        ref="accountDmsRef"
+    />
+    <FetchData
+        url="AccountStates"
+        @on-fetch="(data) => (AccountStates = data)"
+        auto-load
+    />
+    <CardSummary
+        ref="summary"
+        :url="`Accounts/${entityId}/getSummary`"
+        :entity-id="entityId"
+        @on-fetch="getAccountDms"
+    >
+        <template #header="{ entity: { account } }">
+            {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
+        </template>
+        <template #header-right>
+            <QBtnDropdown
+                side
+                top
+                color="black"
+                text-color="white"
+                :label="t('ticket.summary.changeState')"
+            >
+                <QList>
+                    <QVirtualScroll
+                        style="max-height: 300px"
+                        :items="AccountStates"
+                        separator
+                        v-slot="{ item, index }"
+                    >
+                        <QItem
+                            :key="index"
+                            dense
+                            clickable
+                            v-close-popup
+                            @click="changeState(item.id)"
+                        >
+                            <QItemSection>
+                                <QItemLabel>{{ item.description }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QVirtualScroll>
+                </QList>
+            </QBtnDropdown>
+        </template>
+        <template #body="{ entity: { account, salesAccounted, developments } }">
+            <QCard class="vn-one">
+                <VnTitle
+                    :url="`#/account/${entityId}/basic-data`"
+                    :text="t('account.pageTitles.basicData')"
+                />
+                <VnLv
+                    :label="t('account.summary.created')"
+                    :value="toDate(account.created)"
+                />
+                <VnLv :label="t('account.summary.state')">
+                    <template #value>
+                        <QChip :color="stateColor(account.accountState.code)" dense>
+                            {{ account.accountState.description }}
+                        </QChip>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('globals.salesPerson')">
+                    <template #value>
+                        <VnUserLink
+                            :name="account.client?.salesPersonUser?.name"
+                            :worker-id="account.client?.salesPersonFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('account.summary.attendedBy')">
+                    <template #value>
+                        <VnUserLink
+                            :name="account.worker?.user?.nickname"
+                            :worker-id="account.workerFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('account.summary.customer')">
+                    <template #value>
+                        <span class="link cursor-pointer">
+                            {{ account.client?.name }}
+                            <CustomerDescriptorProxy :id="account.clientFk" />
+                        </span>
+                    </template>
+                </VnLv>
+                <VnLv
+                    :label="t('account.basicData.pickup')"
+                    :value="`${dashIfEmpty(account.pickup)}`"
+                />
+            </QCard>
+            <QCard class="vn-three">
+                <VnTitle
+                    :url="`#/account/${entityId}/notes`"
+                    :text="t('account.summary.notes')"
+                />
+                <AccountNotes
+                    :id="entityId"
+                    :add-note="false"
+                    style="max-height: 300px"
+                    order="created ASC"
+                />
+            </QCard>
+            <QCard class="vn-two" v-if="salesAccounted.length > 0">
+                <VnTitle
+                    :url="`#/account/${entityId}/lines`"
+                    :text="t('account.summary.details')"
+                />
+                <QTable
+                    :columns="detailsColumns"
+                    :rows="salesAccounted"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                <span v-if="col.name != 'description'">{{
+                                    t(col.value)
+                                }}</span>
+                                <QBtn
+                                    v-if="col.name == 'description'"
+                                    flat
+                                    color="blue"
+                                    >{{ col.value }}</QBtn
+                                >
+                                <ItemDescriptorProxy
+                                    v-if="col.name == 'description'"
+                                    :id="props.row.sale.itemFk"
+                                    :sale-fk="props.row.saleFk"
+                                ></ItemDescriptorProxy>
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard class="vn-two" v-if="accountDms.length > 0">
+                <VnTitle
+                    :url="`#/account/${entityId}/photos`"
+                    :text="t('account.summary.photos')"
+                />
+                <div class="container">
+                    <div
+                        class="multimedia-container"
+                        v-for="(media, index) of accountDms"
+                        :key="index"
+                    >
+                        <div class="relative-position">
+                            <QIcon
+                                name="play_circle"
+                                color="primary"
+                                size="xl"
+                                class="absolute-center zindex"
+                                v-if="media.isVideo"
+                                @click.stop="openDialog(media.dmsFk)"
+                            >
+                                <QTooltip>Video</QTooltip>
+                            </QIcon>
+                            <QCard class="multimedia relative-position">
+                                <QImg
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    @click="openDialog(media.dmsFk)"
+                                    v-if="!media.isVideo"
+                                >
+                                </QImg>
+                                <video
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    muted="muted"
+                                    v-if="media.isVideo"
+                                    @click="openDialog(media.dmsFk)"
+                                />
+                            </QCard>
+                        </div>
+                    </div>
+                </div>
+            </QCard>
+            <QCard class="vn-two" v-if="developments.length > 0">
+                <VnTitle
+                    :url="accountUrl + 'development'"
+                    :text="t('account.summary.development')"
+                />
+                <QTable
+                    :columns="developmentColumns"
+                    :rows="developments"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard class="vn-max">
+                <VnTitle
+                    :url="accountUrl + 'action'"
+                    :text="t('account.summary.actions')"
+                />
+                <div id="slider-container" class="q-px-xl q-py-md">
+                    <QSlider
+                        v-model="account.responsibility"
+                        label
+                        :label-value="t('account.summary.responsibility')"
+                        label-always
+                        color="var()"
+                        markers
+                        :marker-labels="[
+                            { value: 1, label: t('account.summary.company') },
+                            { value: 5, label: t('account.summary.person') },
+                        ]"
+                        :min="1"
+                        :max="5"
+                        readonly
+                    />
+                </div>
+            </QCard>
+            <QDialog
+                v-model="multimediaDialog"
+                transition-show="slide-up"
+                transition-hide="slide-down"
+            >
+                <QToolbar class="absolute zindex close-button">
+                    <QSpace />
+                    <QBtn icon="close" color="primary" round dense v-close-popup />
+                </QToolbar>
+                <QCarousel
+                    swipeable
+                    animated
+                    v-model="multimediaSlide"
+                    arrows
+                    class="fit"
+                >
+                    <QCarouselSlide
+                        v-for="media of accountDms"
+                        :key="media.dmsFk"
+                        :name="media.dmsFk"
+                    >
+                        <QImg
+                            :src="media.url"
+                            class="fit"
+                            fit="scale-down"
+                            v-if="!media.isVideo"
+                        />
+                        <video
+                            class="q-ma-none fit"
+                            v-if="media.isVideo"
+                            controls
+                            muted
+                            autoplay
+                        >
+                            <source :src="media.url" type="video/mp4" />
+                        </video>
+                    </QCarouselSlide>
+                </QCarousel>
+            </QDialog>
+        </template>
+    </CardSummary>
+</template>
+
+<style lang="scss" scoped>
+.q-dialog__inner--minimized > div {
+    max-width: 80%;
+}
+.container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+.multimedia-container {
+    flex: 1 0 21%;
+}
+.multimedia {
+    transition: all 0.5s;
+    opacity: 1;
+    height: 250px;
+
+    .q-img {
+        object-fit: cover;
+        background-color: black;
+    }
+    video {
+        object-fit: cover;
+        background-color: black;
+    }
+}
+
+.multimedia:hover {
+    opacity: 0.5;
+}
+
+.close-button {
+    top: 1%;
+    right: 10%;
+}
+
+.zindex {
+    z-index: 1;
+}
+
+.change-state {
+    width: 10%;
+}
+</style>
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
new file mode 100644
index 000000000..eec5ecc8a
--- /dev/null
+++ b/src/pages/Account/locale/es.yml
@@ -0,0 +1,2 @@
+Search account: Buscar usuario
+You can search by account id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 674184383..6d85a4aa7 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -4,20 +4,28 @@ export default {
     path: '/account',
     name: 'Account',
     meta: {
-        title: 'accounts',
-        icon: 'vn:account',
+        title: 'users',
+        icon: 'face',
         moduleName: 'Account',
     },
     component: RouterView,
     redirect: { name: 'AccountMain' },
     menus: {
-        main: ['AccountList', 'AccountDepartment'],
+        main: [
+            'AccountList',
+            'AccountRoles',
+            'AccountAlias',
+            'AccountAccounts',
+            'AccountLdap',
+            'AccountSamba',
+            'AccountConnections',
+        ],
         card: [
             'AccountBasicData',
             'AccountNotes',
-            'AccountPda',
-            'AccountNotificationsManager',
-            'AccountPBX',
+            'AccountMailForwarding',
+            'AccountPrivileges',
+            'AccountLog',
             'AccountLog',
             'AccountCalendar',
             'AccountDms',
@@ -42,14 +50,69 @@ export default {
                     component: () => import('src/pages/Account/AccountList.vue'),
                 },
                 {
-                    path: 'department',
-                    name: 'AccountDepartment',
+                    path: 'roles',
+                    name: 'AccountRoles',
                     meta: {
-                        title: 'department',
-                        icon: 'vn:greuge',
+                        title: 'roles',
+                        icon: 'group',
                     },
-                    component: () => import('src/pages/Account/AccountDepartment.vue'),
+                    component: () => import('src/pages/Account/AccountRoles.vue'),
                 },
+                {
+                    path: 'alias',
+                    name: 'AccountAlias',
+                    meta: {
+                        title: 'alias',
+                        icon: 'email',
+                    },
+                    component: () => import('src/pages/Account/AccountAlias.vue'),
+                },
+                {
+                    path: 'accounts',
+                    name: 'AccountAccounts',
+                    meta: {
+                        title: 'accounts',
+                        icon: 'accessibility',
+                    },
+                    component: () => import('src/pages/Account/AccountAccounts.vue'),
+                },
+                {
+                    path: 'ldap',
+                    name: 'AccountLdap',
+                    meta: {
+                        title: 'ldap',
+                        icon: 'account_tree',
+                    },
+                    component: () => import('src/pages/Account/AccountLdap.vue'),
+                },
+                {
+                    path: 'samba',
+                    name: 'AccountSamba',
+                    meta: {
+                        title: 'samba',
+                        icon: 'preview',
+                    },
+                    component: () => import('src/pages/Account/AccountSamba.vue'),
+                },
+                {
+                    path: 'acls',
+                    name: 'AccountAcls',
+                    meta: {
+                        title: 'acls',
+                        icon: 'check',
+                    },
+                    component: () => import('src/pages/Account/AccountAcls.vue'),
+                },
+                {
+                    path: 'connections',
+                    name: 'AccountConnections',
+                    meta: {
+                        title: 'connections',
+                        icon: 'check',
+                    },
+                    component: () => import('src/pages/Account/AccountConnections.vue'),
+                },
+
                 {
                     path: 'create',
                     name: 'AccountCreate',
@@ -77,8 +140,8 @@ export default {
                     component: () => import('src/pages/Account/Card/AccountSummary.vue'),
                 },
                 {
-                    path: 'basic-data',
                     name: 'AccountBasicData',
+                    path: 'basic-data',
                     meta: {
                         title: 'basicData',
                         icon: 'vn:settings',
@@ -87,87 +150,34 @@ export default {
                         import('src/pages/Account/Card/AccountBasicData.vue'),
                 },
                 {
-                    path: 'notes',
-                    name: 'NotesCard',
-                    redirect: { name: 'AccountNotes' },
-                    children: [
-                        {
-                            path: '',
-                            name: 'AccountNotes',
-                            meta: {
-                                title: 'notes',
-                                icon: 'vn:notes',
-                            },
-                            component: () =>
-                                import('src/pages/Account/Card/AccountNotes.vue'),
-                        },
-                    ],
-                },
-                {
-                    name: 'AccountPda',
-                    path: 'pda',
+                    name: 'AccountMailForwarding',
+                    path: 'mailForwarding',
                     meta: {
                         title: 'pda',
                         icon: 'phone_android',
                     },
-                    component: () => import('src/pages/Account/Card/AccountPda.vue'),
+                    component: () =>
+                        import('src/pages/Account/Card/AccountMailForwarding.vue'),
                 },
                 {
-                    name: 'AccountNotificationsManager',
-                    path: 'notifications',
+                    name: 'AccountPrivileges',
+                    path: 'privileges',
                     meta: {
                         title: 'notifications',
                         icon: 'notifications',
                     },
                     component: () =>
-                        import('src/pages/Account/Card/AccountNotificationsManager.vue'),
-                },
-                {
-                    path: 'pbx',
-                    name: 'AccountPBX',
-                    meta: {
-                        title: 'pbx',
-                        icon: 'vn:pbx',
-                    },
-                    component: () => import('src/pages/Account/Card/AccountPBX.vue'),
-                },
-                {
-                    name: 'AccountDms',
-                    path: 'dms',
-                    meta: {
-                        title: 'dms',
-                        icon: 'cloud_upload',
-                    },
-                    component: () => import('src/pages/Account/Card/AccountDms.vue'),
+                        import('src/pages/Account/Card/AccountPrivileges.vue'),
                 },
                 {
                     name: 'AccountLog',
                     path: 'log',
                     meta: {
                         title: 'log',
-                        icon: 'vn:History',
+                        icon: 'vn:log',
                     },
                     component: () => import('src/pages/Account/Card/AccountLog.vue'),
                 },
-                {
-                    name: 'AccountCalendar',
-                    path: 'calendar',
-                    meta: {
-                        title: 'calendar',
-                        icon: 'calendar_today',
-                    },
-                    component: () => import('src/pages/Account/Card/AccountCalendar.vue'),
-                },
-                {
-                    name: 'AccountTimeControl',
-                    path: 'time-control',
-                    meta: {
-                        title: 'timeControl',
-                        icon: 'access_time',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Card/AccountTimeControl.vue'),
-                },
             ],
         },
     ],

From c68ad5be34b58a409320fdcf839b334ef99e6c16 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 08:40:00 +0200
Subject: [PATCH 05/25] feat #7311: minor changes

---
 src/i18n/locale/en.yml                    | 12 +-----------
 src/i18n/locale/es.yml                    | 12 +-----------
 src/pages/Account/AccountList.vue         |  9 +--------
 src/pages/Account/Card/AccountSummary.vue |  7 -------
 src/pages/Account/locale/en.yml           | 12 ++++++++++++
 src/pages/Account/locale/es.yml           | 14 ++++++++++++--
 src/router/modules/account.js             |  5 -----
 7 files changed, 27 insertions(+), 44 deletions(-)
 create mode 100644 src/pages/Account/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index e7747b77a..ebe9070c4 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1240,17 +1240,7 @@ zone:
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
-account:
-    pageTitles:
-        users: Users
-        usersList: Users
-        roles: Roles
-        alias: Mail aliasses
-        accounts: Accounts
-        ldap: LDAP
-        samba: Samba
-        acls: ACLs
-        connections: Connections
+
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index ae927bd00..30121b925 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1239,17 +1239,7 @@ zone:
         list: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
-account:
-    pageTitles:
-        users: Usuarios
-        list: Usuarios
-        roles: Roles
-        alias: Alias de correo
-        accounts: Cuentas
-        ldap: LDAP
-        samba: Samba
-        acls: ACLs
-        connections: Conexiones
+
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index f26c741c2..da25da15c 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -12,7 +12,6 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { getUrl } from 'src/composables/getUrl';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -42,7 +41,7 @@ function navigate(event, id) {
         <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="AccountList"
-                :label="t('Search account')"
+                :label="t('account.search')"
                 :info="t('You can search by account id or customer name')"
             />
         </Teleport>
@@ -140,9 +139,3 @@ function navigate(event, id) {
         </div>
     </QPage>
 </template>
-
-<i18n>
-es:
-    Search account: Buscar reclamación
-    You can search by account id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
-</i18n>
diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
index c6b06ce54..8bd7c01d7 100644
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -8,7 +8,6 @@ import FetchData from 'components/FetchData.vue';
 import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
-import AccountNotes from 'src/pages/Account/Card/AccountNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
@@ -276,12 +275,6 @@ async function changeState(value) {
                     :url="`#/account/${entityId}/notes`"
                     :text="t('account.summary.notes')"
                 />
-                <AccountNotes
-                    :id="entityId"
-                    :add-note="false"
-                    style="max-height: 300px"
-                    order="created ASC"
-                />
             </QCard>
             <QCard class="vn-two" v-if="salesAccounted.length > 0">
                 <VnTitle
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
new file mode 100644
index 000000000..09eb2447c
--- /dev/null
+++ b/src/pages/Account/locale/en.yml
@@ -0,0 +1,12 @@
+account:
+    pageTitles:
+        users: Users
+        list: Users
+        roles: Roles
+        alias: Mail aliasses
+        accounts: Accounts
+        ldap: LDAP
+        samba: Samba
+        acls: ACLs
+        connections: Connections
+    search: Search user
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index eec5ecc8a..f5a3eb977 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -1,2 +1,12 @@
-Search account: Buscar usuario
-You can search by account id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+account:
+    pageTitles:
+        users: Usuarios
+        list: Usuarios
+        roles: Roles
+        alias: Alias de correo
+        accounts: Cuentas
+        ldap: LDAP
+        samba: Samba
+        acls: ACLs
+        connections: Conexiones
+    search: Buscar usuario
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 6d85a4aa7..83abceda9 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -22,14 +22,9 @@ export default {
         ],
         card: [
             'AccountBasicData',
-            'AccountNotes',
             'AccountMailForwarding',
             'AccountPrivileges',
             'AccountLog',
-            'AccountLog',
-            'AccountCalendar',
-            'AccountDms',
-            'AccountTimeControl',
         ],
         departmentCard: ['BasicData'],
     },

From f51af69fdd53c9ff5af811edd7d152d017902420 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 19:48:46 +0200
Subject: [PATCH 06/25] updates

---
 src/pages/Account/AccountAccounts.vue         |  5 --
 src/pages/Account/AccountAcls.vue             |  2 -
 src/pages/Account/AccountAlias.vue            |  3 --
 src/pages/Account/AccountConnections.vue      |  3 --
 src/pages/Account/AccountLdap.vue             |  3 --
 src/pages/Account/AccountList.vue             |  3 --
 src/pages/Account/AccountRoles.vue            |  3 --
 src/pages/Account/AccountSamba.vue            |  5 --
 src/pages/Account/Card/AccountDescriptor.vue  |  8 +--
 .../Account/Card/AccountDescriptorMenu.vue    | 50 +------------------
 src/pages/Account/Card/AccountPrivileges.vue  | 18 +------
 src/pages/Account/Card/AccountSummary.vue     |  9 +---
 12 files changed, 4 insertions(+), 108 deletions(-)

diff --git a/src/pages/Account/AccountAccounts.vue b/src/pages/Account/AccountAccounts.vue
index ba6f50cbc..2b94a88da 100644
--- a/src/pages/Account/AccountAccounts.vue
+++ b/src/pages/Account/AccountAccounts.vue
@@ -4,15 +4,12 @@ import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { getUrl } from 'src/composables/getUrl';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -64,7 +61,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -101,7 +97,6 @@ function navigate(event, id) {
                                 outline
                                 style="margin-top: 15px"
                             >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index a479ca330..8de4d3dc1 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -7,7 +7,6 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -62,7 +61,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
diff --git a/src/pages/Account/AccountAlias.vue b/src/pages/Account/AccountAlias.vue
index a479ca330..2b94a88da 100644
--- a/src/pages/Account/AccountAlias.vue
+++ b/src/pages/Account/AccountAlias.vue
@@ -7,7 +7,6 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -62,7 +61,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -99,7 +97,6 @@ function navigate(event, id) {
                                 outline
                                 style="margin-top: 15px"
                             >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
diff --git a/src/pages/Account/AccountConnections.vue b/src/pages/Account/AccountConnections.vue
index a479ca330..2b94a88da 100644
--- a/src/pages/Account/AccountConnections.vue
+++ b/src/pages/Account/AccountConnections.vue
@@ -7,7 +7,6 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -62,7 +61,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -99,7 +97,6 @@ function navigate(event, id) {
                                 outline
                                 style="margin-top: 15px"
                             >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
index a479ca330..2b94a88da 100644
--- a/src/pages/Account/AccountLdap.vue
+++ b/src/pages/Account/AccountLdap.vue
@@ -7,7 +7,6 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -62,7 +61,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -99,7 +97,6 @@ function navigate(event, id) {
                                 outline
                                 style="margin-top: 15px"
                             >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index da25da15c..3d5abaa49 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -8,7 +8,6 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -87,7 +86,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -124,7 +122,6 @@ function navigate(event, id) {
                                 outline
                                 style="margin-top: 15px"
                             >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
diff --git a/src/pages/Account/AccountRoles.vue b/src/pages/Account/AccountRoles.vue
index a479ca330..2b94a88da 100644
--- a/src/pages/Account/AccountRoles.vue
+++ b/src/pages/Account/AccountRoles.vue
@@ -7,7 +7,6 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -62,7 +61,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -99,7 +97,6 @@ function navigate(event, id) {
                                 outline
                                 style="margin-top: 15px"
                             >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
index ba6f50cbc..2b94a88da 100644
--- a/src/pages/Account/AccountSamba.vue
+++ b/src/pages/Account/AccountSamba.vue
@@ -4,15 +4,12 @@ import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { getUrl } from 'src/composables/getUrl';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -64,7 +61,6 @@ function navigate(event, id) {
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
-                                        <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
@@ -101,7 +97,6 @@ function navigate(event, id) {
                                 outline
                                 style="margin-top: 15px"
                             >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index bdc0113a6..3850ef210 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -4,14 +4,11 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toPercentage } from 'src/filters';
 import { useState } from 'src/composables/useState';
-import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
-import AccountDescriptorMenu from 'pages/Account/Card/AccountDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
-import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 
 const $props = defineProps({
     id: {
@@ -104,7 +101,7 @@ onMounted(async () => {
         data-key="accountData"
     >
         <template #menu="{ entity }">
-            <AccountDescriptorMenu :account="entity" />
+            {{ entity }}
         </template>
         <template #body="{ entity }">
             <VnLv v-if="entity.accountState" :label="t('account.card.state')">
@@ -143,7 +140,6 @@ onMounted(async () => {
                 <template #value>
                     <span class="link">
                         {{ entity.ticket?.zone?.name }}
-                        <ZoneDescriptorProxy :id="entity.ticket?.zone?.id" />
                     </span>
                 </template>
             </VnLv>
@@ -155,8 +151,6 @@ onMounted(async () => {
                 <template #value>
                     <span class="link">
                         {{ entity.ticketFk }}
-
-                        <TicketDescriptorProxy :id="entity.ticketFk" />
                     </span>
                 </template>
             </VnLv>
diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index b63c0e5a8..249fd2481 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -5,8 +5,6 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { usePrintService } from 'composables/usePrintService';
-import SendEmailDialog from 'components/common/SendEmailDialog.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
 
 const $props = defineProps({
     account: {
@@ -15,10 +13,8 @@ const $props = defineProps({
     },
 });
 
-const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
-const { openReport, sendEmail } = usePrintService();
+const { openReport } = usePrintService();
 
 const account = ref($props.account);
 
@@ -28,50 +24,6 @@ function openPickupOrder() {
         recipientId: account.value.clientFk,
     });
 }
-
-function confirmPickupOrder() {
-    const customer = account.value.client;
-    quasar.dialog({
-        component: SendEmailDialog,
-        componentProps: {
-            data: {
-                address: customer.email,
-            },
-            promise: sendPickupOrder,
-        },
-    });
-}
-
-function sendPickupOrder({ address }) {
-    const id = account.value.id;
-    const customer = account.value.client;
-    return sendEmail(`Accounts/${id}/account-pickup-email`, {
-        recipientId: customer.id,
-        recipient: address,
-    });
-}
-
-function confirmRemove() {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                title: t('confirmDeletion'),
-                message: t('confirmDeletionMessage'),
-                promise: remove,
-            },
-        })
-        .onOk(async () => await router.push({ name: 'AccountList' }));
-}
-
-async function remove() {
-    const id = account.value.id;
-    await axios.delete(`Accounts/${id}`);
-    quasar.notify({
-        message: t('globals.dataDeleted'),
-        type: 'positive',
-    });
-}
 </script>
 <template>
     <QItem v-ripple clickable>
diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
index b74e4a418..f754ddc47 100644
--- a/src/pages/Account/Card/AccountPrivileges.vue
+++ b/src/pages/Account/Card/AccountPrivileges.vue
@@ -10,8 +10,6 @@ import { toDate, toCurrency, toPercentage } from 'filters/index';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
-import AccountLinesImport from './AccountLinesImport.vue';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -141,17 +139,6 @@ function onUpdateDiscount(response) {
     });
 }
 
-function showImportDialog() {
-    quasar
-        .dialog({
-            component: AccountLinesImport,
-            componentProps: {
-                ticketId: account.value.ticketFk,
-            },
-        })
-        .onOk(() => accountLinesForm.value.reload());
-}
-
 async function saveWhenHasChanges() {
     if (accountLinesForm.value.getChanges().updates) {
         await accountLinesForm.value.onSubmit();
@@ -221,10 +208,7 @@ async function saveWhenHasChanges() {
                     </template>
                     <template #body-cell-description="{ row, value }">
                         <QTd auto-width align="right" class="text-primary">
-                            {{ value }}
-                            <ItemDescriptorProxy
-                                :id="row.sale.itemFk"
-                            ></ItemDescriptorProxy>
+                            {{ value }} {{ row }}
                         </QTd>
                     </template>
                     <template #body-cell-discount="{ row, value, rowIndex }">
diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
index 8bd7c01d7..69f46dde8 100644
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -9,9 +9,7 @@ import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import axios from 'axios';
 import dashIfEmpty from 'src/filters/dashIfEmpty';
 
@@ -261,7 +259,6 @@ async function changeState(value) {
                     <template #value>
                         <span class="link cursor-pointer">
                             {{ account.client?.name }}
-                            <CustomerDescriptorProxy :id="account.clientFk" />
                         </span>
                     </template>
                 </VnLv>
@@ -308,11 +305,7 @@ async function changeState(value) {
                                     color="blue"
                                     >{{ col.value }}</QBtn
                                 >
-                                <ItemDescriptorProxy
-                                    v-if="col.name == 'description'"
-                                    :id="props.row.sale.itemFk"
-                                    :sale-fk="props.row.saleFk"
-                                ></ItemDescriptorProxy>
+
                             </QTh>
                         </QTr>
                     </template>

From 5f607823b717510b7ab4c7151716a13c93574e37 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 9 May 2024 19:50:31 +0200
Subject: [PATCH 07/25] feat AccountCreate

---
 src/pages/Account/AccountCreate.vue | 165 ++++++++++++++++++++++++++++
 1 file changed, 165 insertions(+)
 create mode 100644 src/pages/Account/AccountCreate.vue

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
new file mode 100644
index 000000000..6044db303
--- /dev/null
+++ b/src/pages/Account/AccountCreate.vue
@@ -0,0 +1,165 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useState } from 'src/composables/useState';
+import { toDate } from 'src/filters';
+
+const state = useState();
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const user = state.getUser();
+const newAccountForm = reactive({
+    supplierFk: null,
+    travelFk: Number(route.query?.travelFk) || null,
+    companyFk: user.value.companyFk || null,
+});
+const suppliersOptions = ref([]);
+const travelsOptions = ref([]);
+const companiesOptions = ref([]);
+
+const redirectToAccountBasicData = (_, { id }) => {
+    router.push({ name: 'AccountBasicData', params: { id } });
+};
+</script>
+
+<template>
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        order="nickname"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Travels/filter"
+        :filter="{ fields: ['id', 'warehouseInName'] }"
+        order="id"
+        @on-fetch="(data) => (travelsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                url="Entries/filter"
+                custom-route-redirect-name="AccountSummary"
+                data-key="AccountSummary"
+                :label="t('Search entries')"
+                :info="t('You can search by account reference')"
+            />
+        </Teleport>
+    </template>
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="Entries"
+            model="account"
+            :form-initial-data="newAccountForm"
+            @on-data-saved="redirectToAccountBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Supplier')"
+                            class="full-width"
+                            v-model="data.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="nickname"
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.supplierFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.id }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Travel')"
+                            class="full-width"
+                            v-model="data.travelFk"
+                            :options="travelsOptions"
+                            option-value="id"
+                            option-label="warehouseInName"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.travelFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.agencyModeName }} -
+                                            {{ scope.opt?.warehouseInName }} ({{
+                                                toDate(scope.opt?.shipped)
+                                            }}) &#x2192;
+                                            {{ scope.opt?.warehouseOutName }} ({{
+                                                toDate(scope.opt?.landed)
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Company')"
+                            class="full-width"
+                            v-model="data.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.companyFk')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<i18n>
+    es:
+        Supplier: Proveedor
+        Travel: Envío
+        Company: Empresa
+</i18n>

From f6d3e37787db76df9fccb979bdf5b2a1937fda8c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:02:12 +0200
Subject: [PATCH 08/25] feat: accountRoles

---
 src/pages/Account/{ => Role}/AccountRoles.vue |   4 +-
 src/pages/Account/Role/AccountRolesFilter.vue | 225 ++++++++
 src/pages/Account/Role/Card/RoleBasicData.vue | 181 +++++++
 src/pages/Account/Role/Card/RoleSummary.vue   | 488 ++++++++++++++++++
 src/router/modules/account.js                 |   3 +-
 5 files changed, 898 insertions(+), 3 deletions(-)
 rename src/pages/Account/{ => Role}/AccountRoles.vue (97%)
 create mode 100644 src/pages/Account/Role/AccountRolesFilter.vue
 create mode 100644 src/pages/Account/Role/Card/RoleBasicData.vue
 create mode 100644 src/pages/Account/Role/Card/RoleSummary.vue

diff --git a/src/pages/Account/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
similarity index 97%
rename from src/pages/Account/AccountRoles.vue
rename to src/pages/Account/Role/AccountRoles.vue
index 2b94a88da..910a6f124 100644
--- a/src/pages/Account/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -4,11 +4,11 @@ import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from './AccountFilter.vue';
+import AccountFilter from '../AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import AccountSummary from './Card/AccountSummary.vue';
+import AccountSummary from '../Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
diff --git a/src/pages/Account/Role/AccountRolesFilter.vue b/src/pages/Account/Role/AccountRolesFilter.vue
new file mode 100644
index 000000000..23b72266c
--- /dev/null
+++ b/src/pages/Account/Role/AccountRolesFilter.vue
@@ -0,0 +1,225 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const workers = ref();
+const states = ref();
+</script>
+
+<template>
+    <FetchData url="AccountStates" @on-fetch="(data) => (states = data)" auto-load />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        lazy-rules
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="xs"></QIcon> </template
+                    ></VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Client Name')"
+                        v-model="params.clientName"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Attender')"
+                        v-model="params.attenderFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelect
+                        :label="t('Responsible')"
+                        v-model="params.accountResponsibleFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!states">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="states">
+                    <VnSelect
+                        :label="t('State')"
+                        v-model="params.accountStateFk"
+                        @update:model-value="searchFn()"
+                        :options="states"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.myTeam"
+                        :label="t('myTeam')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
+                <!-- <QItem>
+                        <QItemSection>
+                            <qSelect
+                                :label="t('Item')"
+                                v-model="params.itemFk"
+                                :options="items"
+                                :loading="loading"
+                                @filter="filterFn"
+                                @virtual-scroll="onScroll"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                map-options
+                            />
+                        </QItemSection>
+                    </QItem> -->
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: Contains
+        clientFk: Customer
+        clientName: Customer
+        salesPersonFk: Salesperson
+        attenderFk: Attender
+        accountResponsibleFk: Responsible
+        accountStateFk: State
+        created: Created
+    myTeam: My team
+es:
+    params:
+        search: Contiene
+        clientFk: Cliente
+        clientName: Cliente
+        salesPersonFk: Comercial
+        attenderFk: Asistente
+        accountResponsibleFk: Responsable
+        accountStateFk: Estado
+        created: Creada
+    Customer ID: ID cliente
+    Client Name: Nombre del cliente
+    Salesperson: Comercial
+    Attender: Asistente
+    Responsible: Responsable
+    State: Estado
+    Item: Artículo
+    Created: Creada
+    More options: Más opciones
+    myTeam: Mi equipo
+</i18n>
diff --git a/src/pages/Account/Role/Card/RoleBasicData.vue b/src/pages/Account/Role/Card/RoleBasicData.vue
new file mode 100644
index 000000000..7a3548b8b
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleBasicData.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+import axios from 'axios';
+import { useSession } from 'src/composables/useSession';
+
+const route = useRoute();
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+
+const accountFilter = {
+    fields: [
+        'id',
+        'clientFk',
+        'created',
+        'workerFk',
+        'accountStateFk',
+        'packages',
+        'pickup',
+    ],
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const accountStates = ref([]);
+const accountStatesCopy = ref([]);
+const optionsList = ref([]);
+
+const workersOptions = ref([]);
+
+function setAccountStates(data) {
+    accountStates.value = data;
+    accountStatesCopy.value = data;
+}
+
+async function getEnumValues() {
+    optionsList.value = [{ id: null, description: t('account.basicData.null') }];
+    const { data } = await axios.get(`Applications/get-enum-values`, {
+        params: {
+            schema: 'vn',
+            table: 'account',
+            column: 'pickup',
+        },
+    });
+    for (let value of data)
+        optionsList.value.push({
+            id: value,
+            description: t(`account.basicData.${value}`),
+        });
+}
+
+getEnumValues();
+
+const statesFilter = {
+    options: accountStates,
+    filterFn: (options, value) => {
+        const search = value.toLowerCase();
+
+        if (value === '') return accountStatesCopy.value;
+
+        return options.value.filter((row) => {
+            const description = row.description.toLowerCase();
+
+            return description.indexOf(search) > -1;
+        });
+    },
+};
+</script>
+<template>
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <FetchData url="AccountStates" @on-fetch="setAccountStates" auto-load />
+    <FormModel
+        :url="`Accounts/${route.params.id}`"
+        :url-update="`Accounts/updateAccount/${route.params.id}`"
+        :filter="accountFilter"
+        model="account"
+        auto-load
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.client.name"
+                        :label="t('account.basicData.customer')"
+                        disable
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        v-model="data.created"
+                        :label="t('account.basicData.created')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelect
+                        :label="t('account.basicData.assignedTo')"
+                        v-model="data.workerFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        auto-load
+                        :rules="validate('account.accountStateFk')"
+                    >
+                        <template #before>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.workerFk"
+                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </VnSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.accountStateFk"
+                        :options="accountStates"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('account.basicData.state')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, statesFilter)"
+                        :rules="validate('account.accountStateFk')"
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model.number="data.packages"
+                        :label="t('globals.packages')"
+                        :rules="validate('account.packages')"
+                        type="number"
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.pickup"
+                        :options="optionsList"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('account.basicData.pickup')"
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Account/Role/Card/RoleSummary.vue b/src/pages/Account/Role/Card/RoleSummary.vue
new file mode 100644
index 000000000..69f46dde8
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleSummary.vue
@@ -0,0 +1,488 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate, toCurrency } from 'src/filters';
+import CardSummary from 'components/ui/CardSummary.vue';
+import FetchData from 'components/FetchData.vue';
+import { getUrl } from 'src/composables/getUrl';
+import { useSession } from 'src/composables/useSession';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+import axios from 'axios';
+import dashIfEmpty from 'src/filters/dashIfEmpty';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const AccountStates = ref([]);
+const accountUrl = ref();
+const salixUrl = ref();
+const accountDmsRef = ref();
+const accountDmsFilter = ref({
+    include: [
+        {
+            relation: 'dms',
+        },
+    ],
+});
+
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+    accountUrl.value = salixUrl.value + `account/${entityId.value}/`;
+});
+
+const detailsColumns = ref([
+    {
+        name: 'item',
+        label: 'account.summary.item',
+        field: (row) => row.sale.itemFk,
+        sortable: true,
+    },
+    {
+        name: 'landed',
+        label: 'account.summary.landed',
+        field: (row) => row.sale.ticket.landed,
+        format: (value) => toDate(value),
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: 'account.summary.quantity',
+        field: (row) => row.sale.quantity,
+        sortable: true,
+    },
+    {
+        name: 'accounted',
+        label: 'account.summary.accounted',
+        field: (row) => row.quantity,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: 'globals.description',
+        field: (row) => row.sale.concept,
+    },
+    {
+        name: 'price',
+        label: 'account.summary.price',
+        field: (row) => row.sale.price,
+        sortable: true,
+    },
+    {
+        name: 'discount',
+        label: 'account.summary.discount',
+        field: (row) => row.sale.discount,
+        format: (value) => `${value} %`,
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: 'account.summary.total',
+        field: ({ sale }) =>
+            toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
+        sortable: true,
+    },
+]);
+
+const STATE_COLOR = {
+    pending: 'warning',
+    incomplete: 'info',
+    resolved: 'positive',
+    canceled: 'negative',
+};
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+
+const developmentColumns = ref([
+    {
+        name: 'accountReason',
+        label: 'account.summary.reason',
+        field: (row) => row.accountReason.description,
+        sortable: true,
+    },
+    {
+        name: 'accountResult',
+        label: 'account.summary.result',
+        field: (row) => row.accountResult.description,
+        sortable: true,
+    },
+    {
+        name: 'accountResponsible',
+        label: 'account.summary.responsible',
+        field: (row) => row.accountResponsible.description,
+        sortable: true,
+    },
+    {
+        name: 'worker',
+        label: 'account.summary.worker',
+        field: (row) => row.worker?.user.nickname,
+        sortable: true,
+    },
+    {
+        name: 'accountRedelivery',
+        label: 'account.summary.redelivery',
+        field: (row) => row.accountRedelivery.description,
+        sortable: true,
+    },
+]);
+const accountDms = ref([]);
+const multimediaDialog = ref();
+const multimediaSlide = ref();
+
+async function getAccountDms() {
+    accountDmsFilter.value.where = { accountFk: entityId.value };
+    await accountDmsRef.value.fetch();
+}
+
+function setAccountDms(data) {
+    accountDms.value = [];
+    data.forEach((media) => {
+        accountDms.value.push({
+            isVideo: media.dms.contentType == 'video/mp4',
+            url: `/api/Accounts/${media.dmsFk}/downloadFile?access_token=${token}`,
+            dmsFk: media.dmsFk,
+        });
+    });
+}
+
+function openDialog(dmsId) {
+    multimediaSlide.value = dmsId;
+    multimediaDialog.value = true;
+}
+async function changeState(value) {
+    await axios.patch(`Accounts/updateAccount/${entityId.value}`, {
+        accountStateFk: value,
+    });
+    router.go(route.fullPath);
+}
+</script>
+
+<template>
+    <FetchData
+        url="AccountDms"
+        :filter="accountDmsFilter"
+        @on-fetch="(data) => setAccountDms(data)"
+        ref="accountDmsRef"
+    />
+    <FetchData
+        url="AccountStates"
+        @on-fetch="(data) => (AccountStates = data)"
+        auto-load
+    />
+    <CardSummary
+        ref="summary"
+        :url="`Accounts/${entityId}/getSummary`"
+        :entity-id="entityId"
+        @on-fetch="getAccountDms"
+    >
+        <template #header="{ entity: { account } }">
+            {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
+        </template>
+        <template #header-right>
+            <QBtnDropdown
+                side
+                top
+                color="black"
+                text-color="white"
+                :label="t('ticket.summary.changeState')"
+            >
+                <QList>
+                    <QVirtualScroll
+                        style="max-height: 300px"
+                        :items="AccountStates"
+                        separator
+                        v-slot="{ item, index }"
+                    >
+                        <QItem
+                            :key="index"
+                            dense
+                            clickable
+                            v-close-popup
+                            @click="changeState(item.id)"
+                        >
+                            <QItemSection>
+                                <QItemLabel>{{ item.description }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QVirtualScroll>
+                </QList>
+            </QBtnDropdown>
+        </template>
+        <template #body="{ entity: { account, salesAccounted, developments } }">
+            <QCard class="vn-one">
+                <VnTitle
+                    :url="`#/account/${entityId}/basic-data`"
+                    :text="t('account.pageTitles.basicData')"
+                />
+                <VnLv
+                    :label="t('account.summary.created')"
+                    :value="toDate(account.created)"
+                />
+                <VnLv :label="t('account.summary.state')">
+                    <template #value>
+                        <QChip :color="stateColor(account.accountState.code)" dense>
+                            {{ account.accountState.description }}
+                        </QChip>
+                    </template>
+                </VnLv>
+                <VnLv :label="t('globals.salesPerson')">
+                    <template #value>
+                        <VnUserLink
+                            :name="account.client?.salesPersonUser?.name"
+                            :worker-id="account.client?.salesPersonFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('account.summary.attendedBy')">
+                    <template #value>
+                        <VnUserLink
+                            :name="account.worker?.user?.nickname"
+                            :worker-id="account.workerFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('account.summary.customer')">
+                    <template #value>
+                        <span class="link cursor-pointer">
+                            {{ account.client?.name }}
+                        </span>
+                    </template>
+                </VnLv>
+                <VnLv
+                    :label="t('account.basicData.pickup')"
+                    :value="`${dashIfEmpty(account.pickup)}`"
+                />
+            </QCard>
+            <QCard class="vn-three">
+                <VnTitle
+                    :url="`#/account/${entityId}/notes`"
+                    :text="t('account.summary.notes')"
+                />
+            </QCard>
+            <QCard class="vn-two" v-if="salesAccounted.length > 0">
+                <VnTitle
+                    :url="`#/account/${entityId}/lines`"
+                    :text="t('account.summary.details')"
+                />
+                <QTable
+                    :columns="detailsColumns"
+                    :rows="salesAccounted"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                <span v-if="col.name != 'description'">{{
+                                    t(col.value)
+                                }}</span>
+                                <QBtn
+                                    v-if="col.name == 'description'"
+                                    flat
+                                    color="blue"
+                                    >{{ col.value }}</QBtn
+                                >
+
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard class="vn-two" v-if="accountDms.length > 0">
+                <VnTitle
+                    :url="`#/account/${entityId}/photos`"
+                    :text="t('account.summary.photos')"
+                />
+                <div class="container">
+                    <div
+                        class="multimedia-container"
+                        v-for="(media, index) of accountDms"
+                        :key="index"
+                    >
+                        <div class="relative-position">
+                            <QIcon
+                                name="play_circle"
+                                color="primary"
+                                size="xl"
+                                class="absolute-center zindex"
+                                v-if="media.isVideo"
+                                @click.stop="openDialog(media.dmsFk)"
+                            >
+                                <QTooltip>Video</QTooltip>
+                            </QIcon>
+                            <QCard class="multimedia relative-position">
+                                <QImg
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    @click="openDialog(media.dmsFk)"
+                                    v-if="!media.isVideo"
+                                >
+                                </QImg>
+                                <video
+                                    :src="media.url"
+                                    class="rounded-borders cursor-pointer fit"
+                                    muted="muted"
+                                    v-if="media.isVideo"
+                                    @click="openDialog(media.dmsFk)"
+                                />
+                            </QCard>
+                        </div>
+                    </div>
+                </div>
+            </QCard>
+            <QCard class="vn-two" v-if="developments.length > 0">
+                <VnTitle
+                    :url="accountUrl + 'development'"
+                    :text="t('account.summary.development')"
+                />
+                <QTable
+                    :columns="developmentColumns"
+                    :rows="developments"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard class="vn-max">
+                <VnTitle
+                    :url="accountUrl + 'action'"
+                    :text="t('account.summary.actions')"
+                />
+                <div id="slider-container" class="q-px-xl q-py-md">
+                    <QSlider
+                        v-model="account.responsibility"
+                        label
+                        :label-value="t('account.summary.responsibility')"
+                        label-always
+                        color="var()"
+                        markers
+                        :marker-labels="[
+                            { value: 1, label: t('account.summary.company') },
+                            { value: 5, label: t('account.summary.person') },
+                        ]"
+                        :min="1"
+                        :max="5"
+                        readonly
+                    />
+                </div>
+            </QCard>
+            <QDialog
+                v-model="multimediaDialog"
+                transition-show="slide-up"
+                transition-hide="slide-down"
+            >
+                <QToolbar class="absolute zindex close-button">
+                    <QSpace />
+                    <QBtn icon="close" color="primary" round dense v-close-popup />
+                </QToolbar>
+                <QCarousel
+                    swipeable
+                    animated
+                    v-model="multimediaSlide"
+                    arrows
+                    class="fit"
+                >
+                    <QCarouselSlide
+                        v-for="media of accountDms"
+                        :key="media.dmsFk"
+                        :name="media.dmsFk"
+                    >
+                        <QImg
+                            :src="media.url"
+                            class="fit"
+                            fit="scale-down"
+                            v-if="!media.isVideo"
+                        />
+                        <video
+                            class="q-ma-none fit"
+                            v-if="media.isVideo"
+                            controls
+                            muted
+                            autoplay
+                        >
+                            <source :src="media.url" type="video/mp4" />
+                        </video>
+                    </QCarouselSlide>
+                </QCarousel>
+            </QDialog>
+        </template>
+    </CardSummary>
+</template>
+
+<style lang="scss" scoped>
+.q-dialog__inner--minimized > div {
+    max-width: 80%;
+}
+.container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+.multimedia-container {
+    flex: 1 0 21%;
+}
+.multimedia {
+    transition: all 0.5s;
+    opacity: 1;
+    height: 250px;
+
+    .q-img {
+        object-fit: cover;
+        background-color: black;
+    }
+    video {
+        object-fit: cover;
+        background-color: black;
+    }
+}
+
+.multimedia:hover {
+    opacity: 0.5;
+}
+
+.close-button {
+    top: 1%;
+    right: 10%;
+}
+
+.zindex {
+    z-index: 1;
+}
+
+.change-state {
+    width: 10%;
+}
+</style>
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 83abceda9..725de4ac7 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -51,7 +51,8 @@ export default {
                         title: 'roles',
                         icon: 'group',
                     },
-                    component: () => import('src/pages/Account/AccountRoles.vue'),
+                    component: () =>
+                        import('src/pages/Account/AccountRole/AccountRoles.vue'),
                 },
                 {
                     path: 'alias',

From f83685728894534ae9317451c6ed58cb65196f5a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 17:16:41 +0200
Subject: [PATCH 09/25] feat: remove unnused content

---
 src/pages/Account/AccountConnections.vue | 104 +----------------------
 src/pages/Account/AccountLdap.vue        | 104 +----------------------
 src/pages/Account/AccountSamba.vue       | 104 +----------------------
 3 files changed, 3 insertions(+), 309 deletions(-)

diff --git a/src/pages/Account/AccountConnections.vue b/src/pages/Account/AccountConnections.vue
index 2b94a88da..3b72f723c 100644
--- a/src/pages/Account/AccountConnections.vue
+++ b/src/pages/Account/AccountConnections.vue
@@ -1,113 +1,11 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from './AccountFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import AccountSummary from './Card/AccountSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
-};
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-function navigate(event, id) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-}
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.clientName"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
-                                    >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
+        <div class="vn-card-list"></div>
     </QPage>
 </template>
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
index 2b94a88da..3b72f723c 100644
--- a/src/pages/Account/AccountLdap.vue
+++ b/src/pages/Account/AccountLdap.vue
@@ -1,113 +1,11 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from './AccountFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import AccountSummary from './Card/AccountSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
-};
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-function navigate(event, id) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-}
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.clientName"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
-                                    >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
+        <div class="vn-card-list"></div>
     </QPage>
 </template>
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
index 2b94a88da..3b72f723c 100644
--- a/src/pages/Account/AccountSamba.vue
+++ b/src/pages/Account/AccountSamba.vue
@@ -1,113 +1,11 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from './AccountFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import AccountSummary from './Card/AccountSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
-};
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-function navigate(event, id) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-}
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.clientName"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
-                                    >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
+        <div class="vn-card-list"></div>
     </QPage>
 </template>

From 2cb402d3d40ecc743cd1802bf96d47c415df33ca Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 17:30:04 +0200
Subject: [PATCH 10/25] feat: AccountList

---
 src/pages/Account/AccountList.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 3d5abaa49..933f62b6c 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -16,6 +16,10 @@ const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const filter = {
+    fields: ['id', 'nickname', 'name', 'role'],
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};
 
 const STATE_COLOR = {
     pending: 'warning',
@@ -62,15 +66,15 @@ function navigate(event, id) {
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
+            <!-- <AccountFilter data-key="AccountList" /> -->
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
+                :filter="filter"
                 data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
+                url="VnUsers/preview"
                 auto-load
             >
                 <template #body="{ rows }">

From c045b0d1f415617937430140ca53e76babc72b99 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 17:47:34 +0200
Subject: [PATCH 11/25] feat accountRoutes

---
 src/pages/Account/Card/AccountDescriptor.vue  |  67 +---
 .../Account/Card/AccountInheritedRoles.vue    | 256 +++++++++++++++
 src/pages/Account/Card/AccountMailAlias.vue   | 256 +++++++++++++++
 src/pages/Account/Card/AccountSummary.vue     | 306 ++----------------
 src/pages/Account/locale/en.yml               |   4 +
 src/pages/Account/locale/es.yml               |   5 +
 src/router/modules/account.js                 |  36 ++-
 7 files changed, 573 insertions(+), 357 deletions(-)
 create mode 100644 src/pages/Account/Card/AccountInheritedRoles.vue
 create mode 100644 src/pages/Account/Card/AccountMailAlias.vue

diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index 3850ef210..b19c1f619 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -25,78 +25,19 @@ const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
 const filter = {
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                include: [
-                    { relation: 'salesPersonUser' },
-                    {
-                        relation: 'accountsRatio',
-                        scope: {
-                            fields: ['accountingRate'],
-                            limit: 1,
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'accountState',
-        },
-        {
-            relation: 'ticket',
-            scope: {
-                include: [
-                    { relation: 'zone' },
-                    {
-                        relation: 'address',
-                        scope: {
-                            include: { relation: 'province' },
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'worker',
-            scope: {
-                include: { relation: 'user' },
-            },
-        },
-    ],
+    where: { id: entityId },
+    fields: ['id', 'nickname', 'name', 'role'],
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
-
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-const data = ref(useCardDescription());
-const setData = (entity) => {
-    if (!entity) return;
-    data.value = useCardDescription(entity.client.name, entity.id);
-    state.set('AccountDescriptor', entity);
-};
-onMounted(async () => {
-    salixUrl.value = await getUrl('');
-});
 </script>
 
 <template>
     <CardDescriptor
         ref="descriptor"
-        :url="`Accounts/${entityId}`"
+        :url="`VnUsers/preview`"
         :filter="filter"
         module="Account"
-        :title="data.title"
-        :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="accountData"
     >
diff --git a/src/pages/Account/Card/AccountInheritedRoles.vue b/src/pages/Account/Card/AccountInheritedRoles.vue
new file mode 100644
index 000000000..d8a43c623
--- /dev/null
+++ b/src/pages/Account/Card/AccountInheritedRoles.vue
@@ -0,0 +1,256 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import CrudModel from 'components/CrudModel.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import { tMobile } from 'composables/tMobile';
+
+const route = useRoute();
+
+const { t } = useI18n();
+
+const accountDevelopmentForm = ref();
+const accountReasons = ref([]);
+const accountResults = ref([]);
+const accountResponsibles = ref([]);
+const accountRedeliveries = ref([]);
+const workers = ref([]);
+const selected = ref([]);
+const saveButtonRef = ref();
+
+const developmentsFilter = {
+    fields: [
+        'id',
+        'accountFk',
+        'accountReasonFk',
+        'accountResultFk',
+        'accountResponsibleFk',
+        'workerFk',
+        'accountRedeliveryFk',
+    ],
+    where: {
+        accountFk: route.params.id,
+    },
+};
+
+const columns = computed(() => [
+    {
+        name: 'accountReason',
+        label: t('Reason'),
+        field: (row) => row.accountReasonFk,
+        sortable: true,
+        options: accountReasons.value,
+        required: true,
+        model: 'accountReasonFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'accountResult',
+        label: t('Result'),
+        field: (row) => row.accountResultFk,
+        sortable: true,
+        options: accountResults.value,
+        required: true,
+        model: 'accountResultFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'accountResponsible',
+        label: t('Responsible'),
+        field: (row) => row.accountResponsibleFk,
+        sortable: true,
+        options: accountResponsibles.value,
+        required: true,
+        model: 'accountResponsibleFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 3,
+        align: 'left',
+    },
+    {
+        name: 'worker',
+        label: t('Worker'),
+        field: (row) => row.workerFk,
+        sortable: true,
+        options: workers.value,
+        model: 'workerFk',
+        optionValue: 'id',
+        optionLabel: 'nickname',
+        tabIndex: 4,
+        align: 'left',
+    },
+    {
+        name: 'accountRedelivery',
+        label: t('Redelivery'),
+        field: (row) => row.accountRedeliveryFk,
+        sortable: true,
+        options: accountRedeliveries.value,
+        required: true,
+        model: 'accountRedeliveryFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 5,
+        align: 'left',
+    },
+]);
+</script>
+<template>
+    <FetchData
+        url="AccountReasons"
+        order="description"
+        @on-fetch="(data) => (accountReasons = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountResults"
+        order="description"
+        @on-fetch="(data) => (accountResults = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountResponsibles"
+        order="description"
+        @on-fetch="(data) => (accountResponsibles = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountRedeliveries"
+        order="description"
+        @on-fetch="(data) => (accountRedeliveries = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        :where="{ active: 1 }"
+        order="name ASC"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <CrudModel
+        data-key="AccountDevelopments"
+        url="AccountDevelopments"
+        model="accountDevelopment"
+        :filter="developmentsFilter"
+        ref="accountDevelopmentForm"
+        :data-required="{ accountFk: route.params.id }"
+        v-model:selected="selected"
+        auto-load
+        @save-changes="$router.push(`/account/${route.params.id}/action`)"
+        :default-save="false"
+    >
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                :grid="$q.screen.lt.md"
+                table-header-class="text-left"
+            >
+                <template #body-cell="{ row, col }">
+                    <QTd
+                        auto-width
+                        @keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
+                    >
+                        <VnSelect
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                            hide-selected
+                        >
+                            <template #option="scope" v-if="col.name == 'worker'">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            {{ scope.opt?.nickname }}
+                                            {{ scope.opt?.code }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard
+                            bordered
+                            flat
+                            @keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
+                        >
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList dense>
+                                <QItem v-for="col in props.cols" :key="col.name">
+                                    <QItemSection>
+                                        <VnSelect
+                                            :label="col.label"
+                                            v-model="props.row[col.model]"
+                                            :options="col.options"
+                                            :option-value="col.optionValue"
+                                            :option-label="col.optionLabel"
+                                            dense
+                                            input-debounce="0"
+                                            :autofocus="col.tabIndex == 1"
+                                            hide-selected
+                                        />
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+        <template #moreAfterActions>
+            <QBtn
+                :label="tMobile('globals.save')"
+                ref="saveButtonRef"
+                color="primary"
+                icon="save"
+                :disable="!accountDevelopmentForm?.hasChanges"
+                @click="accountDevelopmentForm?.onSubmit"
+                :title="t('globals.save')"
+            />
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            fab
+            color="primary"
+            icon="add"
+            @keydown.tab.prevent="saveButtonRef.$el.focus()"
+            @click="accountDevelopmentForm.insert()"
+        />
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+es:
+    Reason: Motivo
+    Result: Consecuencia
+    Responsible: Responsable
+    Worker: Trabajador
+    Redelivery: Devolución
+</i18n>
diff --git a/src/pages/Account/Card/AccountMailAlias.vue b/src/pages/Account/Card/AccountMailAlias.vue
new file mode 100644
index 000000000..d8a43c623
--- /dev/null
+++ b/src/pages/Account/Card/AccountMailAlias.vue
@@ -0,0 +1,256 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import CrudModel from 'components/CrudModel.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import { tMobile } from 'composables/tMobile';
+
+const route = useRoute();
+
+const { t } = useI18n();
+
+const accountDevelopmentForm = ref();
+const accountReasons = ref([]);
+const accountResults = ref([]);
+const accountResponsibles = ref([]);
+const accountRedeliveries = ref([]);
+const workers = ref([]);
+const selected = ref([]);
+const saveButtonRef = ref();
+
+const developmentsFilter = {
+    fields: [
+        'id',
+        'accountFk',
+        'accountReasonFk',
+        'accountResultFk',
+        'accountResponsibleFk',
+        'workerFk',
+        'accountRedeliveryFk',
+    ],
+    where: {
+        accountFk: route.params.id,
+    },
+};
+
+const columns = computed(() => [
+    {
+        name: 'accountReason',
+        label: t('Reason'),
+        field: (row) => row.accountReasonFk,
+        sortable: true,
+        options: accountReasons.value,
+        required: true,
+        model: 'accountReasonFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 1,
+        align: 'left',
+    },
+    {
+        name: 'accountResult',
+        label: t('Result'),
+        field: (row) => row.accountResultFk,
+        sortable: true,
+        options: accountResults.value,
+        required: true,
+        model: 'accountResultFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 2,
+        align: 'left',
+    },
+    {
+        name: 'accountResponsible',
+        label: t('Responsible'),
+        field: (row) => row.accountResponsibleFk,
+        sortable: true,
+        options: accountResponsibles.value,
+        required: true,
+        model: 'accountResponsibleFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 3,
+        align: 'left',
+    },
+    {
+        name: 'worker',
+        label: t('Worker'),
+        field: (row) => row.workerFk,
+        sortable: true,
+        options: workers.value,
+        model: 'workerFk',
+        optionValue: 'id',
+        optionLabel: 'nickname',
+        tabIndex: 4,
+        align: 'left',
+    },
+    {
+        name: 'accountRedelivery',
+        label: t('Redelivery'),
+        field: (row) => row.accountRedeliveryFk,
+        sortable: true,
+        options: accountRedeliveries.value,
+        required: true,
+        model: 'accountRedeliveryFk',
+        optionValue: 'id',
+        optionLabel: 'description',
+        tabIndex: 5,
+        align: 'left',
+    },
+]);
+</script>
+<template>
+    <FetchData
+        url="AccountReasons"
+        order="description"
+        @on-fetch="(data) => (accountReasons = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountResults"
+        order="description"
+        @on-fetch="(data) => (accountResults = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountResponsibles"
+        order="description"
+        @on-fetch="(data) => (accountResponsibles = data)"
+        auto-load
+    />
+    <FetchData
+        url="AccountRedeliveries"
+        order="description"
+        @on-fetch="(data) => (accountRedeliveries = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        :where="{ active: 1 }"
+        order="name ASC"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <CrudModel
+        data-key="AccountDevelopments"
+        url="AccountDevelopments"
+        model="accountDevelopment"
+        :filter="developmentsFilter"
+        ref="accountDevelopmentForm"
+        :data-required="{ accountFk: route.params.id }"
+        v-model:selected="selected"
+        auto-load
+        @save-changes="$router.push(`/account/${route.params.id}/action`)"
+        :default-save="false"
+    >
+        <template #body="{ rows }">
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                :grid="$q.screen.lt.md"
+                table-header-class="text-left"
+            >
+                <template #body-cell="{ row, col }">
+                    <QTd
+                        auto-width
+                        @keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
+                    >
+                        <VnSelect
+                            v-model="row[col.model]"
+                            :options="col.options"
+                            :option-value="col.optionValue"
+                            :option-label="col.optionLabel"
+                            :autofocus="col.tabIndex == 1"
+                            input-debounce="0"
+                            hide-selected
+                        >
+                            <template #option="scope" v-if="col.name == 'worker'">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            {{ scope.opt?.nickname }}
+                                            {{ scope.opt?.code }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </QTd>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard
+                            bordered
+                            flat
+                            @keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
+                        >
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList dense>
+                                <QItem v-for="col in props.cols" :key="col.name">
+                                    <QItemSection>
+                                        <VnSelect
+                                            :label="col.label"
+                                            v-model="props.row[col.model]"
+                                            :options="col.options"
+                                            :option-value="col.optionValue"
+                                            :option-label="col.optionLabel"
+                                            dense
+                                            input-debounce="0"
+                                            :autofocus="col.tabIndex == 1"
+                                            hide-selected
+                                        />
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+        <template #moreAfterActions>
+            <QBtn
+                :label="tMobile('globals.save')"
+                ref="saveButtonRef"
+                color="primary"
+                icon="save"
+                :disable="!accountDevelopmentForm?.hasChanges"
+                @click="accountDevelopmentForm?.onSubmit"
+                :title="t('globals.save')"
+            />
+        </template>
+    </CrudModel>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn
+            fab
+            color="primary"
+            icon="add"
+            @keydown.tab.prevent="saveButtonRef.$el.focus()"
+            @click="accountDevelopmentForm.insert()"
+        />
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+es:
+    Reason: Motivo
+    Result: Consecuencia
+    Responsible: Responsable
+    Worker: Trabajador
+    Redelivery: Devolución
+</i18n>
diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
index 69f46dde8..bc808f6b0 100644
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -27,22 +27,6 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
-const AccountStates = ref([]);
-const accountUrl = ref();
-const salixUrl = ref();
-const accountDmsRef = ref();
-const accountDmsFilter = ref({
-    include: [
-        {
-            relation: 'dms',
-        },
-    ],
-});
-
-onMounted(async () => {
-    salixUrl.value = await getUrl('');
-    accountUrl.value = salixUrl.value + `account/${entityId.value}/`;
-});
 
 const detailsColumns = ref([
     {
@@ -97,16 +81,6 @@ const detailsColumns = ref([
     },
 ]);
 
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-
 const developmentColumns = ref([
     {
         name: 'accountReason',
@@ -139,115 +113,43 @@ const developmentColumns = ref([
         sortable: true,
     },
 ]);
-const accountDms = ref([]);
-const multimediaDialog = ref();
-const multimediaSlide = ref();
 
-async function getAccountDms() {
-    accountDmsFilter.value.where = { accountFk: entityId.value };
-    await accountDmsRef.value.fetch();
-}
-
-function setAccountDms(data) {
-    accountDms.value = [];
-    data.forEach((media) => {
-        accountDms.value.push({
-            isVideo: media.dms.contentType == 'video/mp4',
-            url: `/api/Accounts/${media.dmsFk}/downloadFile?access_token=${token}`,
-            dmsFk: media.dmsFk,
-        });
-    });
-}
-
-function openDialog(dmsId) {
-    multimediaSlide.value = dmsId;
-    multimediaDialog.value = true;
-}
-async function changeState(value) {
-    await axios.patch(`Accounts/updateAccount/${entityId.value}`, {
-        accountStateFk: value,
-    });
-    router.go(route.fullPath);
-}
+const filter = {
+    where: { id: entityId },
+    fields: ['id', 'nickname', 'name', 'role'],
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};
 </script>
 
 <template>
-    <FetchData
-        url="AccountDms"
-        :filter="accountDmsFilter"
-        @on-fetch="(data) => setAccountDms(data)"
-        ref="accountDmsRef"
-    />
-    <FetchData
-        url="AccountStates"
-        @on-fetch="(data) => (AccountStates = data)"
-        auto-load
-    />
-    <CardSummary
-        ref="summary"
-        :url="`Accounts/${entityId}/getSummary`"
-        :entity-id="entityId"
-        @on-fetch="getAccountDms"
-    >
-        <template #header="{ entity: { account } }">
+    <CardSummary ref="summary" :url="`VnUsers/preview`" :filter="filter">
+        <!-- <template #header="{ entity: { account } }">
             {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
-        </template>
-        <template #header-right>
-            <QBtnDropdown
-                side
-                top
-                color="black"
-                text-color="white"
-                :label="t('ticket.summary.changeState')"
-            >
-                <QList>
-                    <QVirtualScroll
-                        style="max-height: 300px"
-                        :items="AccountStates"
-                        separator
-                        v-slot="{ item, index }"
-                    >
-                        <QItem
-                            :key="index"
-                            dense
-                            clickable
-                            v-close-popup
-                            @click="changeState(item.id)"
-                        >
-                            <QItemSection>
-                                <QItemLabel>{{ item.description }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QVirtualScroll>
-                </QList>
-            </QBtnDropdown>
-        </template>
-        <template #body="{ entity: { account, salesAccounted, developments } }">
+        </template> -->
+        <template #body="{ entity: { account } }">
             <QCard class="vn-one">
-                <VnTitle
-                    :url="`#/account/${entityId}/basic-data`"
-                    :text="t('account.pageTitles.basicData')"
-                />
-                <VnLv
+                {{ account }}
+                <!-- <VnTitle :text="t('account.pageTitles.basicData')" /> -->
+                <!-- <VnLv
                     :label="t('account.summary.created')"
                     :value="toDate(account.created)"
-                />
-                <VnLv :label="t('account.summary.state')">
+                /> -->
+                <!-- <VnLv :label="t('account.summary.state')">
                     <template #value>
                         <QChip :color="stateColor(account.accountState.code)" dense>
                             {{ account.accountState.description }}
                         </QChip>
                     </template>
-                </VnLv>
-                <VnLv :label="t('globals.salesPerson')">
+                </VnLv> -->
+                <!-- <VnLv :label="t('globals.salesPerson')">
                     <template #value>
                         <VnUserLink
                             :name="account.client?.salesPersonUser?.name"
                             :worker-id="account.client?.salesPersonFk"
                         />
                     </template>
-                </VnLv>
-                <VnLv :label="t('account.summary.attendedBy')">
+                </VnLv> -->
+                <!-- <VnLv :label="t('account.summary.attendedBy')">
                     <template #value>
                         <VnUserLink
                             :name="account.worker?.user?.nickname"
@@ -265,178 +167,8 @@ async function changeState(value) {
                 <VnLv
                     :label="t('account.basicData.pickup')"
                     :value="`${dashIfEmpty(account.pickup)}`"
-                />
+                /> -->
             </QCard>
-            <QCard class="vn-three">
-                <VnTitle
-                    :url="`#/account/${entityId}/notes`"
-                    :text="t('account.summary.notes')"
-                />
-            </QCard>
-            <QCard class="vn-two" v-if="salesAccounted.length > 0">
-                <VnTitle
-                    :url="`#/account/${entityId}/lines`"
-                    :text="t('account.summary.details')"
-                />
-                <QTable
-                    :columns="detailsColumns"
-                    :rows="salesAccounted"
-                    flat
-                    dense
-                    :rows-per-page-options="[0]"
-                    hide-bottom
-                >
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                    <template #body="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                <span v-if="col.name != 'description'">{{
-                                    t(col.value)
-                                }}</span>
-                                <QBtn
-                                    v-if="col.name == 'description'"
-                                    flat
-                                    color="blue"
-                                    >{{ col.value }}</QBtn
-                                >
-
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-two" v-if="accountDms.length > 0">
-                <VnTitle
-                    :url="`#/account/${entityId}/photos`"
-                    :text="t('account.summary.photos')"
-                />
-                <div class="container">
-                    <div
-                        class="multimedia-container"
-                        v-for="(media, index) of accountDms"
-                        :key="index"
-                    >
-                        <div class="relative-position">
-                            <QIcon
-                                name="play_circle"
-                                color="primary"
-                                size="xl"
-                                class="absolute-center zindex"
-                                v-if="media.isVideo"
-                                @click.stop="openDialog(media.dmsFk)"
-                            >
-                                <QTooltip>Video</QTooltip>
-                            </QIcon>
-                            <QCard class="multimedia relative-position">
-                                <QImg
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    @click="openDialog(media.dmsFk)"
-                                    v-if="!media.isVideo"
-                                >
-                                </QImg>
-                                <video
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    muted="muted"
-                                    v-if="media.isVideo"
-                                    @click="openDialog(media.dmsFk)"
-                                />
-                            </QCard>
-                        </div>
-                    </div>
-                </div>
-            </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
-                <VnTitle
-                    :url="accountUrl + 'development'"
-                    :text="t('account.summary.development')"
-                />
-                <QTable
-                    :columns="developmentColumns"
-                    :rows="developments"
-                    flat
-                    dense
-                    :rows-per-page-options="[0]"
-                    hide-bottom
-                >
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-max">
-                <VnTitle
-                    :url="accountUrl + 'action'"
-                    :text="t('account.summary.actions')"
-                />
-                <div id="slider-container" class="q-px-xl q-py-md">
-                    <QSlider
-                        v-model="account.responsibility"
-                        label
-                        :label-value="t('account.summary.responsibility')"
-                        label-always
-                        color="var()"
-                        markers
-                        :marker-labels="[
-                            { value: 1, label: t('account.summary.company') },
-                            { value: 5, label: t('account.summary.person') },
-                        ]"
-                        :min="1"
-                        :max="5"
-                        readonly
-                    />
-                </div>
-            </QCard>
-            <QDialog
-                v-model="multimediaDialog"
-                transition-show="slide-up"
-                transition-hide="slide-down"
-            >
-                <QToolbar class="absolute zindex close-button">
-                    <QSpace />
-                    <QBtn icon="close" color="primary" round dense v-close-popup />
-                </QToolbar>
-                <QCarousel
-                    swipeable
-                    animated
-                    v-model="multimediaSlide"
-                    arrows
-                    class="fit"
-                >
-                    <QCarouselSlide
-                        v-for="media of accountDms"
-                        :key="media.dmsFk"
-                        :name="media.dmsFk"
-                    >
-                        <QImg
-                            :src="media.url"
-                            class="fit"
-                            fit="scale-down"
-                            v-if="!media.isVideo"
-                        />
-                        <video
-                            class="q-ma-none fit"
-                            v-if="media.isVideo"
-                            controls
-                            muted
-                            autoplay
-                        >
-                            <source :src="media.url" type="video/mp4" />
-                        </video>
-                    </QCarouselSlide>
-                </QCarousel>
-            </QDialog>
         </template>
     </CardSummary>
 </template>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 09eb2447c..96eb76bac 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -9,4 +9,8 @@ account:
         samba: Samba
         acls: ACLs
         connections: Connections
+        inheritedRoles: Inherited Roles
+        privileges: Privileges
+        mailAlias: Mail Alias
+        mailForwarding: Mail Forwarding
     search: Search user
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index f5a3eb977..42640d08e 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -9,4 +9,9 @@ account:
         samba: Samba
         acls: ACLs
         connections: Conexiones
+        inheritedRoles: Roles heredados
+        privileges: Privilegios
+        mailAlias: Alias de correo
+        mailForwarding: Reenvío de correo
+
     search: Buscar usuario
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 725de4ac7..d39226884 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -22,7 +22,9 @@ export default {
         ],
         card: [
             'AccountBasicData',
+            'AccountInheritedRoles',
             'AccountMailForwarding',
+            'AccountMailAlias',
             'AccountPrivileges',
             'AccountLog',
         ],
@@ -146,21 +148,41 @@ export default {
                         import('src/pages/Account/Card/AccountBasicData.vue'),
                 },
                 {
-                    name: 'AccountMailForwarding',
-                    path: 'mailForwarding',
+                    name: 'AccountInheritedRoles',
+                    path: 'inherited-oles',
                     meta: {
-                        title: 'pda',
-                        icon: 'phone_android',
+                        title: 'inheritedRoles',
+                        icon: 'group',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Card/AccountInheritedRoles.vue'),
+                },
+                {
+                    name: 'AccountMailForwarding',
+                    path: 'mail-forwarding',
+                    meta: {
+                        title: 'mailForwarding',
+                        icon: 'forward',
                     },
                     component: () =>
                         import('src/pages/Account/Card/AccountMailForwarding.vue'),
                 },
+                {
+                    name: 'AccountMailAlias',
+                    path: 'mail-alias',
+                    meta: {
+                        title: 'mailAlias',
+                        icon: 'email',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Card/AccountMailAlias.vue'),
+                },
                 {
                     name: 'AccountPrivileges',
                     path: 'privileges',
                     meta: {
-                        title: 'notifications',
-                        icon: 'notifications',
+                        title: 'privileges',
+                        icon: 'badge',
                     },
                     component: () =>
                         import('src/pages/Account/Card/AccountPrivileges.vue'),
@@ -170,7 +192,7 @@ export default {
                     path: 'log',
                     meta: {
                         title: 'log',
-                        icon: 'vn:log',
+                        icon: 'history',
                     },
                     component: () => import('src/pages/Account/Card/AccountLog.vue'),
                 },

From 555b5a663c46d1fbbaa5ff133455ae9d8debe3fc Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 18:06:40 +0200
Subject: [PATCH 12/25] feat: role router

---
 src/pages/Account/Role/AccountRoles.vue  | 14 ++-----
 src/pages/Account/Role/Card/RoleCard.vue | 15 ++++++++
 src/router/modules/account.js            |  6 +--
 src/router/modules/index.js              |  2 +
 src/router/modules/role.js               | 47 ++++++++++++++++++++++++
 src/router/modules/worker.js             |  1 -
 src/router/routes.js                     |  2 +
 7 files changed, 71 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/Account/Role/Card/RoleCard.vue
 create mode 100644 src/router/modules/role.js

diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 910a6f124..fe184688b 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -4,7 +4,6 @@ import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from '../AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
@@ -14,8 +13,6 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-
 const STATE_COLOR = {
     pending: 'warning',
     managed: 'info',
@@ -30,24 +27,19 @@ function stateColor(code) {
 function navigate(event, id) {
     if (event.ctrlKey || event.metaKey)
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
+    router.push({ path: `/account/role/${id}` });
 }
 </script>
 
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
+            <!-- <AccountFilter data-key="RolesList" /> -->
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
-            <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
-                auto-load
-            >
+            <VnPaginate data-key="RolesList" url="VnRoles" auto-load>
                 <template #body="{ rows }">
                     <CardList
                         :id="row.id"
diff --git a/src/pages/Account/Role/Card/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue
new file mode 100644
index 000000000..7d9f97c22
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleCard.vue
@@ -0,0 +1,15 @@
+<script setup>
+import VnCard from 'components/common/VnCard.vue';
+import RoleDescriptor from './RoleDescriptor.vue';
+</script>
+<template>
+    <VnCard
+        data-key="Role"
+        base-url="Roles"
+        :descriptor="RoleDescriptor"
+        searchbar-data-key="RoleList"
+        searchbar-url="Roles/filter"
+        searchbar-label="Search Role"
+        searchbar-info="You can search by Role id or customer name"
+    />
+</template>
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index d39226884..0f38d8a40 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -28,7 +28,6 @@ export default {
             'AccountPrivileges',
             'AccountLog',
         ],
-        departmentCard: ['BasicData'],
     },
     children: [
         {
@@ -47,14 +46,13 @@ export default {
                     component: () => import('src/pages/Account/AccountList.vue'),
                 },
                 {
-                    path: 'roles',
+                    path: 'role',
                     name: 'AccountRoles',
                     meta: {
                         title: 'roles',
                         icon: 'group',
                     },
-                    component: () =>
-                        import('src/pages/Account/AccountRole/AccountRoles.vue'),
+                    component: () => import('src/pages/Account/Role/AccountRoles.vue'),
                 },
                 {
                     path: 'alias',
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 5c2d44f58..4c5e247d8 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -12,6 +12,7 @@ import Supplier from './Supplier';
 import Travel from './travel';
 import Order from './order';
 import Department from './department';
+import Role from './role';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
@@ -35,6 +36,7 @@ export default [
     Order,
     invoiceIn,
     Department,
+    Role,
     Entry,
     roadmap,
     Parking,
diff --git a/src/router/modules/role.js b/src/router/modules/role.js
new file mode 100644
index 000000000..447f2ee80
--- /dev/null
+++ b/src/router/modules/role.js
@@ -0,0 +1,47 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/role',
+    name: 'Role',
+    meta: {
+        title: 'role',
+        icon: 'vn:greuge',
+        moduleName: 'Role',
+    },
+    component: RouterView,
+    redirect: { name: 'RoleCard' },
+    menus: {
+        main: [],
+        card: ['RoleBasicData'],
+    },
+    children: [
+        {
+            name: 'RoleCard',
+            path: ':id',
+            component: () => import('src/pages/Account/Role/Card/RoleCard.vue'),
+            redirect: { name: 'RoleSummary' },
+            children: [
+                {
+                    name: 'RoleSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Role/Card/RoleSummary.vue'),
+                },
+                {
+                    name: 'RoleBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Role/Card/RoleBasicData.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index d4d3bc3e7..5fef90c3c 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -23,7 +23,6 @@ export default {
             'WorkerDms',
             'WorkerTimeControl',
         ],
-        departmentCard: ['BasicData'],
     },
     children: [
         {
diff --git a/src/router/routes.js b/src/router/routes.js
index 46b7293d4..9fe470ca4 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -10,6 +10,7 @@ import supplier from './modules/Supplier';
 import route from './modules/route';
 import travel from './modules/travel';
 import department from './modules/department';
+import role from './modules/role';
 import ItemType from './modules/itemType';
 import shelving from 'src/router/modules/shelving';
 import order from 'src/router/modules/order';
@@ -72,6 +73,7 @@ const routes = [
             supplier,
             travel,
             department,
+            role,
             roadmap,
             entry,
             parking,

From f9e77596e440a0bad321afc91f3e74d0e248f154 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 22:01:57 +0200
Subject: [PATCH 13/25] feat: roles sections

---
 src/pages/Account/Role/AccountRoles.vue       |   2 +-
 .../Account/Role/Card/InheritedRoles.vue      |   6 +
 .../Account/Role/Card/RoleDescriptor.vue      | 151 ++++++++
 src/pages/Account/Role/Card/RoleLog.vue       |   6 +
 src/pages/Account/Role/Card/RoleSummary.vue   | 353 +-----------------
 src/pages/Account/Role/Card/SubRoles.vue      |   6 +
 src/router/modules/account.js                 |  35 ++
 src/router/modules/role.js                    |  33 +-
 8 files changed, 242 insertions(+), 350 deletions(-)
 create mode 100644 src/pages/Account/Role/Card/InheritedRoles.vue
 create mode 100644 src/pages/Account/Role/Card/RoleDescriptor.vue
 create mode 100644 src/pages/Account/Role/Card/RoleLog.vue
 create mode 100644 src/pages/Account/Role/Card/SubRoles.vue

diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index fe184688b..8e52b2196 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -27,7 +27,7 @@ function stateColor(code) {
 function navigate(event, id) {
     if (event.ctrlKey || event.metaKey)
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/role/${id}` });
+    router.push({ path: `/role/${id}/summary` });
 }
 </script>
 
diff --git a/src/pages/Account/Role/Card/InheritedRoles.vue b/src/pages/Account/Role/Card/InheritedRoles.vue
new file mode 100644
index 000000000..cfcf224c7
--- /dev/null
+++ b/src/pages/Account/Role/Card/InheritedRoles.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Account"></VnLog>
+</template>
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
new file mode 100644
index 000000000..b19c1f619
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate, toPercentage } from 'src/filters';
+import { useState } from 'src/composables/useState';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import { getUrl } from 'src/composables/getUrl';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const state = useState();
+const { t } = useI18n();
+const salixUrl = ref();
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+const filter = {
+    where: { id: entityId },
+    fields: ['id', 'nickname', 'name', 'role'],
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};
+</script>
+
+<template>
+    <CardDescriptor
+        ref="descriptor"
+        :url="`VnUsers/preview`"
+        :filter="filter"
+        module="Account"
+        @on-fetch="setData"
+        data-key="accountData"
+    >
+        <template #menu="{ entity }">
+            {{ entity }}
+        </template>
+        <template #body="{ entity }">
+            <VnLv v-if="entity.accountState" :label="t('account.card.state')">
+                <template #value>
+                    <QBadge
+                        :color="stateColor(entity.accountState.code)"
+                        text-color="black"
+                        dense
+                    >
+                        {{ entity.accountState.description }}
+                    </QBadge>
+                </template>
+            </VnLv>
+            <VnLv :label="t('account.card.created')" :value="toDate(entity.created)" />
+            <VnLv :label="t('account.card.commercial')">
+                <template #value>
+                    <VnUserLink
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
+                    />
+                </template>
+            </VnLv>
+            <VnLv
+                v-if="entity.worker"
+                :label="t('account.card.attendedBy')"
+                :value="entity.worker.user.name"
+            >
+                <template #value>
+                    <VnUserLink
+                        :name="entity.worker.user.nickname"
+                        :worker-id="entity.worker.id"
+                    />
+                </template>
+            </VnLv>
+            <VnLv :label="t('account.card.zone')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.ticket?.zone?.name }}
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv
+                :label="t('account.card.province')"
+                :value="entity.ticket?.address?.province?.name"
+            />
+            <VnLv :label="t('account.card.ticketId')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.ticketFk }}
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv
+                :label="t('accountRate')"
+                :value="toPercentage(entity.client?.accountsRatio?.accountingRate)"
+            />
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    size="md"
+                    icon="vn:client"
+                    color="primary"
+                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
+                >
+                    <QTooltip>{{ t('account.card.customerSummary') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
+                >
+                    <QTooltip>{{ t('account.card.accountedTicket') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="assignment"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
+                >
+                    <QTooltip>{{ t('account.card.saleTracking') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="visibility"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
+                >
+                    <QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+<style scoped>
+.q-item__label {
+    margin-top: 0;
+}
+</style>
+<i18n>
+    en:
+        accountRate: Claming rate
+    es:
+        accountRate: Ratio de reclamación
+</i18n>
diff --git a/src/pages/Account/Role/Card/RoleLog.vue b/src/pages/Account/Role/Card/RoleLog.vue
new file mode 100644
index 000000000..cfcf224c7
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Account"></VnLog>
+</template>
diff --git a/src/pages/Account/Role/Card/RoleSummary.vue b/src/pages/Account/Role/Card/RoleSummary.vue
index 69f46dde8..3f8ea701b 100644
--- a/src/pages/Account/Role/Card/RoleSummary.vue
+++ b/src/pages/Account/Role/Card/RoleSummary.vue
@@ -27,22 +27,8 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
-const AccountStates = ref([]);
-const accountUrl = ref();
-const salixUrl = ref();
-const accountDmsRef = ref();
-const accountDmsFilter = ref({
-    include: [
-        {
-            relation: 'dms',
-        },
-    ],
-});
 
-onMounted(async () => {
-    salixUrl.value = await getUrl('');
-    accountUrl.value = salixUrl.value + `account/${entityId.value}/`;
-});
+onMounted(async () => {});
 
 const detailsColumns = ref([
     {
@@ -96,347 +82,20 @@ const detailsColumns = ref([
         sortable: true,
     },
 ]);
-
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-
-const developmentColumns = ref([
-    {
-        name: 'accountReason',
-        label: 'account.summary.reason',
-        field: (row) => row.accountReason.description,
-        sortable: true,
-    },
-    {
-        name: 'accountResult',
-        label: 'account.summary.result',
-        field: (row) => row.accountResult.description,
-        sortable: true,
-    },
-    {
-        name: 'accountResponsible',
-        label: 'account.summary.responsible',
-        field: (row) => row.accountResponsible.description,
-        sortable: true,
-    },
-    {
-        name: 'worker',
-        label: 'account.summary.worker',
-        field: (row) => row.worker?.user.nickname,
-        sortable: true,
-    },
-    {
-        name: 'accountRedelivery',
-        label: 'account.summary.redelivery',
-        field: (row) => row.accountRedelivery.description,
-        sortable: true,
-    },
-]);
-const accountDms = ref([]);
-const multimediaDialog = ref();
-const multimediaSlide = ref();
-
-async function getAccountDms() {
-    accountDmsFilter.value.where = { accountFk: entityId.value };
-    await accountDmsRef.value.fetch();
-}
-
-function setAccountDms(data) {
-    accountDms.value = [];
-    data.forEach((media) => {
-        accountDms.value.push({
-            isVideo: media.dms.contentType == 'video/mp4',
-            url: `/api/Accounts/${media.dmsFk}/downloadFile?access_token=${token}`,
-            dmsFk: media.dmsFk,
-        });
-    });
-}
-
-function openDialog(dmsId) {
-    multimediaSlide.value = dmsId;
-    multimediaDialog.value = true;
-}
-async function changeState(value) {
-    await axios.patch(`Accounts/updateAccount/${entityId.value}`, {
-        accountStateFk: value,
-    });
-    router.go(route.fullPath);
-}
 </script>
 
 <template>
-    <FetchData
-        url="AccountDms"
-        :filter="accountDmsFilter"
-        @on-fetch="(data) => setAccountDms(data)"
-        ref="accountDmsRef"
-    />
-    <FetchData
-        url="AccountStates"
-        @on-fetch="(data) => (AccountStates = data)"
-        auto-load
-    />
     <CardSummary
         ref="summary"
-        :url="`Accounts/${entityId}/getSummary`"
+        :url="`VnRoles`"
         :entity-id="entityId"
         @on-fetch="getAccountDms"
     >
-        <template #header="{ entity: { account } }">
+        <!-- <template #header="{ entity: { account } }">
             {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
-        </template>
-        <template #header-right>
-            <QBtnDropdown
-                side
-                top
-                color="black"
-                text-color="white"
-                :label="t('ticket.summary.changeState')"
-            >
-                <QList>
-                    <QVirtualScroll
-                        style="max-height: 300px"
-                        :items="AccountStates"
-                        separator
-                        v-slot="{ item, index }"
-                    >
-                        <QItem
-                            :key="index"
-                            dense
-                            clickable
-                            v-close-popup
-                            @click="changeState(item.id)"
-                        >
-                            <QItemSection>
-                                <QItemLabel>{{ item.description }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QVirtualScroll>
-                </QList>
-            </QBtnDropdown>
-        </template>
-        <template #body="{ entity: { account, salesAccounted, developments } }">
-            <QCard class="vn-one">
-                <VnTitle
-                    :url="`#/account/${entityId}/basic-data`"
-                    :text="t('account.pageTitles.basicData')"
-                />
-                <VnLv
-                    :label="t('account.summary.created')"
-                    :value="toDate(account.created)"
-                />
-                <VnLv :label="t('account.summary.state')">
-                    <template #value>
-                        <QChip :color="stateColor(account.accountState.code)" dense>
-                            {{ account.accountState.description }}
-                        </QChip>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('globals.salesPerson')">
-                    <template #value>
-                        <VnUserLink
-                            :name="account.client?.salesPersonUser?.name"
-                            :worker-id="account.client?.salesPersonFk"
-                        />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('account.summary.attendedBy')">
-                    <template #value>
-                        <VnUserLink
-                            :name="account.worker?.user?.nickname"
-                            :worker-id="account.workerFk"
-                        />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('account.summary.customer')">
-                    <template #value>
-                        <span class="link cursor-pointer">
-                            {{ account.client?.name }}
-                        </span>
-                    </template>
-                </VnLv>
-                <VnLv
-                    :label="t('account.basicData.pickup')"
-                    :value="`${dashIfEmpty(account.pickup)}`"
-                />
-            </QCard>
-            <QCard class="vn-three">
-                <VnTitle
-                    :url="`#/account/${entityId}/notes`"
-                    :text="t('account.summary.notes')"
-                />
-            </QCard>
-            <QCard class="vn-two" v-if="salesAccounted.length > 0">
-                <VnTitle
-                    :url="`#/account/${entityId}/lines`"
-                    :text="t('account.summary.details')"
-                />
-                <QTable
-                    :columns="detailsColumns"
-                    :rows="salesAccounted"
-                    flat
-                    dense
-                    :rows-per-page-options="[0]"
-                    hide-bottom
-                >
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                    <template #body="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                <span v-if="col.name != 'description'">{{
-                                    t(col.value)
-                                }}</span>
-                                <QBtn
-                                    v-if="col.name == 'description'"
-                                    flat
-                                    color="blue"
-                                    >{{ col.value }}</QBtn
-                                >
-
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-two" v-if="accountDms.length > 0">
-                <VnTitle
-                    :url="`#/account/${entityId}/photos`"
-                    :text="t('account.summary.photos')"
-                />
-                <div class="container">
-                    <div
-                        class="multimedia-container"
-                        v-for="(media, index) of accountDms"
-                        :key="index"
-                    >
-                        <div class="relative-position">
-                            <QIcon
-                                name="play_circle"
-                                color="primary"
-                                size="xl"
-                                class="absolute-center zindex"
-                                v-if="media.isVideo"
-                                @click.stop="openDialog(media.dmsFk)"
-                            >
-                                <QTooltip>Video</QTooltip>
-                            </QIcon>
-                            <QCard class="multimedia relative-position">
-                                <QImg
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    @click="openDialog(media.dmsFk)"
-                                    v-if="!media.isVideo"
-                                >
-                                </QImg>
-                                <video
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    muted="muted"
-                                    v-if="media.isVideo"
-                                    @click="openDialog(media.dmsFk)"
-                                />
-                            </QCard>
-                        </div>
-                    </div>
-                </div>
-            </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
-                <VnTitle
-                    :url="accountUrl + 'development'"
-                    :text="t('account.summary.development')"
-                />
-                <QTable
-                    :columns="developmentColumns"
-                    :rows="developments"
-                    flat
-                    dense
-                    :rows-per-page-options="[0]"
-                    hide-bottom
-                >
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-max">
-                <VnTitle
-                    :url="accountUrl + 'action'"
-                    :text="t('account.summary.actions')"
-                />
-                <div id="slider-container" class="q-px-xl q-py-md">
-                    <QSlider
-                        v-model="account.responsibility"
-                        label
-                        :label-value="t('account.summary.responsibility')"
-                        label-always
-                        color="var()"
-                        markers
-                        :marker-labels="[
-                            { value: 1, label: t('account.summary.company') },
-                            { value: 5, label: t('account.summary.person') },
-                        ]"
-                        :min="1"
-                        :max="5"
-                        readonly
-                    />
-                </div>
-            </QCard>
-            <QDialog
-                v-model="multimediaDialog"
-                transition-show="slide-up"
-                transition-hide="slide-down"
-            >
-                <QToolbar class="absolute zindex close-button">
-                    <QSpace />
-                    <QBtn icon="close" color="primary" round dense v-close-popup />
-                </QToolbar>
-                <QCarousel
-                    swipeable
-                    animated
-                    v-model="multimediaSlide"
-                    arrows
-                    class="fit"
-                >
-                    <QCarouselSlide
-                        v-for="media of accountDms"
-                        :key="media.dmsFk"
-                        :name="media.dmsFk"
-                    >
-                        <QImg
-                            :src="media.url"
-                            class="fit"
-                            fit="scale-down"
-                            v-if="!media.isVideo"
-                        />
-                        <video
-                            class="q-ma-none fit"
-                            v-if="media.isVideo"
-                            controls
-                            muted
-                            autoplay
-                        >
-                            <source :src="media.url" type="video/mp4" />
-                        </video>
-                    </QCarouselSlide>
-                </QCarousel>
-            </QDialog>
+        </template> -->
+        <template #body="{ entity }">
+            {{ entity }}
         </template>
     </CardSummary>
 </template>
diff --git a/src/pages/Account/Role/Card/SubRoles.vue b/src/pages/Account/Role/Card/SubRoles.vue
new file mode 100644
index 000000000..cfcf224c7
--- /dev/null
+++ b/src/pages/Account/Role/Card/SubRoles.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Account"></VnLog>
+</template>
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 0f38d8a40..a45261158 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -53,6 +53,41 @@ export default {
                         icon: 'group',
                     },
                     component: () => import('src/pages/Account/Role/AccountRoles.vue'),
+                    // children: [
+                    //     {
+                    //         name: 'RoleCard',
+                    //         path: ':id',
+                    //         component: () =>
+                    //             import('src/pages/Account/Role/Card/RoleCard.vue'),
+                    //         redirect: { name: 'RoleSummary' },
+                    //         children: [
+                    //             {
+                    //                 name: 'RoleSummary',
+                    //                 path: 'summary',
+                    //                 meta: {
+                    //                     title: 'summary',
+                    //                     icon: 'launch',
+                    //                 },
+                    //                 component: () =>
+                    //                     import(
+                    //                         'src/pages/Account/Role/Card/RoleSummary.vue'
+                    //                     ),
+                    //             },
+                    //             {
+                    //                 name: 'RoleBasicData',
+                    //                 path: 'basic-data',
+                    //                 meta: {
+                    //                     title: 'basicData',
+                    //                     icon: 'vn:settings',
+                    //                 },
+                    //                 component: () =>
+                    //                     import(
+                    //                         'src/pages/Account/Role/Card/RoleBasicData.vue'
+                    //                     ),
+                    //             },
+                    //         ],
+                    //     },
+                    // ],
                 },
                 {
                     path: 'alias',
diff --git a/src/router/modules/role.js b/src/router/modules/role.js
index 447f2ee80..5d291a024 100644
--- a/src/router/modules/role.js
+++ b/src/router/modules/role.js
@@ -12,12 +12,12 @@ export default {
     redirect: { name: 'RoleCard' },
     menus: {
         main: [],
-        card: ['RoleBasicData'],
+        card: ['RoleBasicData', 'SubRoles', 'InheritedRoles', 'RoleLog'],
     },
     children: [
         {
             name: 'RoleCard',
-            path: ':id',
+            path: '/role/:id',
             component: () => import('src/pages/Account/Role/Card/RoleCard.vue'),
             redirect: { name: 'RoleSummary' },
             children: [
@@ -41,6 +41,35 @@ export default {
                     component: () =>
                         import('src/pages/Account/Role/Card/RoleBasicData.vue'),
                 },
+                {
+                    name: 'SubRoles',
+                    path: 'sub-roles',
+                    meta: {
+                        title: 'subRoles',
+                        icon: 'group',
+                    },
+                    component: () => import('src/pages/Account/Role/Card/SubRoles.vue'),
+                },
+
+                {
+                    name: 'InheritedRoles',
+                    path: 'inherited-roles',
+                    meta: {
+                        title: 'inheritedRoles',
+                        icon: 'account_tree',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Role/Card/InheritedRoles.vue'),
+                },
+                {
+                    name: 'RoleBasicData',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Account/Role/Card/RoleLog.vue'),
+                },
             ],
         },
     ],

From 4609e59cd92844781dd719457f9529a762719a80 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 22:06:40 +0200
Subject: [PATCH 14/25] feat: i18n

---
 src/i18n/locale/en.yml                   | 6 ++++++
 src/pages/Account/Card/AccountLog.vue    | 2 +-
 src/pages/Account/Role/Card/RoleLog.vue  | 2 +-
 src/pages/Account/Role/Card/SubRoles.vue | 2 +-
 src/pages/Account/locale/en.yml          | 5 +++++
 src/pages/Account/locale/es.yml          | 5 +++++
 6 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index ebe9070c4..1375954db 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1240,6 +1240,12 @@ zone:
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
+role:
+    pageTitles:
+        zones: Zones
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
 
 components:
     topbar: {}
diff --git a/src/pages/Account/Card/AccountLog.vue b/src/pages/Account/Card/AccountLog.vue
index cfcf224c7..8f809dd87 100644
--- a/src/pages/Account/Card/AccountLog.vue
+++ b/src/pages/Account/Card/AccountLog.vue
@@ -2,5 +2,5 @@
 import VnLog from 'src/components/common/VnLog.vue';
 </script>
 <template>
-    <VnLog model="Account"></VnLog>
+    <VnLog model="VnUser"></VnLog>
 </template>
diff --git a/src/pages/Account/Role/Card/RoleLog.vue b/src/pages/Account/Role/Card/RoleLog.vue
index cfcf224c7..48f5eb23a 100644
--- a/src/pages/Account/Role/Card/RoleLog.vue
+++ b/src/pages/Account/Role/Card/RoleLog.vue
@@ -2,5 +2,5 @@
 import VnLog from 'src/components/common/VnLog.vue';
 </script>
 <template>
-    <VnLog model="Account"></VnLog>
+    <VnLog model="VnRoles"></VnLog>
 </template>
diff --git a/src/pages/Account/Role/Card/SubRoles.vue b/src/pages/Account/Role/Card/SubRoles.vue
index cfcf224c7..48f5eb23a 100644
--- a/src/pages/Account/Role/Card/SubRoles.vue
+++ b/src/pages/Account/Role/Card/SubRoles.vue
@@ -2,5 +2,5 @@
 import VnLog from 'src/components/common/VnLog.vue';
 </script>
 <template>
-    <VnLog model="Account"></VnLog>
+    <VnLog model="VnRoles"></VnLog>
 </template>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 96eb76bac..d129d52b6 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -10,7 +10,12 @@ account:
         acls: ACLs
         connections: Connections
         inheritedRoles: Inherited Roles
+        subRoles: Sub Roles
         privileges: Privileges
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding
     search: Search user
+role:
+    pageTitles:
+        inheritedRoles: Inherited Roles
+        subRoles: Sub Roles
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 42640d08e..fdfc17024 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -10,8 +10,13 @@ account:
         acls: ACLs
         connections: Conexiones
         inheritedRoles: Roles heredados
+        subRoles: Subroles
         privileges: Privilegios
         mailAlias: Alias de correo
         mailForwarding: Reenvío de correo
 
     search: Buscar usuario
+role:
+    pageTitles:
+        inheritedRoles: Roles heredados
+        subRoles: Subroles

From a2316fb222e87105d4f104b6ca2def5b1d96da3f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 10:35:08 +0200
Subject: [PATCH 15/25] feat: change skeleteon different components

---
 src/i18n/locale/en.yml                   |   3 +-
 src/i18n/locale/es.yml                   |   1 +
 src/pages/Account/AccountAccounts.vue    | 203 +++++++++++------------
 src/pages/Account/AccountAlias.vue       | 148 ++++++-----------
 src/pages/Account/AccountConnections.vue |  66 +++++++-
 src/pages/Account/AccountLdap.vue        | 104 +++++++++++-
 src/pages/Account/AccountSamba.vue       | 104 +++++++++++-
 7 files changed, 428 insertions(+), 201 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index e8d48679b..f736bb0f7 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -100,6 +100,7 @@ globals:
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
+        role: Role
     created: Created
     worker: Worker
     now: Now
@@ -1250,7 +1251,7 @@ zone:
         upcomingList: Upcoming deliveries
 role:
     pageTitles:
-        zones: Zones
+        role: Zones
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 8cc0b0191..5b783a538 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -100,6 +100,7 @@ globals:
         zonesList: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
+        role: Role
     created: Fecha creación
     worker: Trabajador
     now: Ahora
diff --git a/src/pages/Account/AccountAccounts.vue b/src/pages/Account/AccountAccounts.vue
index 2b94a88da..e75eb3bdb 100644
--- a/src/pages/Account/AccountAccounts.vue
+++ b/src/pages/Account/AccountAccounts.vue
@@ -1,113 +1,112 @@
 <script setup>
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
 import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from './AccountFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import AccountSummary from './Card/AccountSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toDate } from 'src/filters';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
 
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
-};
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-function navigate(event, id) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-}
+const newAccountForm = reactive({
+    supplierFk: null,
+    travelFk: null,
+    companyFk: null,
+});
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
-        </QScrollArea>
-    </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.clientName"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
-                                    >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
+    <QPage>
+        <VnSubToolbar />
+        <pre>TODO <b>Cuentas</b></pre>
+
+        <FormModel
+            url-create="Entries"
+            model="account"
+            :form-initial-data="newAccountForm"
+            @on-data-saved="redirectToAccountBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Supplier')"
+                            class="full-width"
+                            v-model="data.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="nickname"
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.supplierFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.id }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Travel')"
+                            class="full-width"
+                            v-model="data.travelFk"
+                            :options="travelsOptions"
+                            option-value="id"
+                            option-label="warehouseInName"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.travelFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.agencyModeName }} -
+                                            {{ scope.opt?.warehouseInName }} ({{
+                                                toDate(scope.opt?.shipped)
+                                            }}) &#x2192;
+                                            {{ scope.opt?.warehouseOutName }} ({{
+                                                toDate(scope.opt?.landed)
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Company')"
+                            class="full-width"
+                            v-model="data.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.companyFk')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
     </QPage>
 </template>
diff --git a/src/pages/Account/AccountAlias.vue b/src/pages/Account/AccountAlias.vue
index 2b94a88da..dd484bc8c 100644
--- a/src/pages/Account/AccountAlias.vue
+++ b/src/pages/Account/AccountAlias.vue
@@ -1,113 +1,75 @@
 <script setup>
+import { onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from './AccountFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import AccountSummary from './Card/AccountSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import VnPaginate from 'components/ui/VnPaginate.vue';
 
-const stateStore = useStateStore();
-const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
+const filter = computed(() => ({
+    fields: ['id', 'created', 'userId'],
+    include: { relation: 'user', scope: { fields: ['username'] } },
+    order: 'created DESC',
+    limit: 20,
+}));
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
 
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
-};
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-function navigate(event, id) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-}
+const urlPath = computed(() => `AccessTokens`);
+const entityId = computed(() => $props.id || useRoute().params.id);
+
+onMounted(async () => {});
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
+        <div class="full-width" style="max-width: 400px">
             <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
+                ref="paginateRef"
+                data-key="AccessTokens"
+                :filter="filter"
+                :url="urlPath"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.clientName"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
+                    <QTable :rows="data" :columns="columns" hide-header>
+                        <template #body="{ row, rowIndex }">
+                            <QTr>
+                                <QTd>
+                                    <span>{{ row.warehouse?.name }}</span>
+                                </QTd>
+                                <QTd style="width: 50px !important">
+                                    <QIcon
+                                        name="delete"
+                                        size="sm"
+                                        class="cursor-pointer"
+                                        color="primary"
+                                        @click="
+                                            openConfirmationModal(
+                                                t('warehouses.deleteTitle'),
+                                                t('warehouses.deleteSubtitle'),
+                                                () => deleteWarehouse(row, rows, rowIndex)
+                                            )
+                                        "
                                     >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
+                                        <QTooltip>
+                                            {{ t('warehouses.delete') }}
+                                        </QTooltip>
+                                    </QIcon>
+                                </QTd>
+                            </QTr>
                         </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
+                    </QTable>
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn fab icon="add" color="primary" @click="createMailAlias()">
+                <QTooltip>{{ t('warehouses.add') }}</QTooltip>
+            </QBtn>
+        </QPageSticky>
     </QPage>
 </template>
diff --git a/src/pages/Account/AccountConnections.vue b/src/pages/Account/AccountConnections.vue
index 3b72f723c..1128205b8 100644
--- a/src/pages/Account/AccountConnections.vue
+++ b/src/pages/Account/AccountConnections.vue
@@ -1,11 +1,75 @@
 <script setup>
+import { onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import VnPaginate from 'components/ui/VnPaginate.vue';
 
 const { t } = useI18n();
+const filter = computed(() => ({
+    fields: ['id', 'created', 'userId'],
+    include: { relation: 'user', scope: { fields: ['username'] } },
+    order: 'created DESC',
+    limit: 20,
+}));
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const urlPath = computed(() => `AccessTokens`);
+const entityId = computed(() => $props.id || useRoute().params.id);
+
+onMounted(async () => {});
 </script>
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list"></div>
+        <div class="full-width" style="max-width: 400px">
+            <VnPaginate
+                ref="paginateRef"
+                data-key="AccessTokens"
+                :filter="filter"
+                :url="urlPath"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QTable :rows="data" :columns="columns" hide-header>
+                        <template #body="{ row, rowIndex }">
+                            <QTr>
+                                <QTd>
+                                    <span>{{ row.warehouse?.name }}</span>
+                                </QTd>
+                                <QTd style="width: 50px !important">
+                                    <QIcon
+                                        name="delete"
+                                        size="sm"
+                                        class="cursor-pointer"
+                                        color="primary"
+                                        @click="
+                                            openConfirmationModal(
+                                                t('warehouses.deleteTitle'),
+                                                t('warehouses.deleteSubtitle'),
+                                                () => deleteWarehouse(row, rows, rowIndex)
+                                            )
+                                        "
+                                    >
+                                        <QTooltip>
+                                            {{ t('warehouses.delete') }}
+                                        </QTooltip>
+                                    </QIcon>
+                                </QTd>
+                            </QTr>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn fab icon="refresh" color="primary" @click="refresh()">
+                <QTooltip>{{ t('warehouses.refresh') }}</QTooltip>
+            </QBtn>
+        </QPageSticky>
     </QPage>
 </template>
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
index 3b72f723c..0f7a9735c 100644
--- a/src/pages/Account/AccountLdap.vue
+++ b/src/pages/Account/AccountLdap.vue
@@ -1,11 +1,111 @@
 <script setup>
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
+
+const newAccountForm = reactive({
+    supplierFk: null,
+    travelFk: null,
+    companyFk: null,
+});
 </script>
 
 <template>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list"></div>
+    <QPage>
+        <VnSubToolbar />
+        <pre>TODO <b>LDAP</b></pre>
+        <FormModel
+            url-create="Entries"
+            model="account"
+            :form-initial-data="newAccountForm"
+            @on-data-saved="redirectToAccountBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Supplier')"
+                            class="full-width"
+                            v-model="data.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="nickname"
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.supplierFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.id }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Travel')"
+                            class="full-width"
+                            v-model="data.travelFk"
+                            :options="travelsOptions"
+                            option-value="id"
+                            option-label="warehouseInName"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.travelFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.agencyModeName }} -
+                                            {{ scope.opt?.warehouseInName }} ({{
+                                                toDate(scope.opt?.shipped)
+                                            }}) &#x2192;
+                                            {{ scope.opt?.warehouseOutName }} ({{
+                                                toDate(scope.opt?.landed)
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Company')"
+                            class="full-width"
+                            v-model="data.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.companyFk')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
     </QPage>
 </template>
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
index 3b72f723c..6f122b00a 100644
--- a/src/pages/Account/AccountSamba.vue
+++ b/src/pages/Account/AccountSamba.vue
@@ -1,11 +1,111 @@
 <script setup>
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
+
+const newAccountForm = reactive({
+    supplierFk: null,
+    travelFk: null,
+    companyFk: null,
+});
 </script>
 
 <template>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list"></div>
+    <QPage>
+        <VnSubToolbar />
+        <pre>TODO <b>SAMBA</b></pre>
+        <FormModel
+            url-create="Entries"
+            model="account"
+            :form-initial-data="newAccountForm"
+            @on-data-saved="redirectToAccountBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Supplier')"
+                            class="full-width"
+                            v-model="data.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="nickname"
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.supplierFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.id }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Travel')"
+                            class="full-width"
+                            v-model="data.travelFk"
+                            :options="travelsOptions"
+                            option-value="id"
+                            option-label="warehouseInName"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.travelFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.agencyModeName }} -
+                                            {{ scope.opt?.warehouseInName }} ({{
+                                                toDate(scope.opt?.shipped)
+                                            }}) &#x2192;
+                                            {{ scope.opt?.warehouseOutName }} ({{
+                                                toDate(scope.opt?.landed)
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('Company')"
+                            class="full-width"
+                            v-model="data.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('account.companyFk')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
     </QPage>
 </template>

From c64a403ee2e2b28cd6a4f0fde8b2dabc4f2e7e72 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 11:17:58 +0200
Subject: [PATCH 16/25] feat: AccountSummary

---
 src/pages/Account/Card/AccountSummary.vue | 156 +++-------------------
 src/pages/Account/locale/en.yml           |   9 ++
 src/pages/Account/locale/es.yml           |   9 ++
 3 files changed, 40 insertions(+), 134 deletions(-)

diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
index bc808f6b0..fb2bf6a2a 100644
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -12,12 +12,11 @@ import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import axios from 'axios';
 import dashIfEmpty from 'src/filters/dashIfEmpty';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const route = useRoute();
-const router = useRouter();
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 
 const $props = defineProps({
     id: {
@@ -25,95 +24,10 @@ const $props = defineProps({
         default: 0,
     },
 });
+const { store } = useArrayData('Account');
+const account = ref(store.data);
 
 const entityId = computed(() => $props.id || route.params.id);
-
-const detailsColumns = ref([
-    {
-        name: 'item',
-        label: 'account.summary.item',
-        field: (row) => row.sale.itemFk,
-        sortable: true,
-    },
-    {
-        name: 'landed',
-        label: 'account.summary.landed',
-        field: (row) => row.sale.ticket.landed,
-        format: (value) => toDate(value),
-        sortable: true,
-    },
-    {
-        name: 'quantity',
-        label: 'account.summary.quantity',
-        field: (row) => row.sale.quantity,
-        sortable: true,
-    },
-    {
-        name: 'accounted',
-        label: 'account.summary.accounted',
-        field: (row) => row.quantity,
-        sortable: true,
-    },
-    {
-        name: 'description',
-        label: 'globals.description',
-        field: (row) => row.sale.concept,
-    },
-    {
-        name: 'price',
-        label: 'account.summary.price',
-        field: (row) => row.sale.price,
-        sortable: true,
-    },
-    {
-        name: 'discount',
-        label: 'account.summary.discount',
-        field: (row) => row.sale.discount,
-        format: (value) => `${value} %`,
-        sortable: true,
-    },
-    {
-        name: 'total',
-        label: 'account.summary.total',
-        field: ({ sale }) =>
-            toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
-        sortable: true,
-    },
-]);
-
-const developmentColumns = ref([
-    {
-        name: 'accountReason',
-        label: 'account.summary.reason',
-        field: (row) => row.accountReason.description,
-        sortable: true,
-    },
-    {
-        name: 'accountResult',
-        label: 'account.summary.result',
-        field: (row) => row.accountResult.description,
-        sortable: true,
-    },
-    {
-        name: 'accountResponsible',
-        label: 'account.summary.responsible',
-        field: (row) => row.accountResponsible.description,
-        sortable: true,
-    },
-    {
-        name: 'worker',
-        label: 'account.summary.worker',
-        field: (row) => row.worker?.user.nickname,
-        sortable: true,
-    },
-    {
-        name: 'accountRedelivery',
-        label: 'account.summary.redelivery',
-        field: (row) => row.accountRedelivery.description,
-        sortable: true,
-    },
-]);
-
 const filter = {
     where: { id: entityId },
     fields: ['id', 'nickname', 'name', 'role'],
@@ -122,52 +36,26 @@ const filter = {
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`VnUsers/preview`" :filter="filter">
-        <!-- <template #header="{ entity: { account } }">
-            {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
-        </template> -->
-        <template #body="{ entity: { account } }">
+    <CardSummary
+        ref="AccountSummary"
+        :url="`VnUsers/preview`"
+        :filter="filter"
+        @on-fetch="(data) => (account = data)"
+    >
+        <template #header>{{ account.id }} - {{ account.nickname }}</template>
+        <template #body>
             <QCard class="vn-one">
-                {{ account }}
-                <!-- <VnTitle :text="t('account.pageTitles.basicData')" /> -->
-                <!-- <VnLv
-                    :label="t('account.summary.created')"
-                    :value="toDate(account.created)"
-                /> -->
-                <!-- <VnLv :label="t('account.summary.state')">
-                    <template #value>
-                        <QChip :color="stateColor(account.accountState.code)" dense>
-                            {{ account.accountState.description }}
-                        </QChip>
-                    </template>
-                </VnLv> -->
-                <!-- <VnLv :label="t('globals.salesPerson')">
-                    <template #value>
-                        <VnUserLink
-                            :name="account.client?.salesPersonUser?.name"
-                            :worker-id="account.client?.salesPersonFk"
-                        />
-                    </template>
-                </VnLv> -->
-                <!-- <VnLv :label="t('account.summary.attendedBy')">
-                    <template #value>
-                        <VnUserLink
-                            :name="account.worker?.user?.nickname"
-                            :worker-id="account.workerFk"
-                        />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('account.summary.customer')">
-                    <template #value>
-                        <span class="link cursor-pointer">
-                            {{ account.client?.name }}
-                        </span>
-                    </template>
-                </VnLv>
-                <VnLv
-                    :label="t('account.basicData.pickup')"
-                    :value="`${dashIfEmpty(account.pickup)}`"
-                /> -->
+                <QCardSection class="q-pa-none">
+                    <a
+                        class="header header-link"
+                        :href="`#/VnUser/${entityId}/basic-data`"
+                    >
+                        {{ t('globals.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" />
+                    </a>
+                </QCardSection>
+                <VnLv :label="t('account.card.nickname')" :value="account.nickname" />
+                <VnLv :label="t('account.card.role')" :value="account.role.name" />
             </QCard>
         </template>
     </CardSummary>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index d129d52b6..36defa244 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -14,6 +14,15 @@ account:
         privileges: Privileges
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding
+    card:
+        nickname: Usuario
+        role: Rol
+        actions:
+            setPassword: Se password
+            disableAccount: Disable account
+            disableUser: Disable user
+            sync: Sync
+            delete: Delete
     search: Search user
 role:
     pageTitles:
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index fdfc17024..70736d94b 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -14,6 +14,15 @@ account:
         privileges: Privilegios
         mailAlias: Alias de correo
         mailForwarding: Reenvío de correo
+    card:
+        nickname: Usuario
+        role: Rol
+        actions:
+            setPassword: Establecer contraseña
+            disableAccount: Deshabilitar cuenta
+            disableUser: Desactivar usuario
+            sync: Sincronizar
+            delete: Eliminar
 
     search: Buscar usuario
 role:

From 0397f9ee6852fe9b5bf178e42cce27542a6bd596 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 11:18:23 +0200
Subject: [PATCH 17/25] feat: AccountDescriptor & AccountDescriptorMenu

---
 src/pages/Account/Card/AccountDescriptor.vue  | 132 +++++++-----------
 .../Account/Card/AccountDescriptorMenu.vue    |  58 ++++----
 2 files changed, 83 insertions(+), 107 deletions(-)

diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index b19c1f619..55ae92b92 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -9,7 +9,8 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
-
+import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
+import { useSession } from 'src/composables/useSession';
 const $props = defineProps({
     id: {
         type: Number,
@@ -22,14 +23,22 @@ const route = useRoute();
 const state = useState();
 const { t } = useI18n();
 const salixUrl = ref();
+const { getTokenMultimedia } = useSession();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.nickname, entity.id));
+
 const filter = {
     where: { id: entityId },
     fields: ['id', 'nickname', 'name', 'role'],
     include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
+function getAccountAvatar() {
+    const token = getTokenMultimedia();
+    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
+}
 </script>
 
 <template>
@@ -40,96 +49,57 @@ const filter = {
         module="Account"
         @on-fetch="setData"
         data-key="accountData"
+        :title="data.title"
+        :subtitle="data.subtitle"
     >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                size="md"
+                color="white"
+                icon="face"
+                :to="{ name: 'AccountList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
         <template #menu="{ entity }">
-            {{ entity }}
+            <AccountDescriptorMenu :account="entity" />
+        </template>
+        <template #before>
+            <QImg :src="getAccountAvatar()" class="photo">
+                <template #error>
+                    <div
+                        class="absolute-full picture text-center q-pa-md flex flex-center"
+                    >
+                        <div>
+                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
+                                <QIcon name="vn:claims" />
+                            </div>
+                            <div class="text-grey-5" style="opacity: 0.4">
+                                {{ t('account.imageNotFound') }}
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </QImg>
         </template>
         <template #body="{ entity }">
-            <VnLv v-if="entity.accountState" :label="t('account.card.state')">
-                <template #value>
-                    <QBadge
-                        :color="stateColor(entity.accountState.code)"
-                        text-color="black"
-                        dense
-                    >
-                        {{ entity.accountState.description }}
-                    </QBadge>
-                </template>
-            </VnLv>
-            <VnLv :label="t('account.card.created')" :value="toDate(entity.created)" />
-            <VnLv :label="t('account.card.commercial')">
-                <template #value>
-                    <VnUserLink
-                        :name="entity.client?.salesPersonUser?.name"
-                        :worker-id="entity.client?.salesPersonFk"
-                    />
-                </template>
-            </VnLv>
-            <VnLv
-                v-if="entity.worker"
-                :label="t('account.card.attendedBy')"
-                :value="entity.worker.user.name"
-            >
-                <template #value>
-                    <VnUserLink
-                        :name="entity.worker.user.nickname"
-                        :worker-id="entity.worker.id"
-                    />
-                </template>
-            </VnLv>
-            <VnLv :label="t('account.card.zone')">
-                <template #value>
-                    <span class="link">
-                        {{ entity.ticket?.zone?.name }}
-                    </span>
-                </template>
-            </VnLv>
-            <VnLv
-                :label="t('account.card.province')"
-                :value="entity.ticket?.address?.province?.name"
-            />
-            <VnLv :label="t('account.card.ticketId')">
-                <template #value>
-                    <span class="link">
-                        {{ entity.ticketFk }}
-                    </span>
-                </template>
-            </VnLv>
-            <VnLv
-                :label="t('accountRate')"
-                :value="toPercentage(entity.client?.accountsRatio?.accountingRate)"
-            />
+            <VnLv :label="t('account.card.nickname')" :value="entity.nickname" />
+            <VnLv :label="t('account.card.role')" :value="entity.role.name" />
         </template>
         <template #actions="{ entity }">
             <QCardActions>
                 <QBtn
+                    round
+                    flat
                     size="md"
-                    icon="vn:client"
-                    color="primary"
-                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
-                >
-                    <QTooltip>{{ t('account.card.customerSummary') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="vn:ticket"
-                    color="primary"
-                    :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
-                >
-                    <QTooltip>{{ t('account.card.accountedTicket') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="assignment"
-                    color="primary"
-                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
-                >
-                    <QTooltip>{{ t('account.card.saleTracking') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="visibility"
                     color="primary"
+                    class="fill-icon"
+                    icon="contact_mail"
                     :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
                 >
                     <QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index 249fd2481..5bf183358 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -18,7 +18,25 @@ const { openReport } = usePrintService();
 
 const account = ref($props.account);
 
-function openPickupOrder() {
+function setPassword() {
+    const id = account.value.id;
+    openReport(`Accounts/${id}/account-pickup-pdf`, {
+        recipientId: account.value.clientFk,
+    });
+}
+function disableAccount() {
+    const id = account.value.id;
+    openReport(`Accounts/${id}/account-pickup-pdf`, {
+        recipientId: account.value.clientFk,
+    });
+}
+function disableUser() {
+    const id = account.value.id;
+    openReport(`Accounts/${id}/account-pickup-pdf`, {
+        recipientId: account.value.clientFk,
+    });
+}
+function sync() {
     const id = account.value.id;
     openReport(`Accounts/${id}/account-pickup-pdf`, {
         recipientId: account.value.clientFk,
@@ -26,37 +44,25 @@ function openPickupOrder() {
 }
 </script>
 <template>
-    <QItem v-ripple clickable>
-        <QItemSection avatar>
-            <QIcon name="summarize" />
-        </QItemSection>
-        <QItemSection>{{ t('pickupOrder') }}</QItemSection>
-        <QItemSection side>
-            <QIcon name="keyboard_arrow_right" />
-        </QItemSection>
-        <QMenu anchor="top end" self="top start" auto-close>
-            <QList>
-                <QItem @click="openPickupOrder" v-ripple clickable>
-                    <QItemSection avatar>
-                        <QIcon name="picture_as_pdf" />
-                    </QItemSection>
-                    <QItemSection>{{ t('openPickupOrder') }}</QItemSection>
-                </QItem>
-                <QItem @click="confirmPickupOrder" v-ripple clickable>
-                    <QItemSection avatar>
-                        <QIcon name="send" />
-                    </QItemSection>
-                    <QItemSection>{{ t('sendPickupOrder') }}</QItemSection>
-                </QItem>
-            </QList>
-        </QMenu>
+    <QItem v-ripple clickable @click="setPassword(entity)">
+        <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
     </QItem>
+    <QItem v-ripple clickable @click="disableAccount(entity)">
+        <QItemSection>{{ t('account.card.actions.disableAccount') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable @click="disableUser(entity)">
+        <QItemSection>{{ t('account.card.actions.disableUser') }}</QItemSection>
+    </QItem>
+    <QItem v-ripple clickable @click="sync(entity)">
+        <QItemSection>{{ t('account.card.actions.sync') }}</QItemSection>
+    </QItem>
+
     <QSeparator />
     <QItem @click="confirmRemove()" v-ripple clickable>
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
-        <QItemSection>{{ t('deleteAccount') }}</QItemSection>
+        <QItemSection>{{ t('account.card.actions.delete') }}</QItemSection>
     </QItem>
 </template>
 

From 474e2c3a48e671062fae84fe28b13994676319bf Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 11:19:04 +0200
Subject: [PATCH 18/25] style: align-center

---
 src/components/ui/CardDescriptor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index d2ba21888..8648cc669 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -235,6 +235,7 @@ const emit = defineEmits(['onFetch']);
     width: 256px;
     .header {
         display: flex;
+        align-items: center;
     }
     .icons {
         margin: 0 10px;

From bbd51c57733490b1d1b848785fc6a983189808e8 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 11:40:32 +0200
Subject: [PATCH 19/25] feat: AccountDescriptorMenu

---
 .../Account/Card/AccountDescriptorMenu.vue    | 95 ++++++++++++-------
 src/pages/Account/locale/en.yml               |  8 +-
 src/pages/Account/locale/es.yml               | 20 +++-
 3 files changed, 83 insertions(+), 40 deletions(-)

diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index 5bf183358..bfec789ed 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -12,57 +12,84 @@ const $props = defineProps({
         required: true,
     },
 });
+import { useVnConfirm } from 'composables/useVnConfirm';
 
 const { t } = useI18n();
 const { openReport } = usePrintService();
+const { openConfirmationModal } = useVnConfirm();
 
 const account = ref($props.account);
-
-function setPassword() {
-    const id = account.value.id;
-    openReport(`Accounts/${id}/account-pickup-pdf`, {
-        recipientId: account.value.clientFk,
-    });
-}
-function disableAccount() {
-    const id = account.value.id;
-    openReport(`Accounts/${id}/account-pickup-pdf`, {
-        recipientId: account.value.clientFk,
-    });
-}
-function disableUser() {
-    const id = account.value.id;
-    openReport(`Accounts/${id}/account-pickup-pdf`, {
-        recipientId: account.value.clientFk,
-    });
-}
-function sync() {
-    const id = account.value.id;
-    openReport(`Accounts/${id}/account-pickup-pdf`, {
-        recipientId: account.value.clientFk,
-    });
-}
 </script>
 <template>
-    <QItem v-ripple clickable @click="setPassword(entity)">
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('Confirm deletion'),
+                t('Are you sure...TODO'),
+                setPassword
+            )
+        "
+    >
         <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
     </QItem>
-    <QItem v-ripple clickable @click="disableAccount(entity)">
-        <QItemSection>{{ t('account.card.actions.disableAccount') }}</QItemSection>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.disableAccount.title'),
+                t('account.card.actions.disableAccount.subtitle'),
+                disableAccount
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.disableAccount.name') }}</QItemSection>
     </QItem>
-    <QItem v-ripple clickable @click="disableUser(entity)">
-        <QItemSection>{{ t('account.card.actions.disableUser') }}</QItemSection>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.disableUser.title'),
+                t('account.card.actions.disableUser.title'),
+                actiondisableUser
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.disableUser.name') }}</QItemSection>
     </QItem>
-    <QItem v-ripple clickable @click="sync(entity)">
-        <QItemSection>{{ t('account.card.actions.sync') }}</QItemSection>
+    <QItem
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.sync.title'),
+                t('account.card.actions.sync.subtitle'),
+                sync
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.sync.name') }}</QItemSection>
     </QItem>
 
     <QSeparator />
-    <QItem @click="confirmRemove()" v-ripple clickable>
+    <QItem
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.delete.title'),
+                t('account.card.actions.delete.subTitle'),
+                removeAccount
+            )
+        "
+        v-ripple
+        clickable
+    >
         <QItemSection avatar>
             <QIcon name="delete" />
         </QItemSection>
-        <QItemSection>{{ t('account.card.actions.delete') }}</QItemSection>
+        <QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
     </QItem>
 </template>
 
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 36defa244..04a6ff073 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -18,8 +18,12 @@ account:
         nickname: Usuario
         role: Rol
         actions:
-            setPassword: Se password
-            disableAccount: Disable account
+            setPassword: Set password
+
+            disableAccount:
+                name: Disable account
+                title: La cuenta será deshabilitada
+                subtitle: ¿Seguro que quieres continuar?
             disableUser: Disable user
             sync: Sync
             delete: Delete
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 70736d94b..f61b1d4de 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -19,10 +19,22 @@ account:
         role: Rol
         actions:
             setPassword: Establecer contraseña
-            disableAccount: Deshabilitar cuenta
-            disableUser: Desactivar usuario
-            sync: Sincronizar
-            delete: Eliminar
+            disableAccount:
+                name: Deshabilitar cuenta
+                title: La cuenta será deshabilitada
+                subtitle: ¿Seguro que quieres continuar?
+            disableUser:
+                name: Desactivar usuario
+                title: El usuario será deshabilitado
+                subtitle: ¿Seguro que quieres continuar?
+            sync:
+                name: Sincronizar
+                title: El usuario será sincronizado
+                subtitle: ¿Seguro que quieres continuar?
+            delete:
+                name: Eliminar
+                title: El usuario será eliminado
+                subtitle: ¿Seguro que quieres continuar?
 
     search: Buscar usuario
 role:

From 026997a369462e9929c01d11cc5f28ba9304eae5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 20 May 2024 23:25:20 +0200
Subject: [PATCH 20/25] role updates

---
 src/pages/Account/Role/Card/RoleBasicData.vue | 160 +-----------------
 src/pages/Account/Role/Card/RoleCard.vue      |   2 +-
 .../Account/Role/Card/RoleDescriptor.vue      | 139 +++++----------
 src/pages/Account/Role/Card/RoleSummary.vue   |  86 +++-------
 4 files changed, 74 insertions(+), 313 deletions(-)

diff --git a/src/pages/Account/Role/Card/RoleBasicData.vue b/src/pages/Account/Role/Card/RoleBasicData.vue
index 7a3548b8b..e3f03f653 100644
--- a/src/pages/Account/Role/Card/RoleBasicData.vue
+++ b/src/pages/Account/Role/Card/RoleBasicData.vue
@@ -1,181 +1,33 @@
 <script setup>
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-
-import axios from 'axios';
-import { useSession } from 'src/composables/useSession';
-
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
-
-const accountFilter = {
-    fields: [
-        'id',
-        'clientFk',
-        'created',
-        'workerFk',
-        'accountStateFk',
-        'packages',
-        'pickup',
-    ],
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                fields: ['name'],
-            },
-        },
-    ],
-};
-
-const accountStates = ref([]);
-const accountStatesCopy = ref([]);
-const optionsList = ref([]);
-
-const workersOptions = ref([]);
-
-function setAccountStates(data) {
-    accountStates.value = data;
-    accountStatesCopy.value = data;
-}
-
-async function getEnumValues() {
-    optionsList.value = [{ id: null, description: t('account.basicData.null') }];
-    const { data } = await axios.get(`Applications/get-enum-values`, {
-        params: {
-            schema: 'vn',
-            table: 'account',
-            column: 'pickup',
-        },
-    });
-    for (let value of data)
-        optionsList.value.push({
-            id: value,
-            description: t(`account.basicData.${value}`),
-        });
-}
-
-getEnumValues();
-
-const statesFilter = {
-    options: accountStates,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return accountStatesCopy.value;
-
-        return options.value.filter((row) => {
-            const description = row.description.toLowerCase();
-
-            return description.indexOf(search) > -1;
-        });
-    },
-};
 </script>
 <template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
-    <FetchData url="AccountStates" @on-fetch="setAccountStates" auto-load />
-    <FormModel
-        :url="`Accounts/${route.params.id}`"
-        :url-update="`Accounts/updateAccount/${route.params.id}`"
-        :filter="accountFilter"
-        model="account"
-        auto-load
-    >
-        <template #form="{ data, validate, filter }">
+    <FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
+        <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInput
                         v-model="data.client.name"
-                        :label="t('account.basicData.customer')"
+                        :label="t('role.basicData.name')"
                         disable
                     />
                 </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInputDate
                         v-model="data.created"
-                        :label="t('account.basicData.created')"
+                        :label="t('role.basicData.description')"
                     />
                 </div>
             </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelect
-                        :label="t('account.basicData.assignedTo')"
-                        v-model="data.workerFk"
-                        :options="workersOptions"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        auto-load
-                        :rules="validate('account.accountStateFk')"
-                    >
-                        <template #before>
-                            <QAvatar color="orange">
-                                <QImg
-                                    v-if="data.workerFk"
-                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                    spinner-color="white"
-                                />
-                            </QAvatar>
-                        </template>
-                    </VnSelect>
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.accountStateFk"
-                        :options="accountStates"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        :label="t('account.basicData.state')"
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, statesFilter)"
-                        :rules="validate('account.accountStateFk')"
-                        :input-debounce="0"
-                    >
-                    </QSelect>
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        v-model.number="data.packages"
-                        :label="t('globals.packages')"
-                        :rules="validate('account.packages')"
-                        type="number"
-                    />
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.pickup"
-                        :options="optionsList"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        :label="t('account.basicData.pickup')"
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                    </QSelect>
-                </div>
-            </VnRow>
         </template>
     </FormModel>
 </template>
diff --git a/src/pages/Account/Role/Card/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue
index 7d9f97c22..7f5a45d8b 100644
--- a/src/pages/Account/Role/Card/RoleCard.vue
+++ b/src/pages/Account/Role/Card/RoleCard.vue
@@ -5,7 +5,7 @@ import RoleDescriptor from './RoleDescriptor.vue';
 <template>
     <VnCard
         data-key="Role"
-        base-url="Roles"
+        base-url="VnRoles"
         :descriptor="RoleDescriptor"
         searchbar-data-key="RoleList"
         searchbar-url="Roles/filter"
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
index b19c1f619..d6fd4bf8e 100644
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toPercentage } from 'src/filters';
 import { useState } from 'src/composables/useState';
@@ -9,7 +9,10 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
+import { useQuasar } from 'quasar';
 
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
 const $props = defineProps({
     id: {
         type: Number,
@@ -19,122 +22,66 @@ const $props = defineProps({
 });
 
 const route = useRoute();
+
+const quasar = useQuasar();
+const router = useRouter();
+
+const { notify } = useNotify();
 const state = useState();
 const { t } = useI18n();
 const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
 const filter = {
     where: { id: entityId },
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};
+const removeRole = () => {
+    quasar
+        .dialog({
+            title: 'Are you sure you want to delete it?',
+            message: 'Delete department',
+            ok: {
+                push: true,
+                color: 'primary',
+            },
+            cancel: true,
+        })
+        .onOk(async () => {
+            try {
+                await axios.post(
+                    `/Departments/${entityId.value}/removeChild`,
+                    entityId.value
+                );
+                router.push({ name: 'WorkerDepartment' });
+                notify('department.departmentRemoved', 'positive');
+            } catch (err) {
+                console.error('Error removing department');
+            }
+        });
 };
 </script>
 
 <template>
     <CardDescriptor
         ref="descriptor"
-        :url="`VnUsers/preview`"
+        :url="`VnRoles`"
         :filter="filter"
         module="Account"
         @on-fetch="setData"
         data-key="accountData"
+        :title="data.title"
+        :subtitle="data.subtitle"
     >
-        <template #menu="{ entity }">
-            {{ entity }}
+        <template #menu>
+            <QItem v-ripple clickable @click="removeRole()">
+                <QItemSection>{{ t('Delete') }}</QItemSection>
+            </QItem>
         </template>
         <template #body="{ entity }">
-            <VnLv v-if="entity.accountState" :label="t('account.card.state')">
-                <template #value>
-                    <QBadge
-                        :color="stateColor(entity.accountState.code)"
-                        text-color="black"
-                        dense
-                    >
-                        {{ entity.accountState.description }}
-                    </QBadge>
-                </template>
-            </VnLv>
-            <VnLv :label="t('account.card.created')" :value="toDate(entity.created)" />
-            <VnLv :label="t('account.card.commercial')">
-                <template #value>
-                    <VnUserLink
-                        :name="entity.client?.salesPersonUser?.name"
-                        :worker-id="entity.client?.salesPersonFk"
-                    />
-                </template>
-            </VnLv>
-            <VnLv
-                v-if="entity.worker"
-                :label="t('account.card.attendedBy')"
-                :value="entity.worker.user.name"
-            >
-                <template #value>
-                    <VnUserLink
-                        :name="entity.worker.user.nickname"
-                        :worker-id="entity.worker.id"
-                    />
-                </template>
-            </VnLv>
-            <VnLv :label="t('account.card.zone')">
-                <template #value>
-                    <span class="link">
-                        {{ entity.ticket?.zone?.name }}
-                    </span>
-                </template>
-            </VnLv>
-            <VnLv
-                :label="t('account.card.province')"
-                :value="entity.ticket?.address?.province?.name"
-            />
-            <VnLv :label="t('account.card.ticketId')">
-                <template #value>
-                    <span class="link">
-                        {{ entity.ticketFk }}
-                    </span>
-                </template>
-            </VnLv>
-            <VnLv
-                :label="t('accountRate')"
-                :value="toPercentage(entity.client?.accountsRatio?.accountingRate)"
-            />
-        </template>
-        <template #actions="{ entity }">
-            <QCardActions>
-                <QBtn
-                    size="md"
-                    icon="vn:client"
-                    color="primary"
-                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
-                >
-                    <QTooltip>{{ t('account.card.customerSummary') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="vn:ticket"
-                    color="primary"
-                    :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
-                >
-                    <QTooltip>{{ t('account.card.accountedTicket') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="assignment"
-                    color="primary"
-                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
-                >
-                    <QTooltip>{{ t('account.card.saleTracking') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="visibility"
-                    color="primary"
-                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
-                >
-                    <QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
-                </QBtn>
-            </QCardActions>
+            <VnLv :label="t('role.card.description')" :value="entity.description" />
         </template>
     </CardDescriptor>
 </template>
diff --git a/src/pages/Account/Role/Card/RoleSummary.vue b/src/pages/Account/Role/Card/RoleSummary.vue
index 3f8ea701b..eca5f7085 100644
--- a/src/pages/Account/Role/Card/RoleSummary.vue
+++ b/src/pages/Account/Role/Card/RoleSummary.vue
@@ -12,6 +12,7 @@ import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import axios from 'axios';
 import dashIfEmpty from 'src/filters/dashIfEmpty';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const route = useRoute();
 const router = useRouter();
@@ -26,76 +27,37 @@ const $props = defineProps({
     },
 });
 
+const { store } = useArrayData('Role');
+const role = ref(store.data);
 const entityId = computed(() => $props.id || route.params.id);
-
-onMounted(async () => {});
-
-const detailsColumns = ref([
-    {
-        name: 'item',
-        label: 'account.summary.item',
-        field: (row) => row.sale.itemFk,
-        sortable: true,
-    },
-    {
-        name: 'landed',
-        label: 'account.summary.landed',
-        field: (row) => row.sale.ticket.landed,
-        format: (value) => toDate(value),
-        sortable: true,
-    },
-    {
-        name: 'quantity',
-        label: 'account.summary.quantity',
-        field: (row) => row.sale.quantity,
-        sortable: true,
-    },
-    {
-        name: 'accounted',
-        label: 'account.summary.accounted',
-        field: (row) => row.quantity,
-        sortable: true,
-    },
-    {
-        name: 'description',
-        label: 'globals.description',
-        field: (row) => row.sale.concept,
-    },
-    {
-        name: 'price',
-        label: 'account.summary.price',
-        field: (row) => row.sale.price,
-        sortable: true,
-    },
-    {
-        name: 'discount',
-        label: 'account.summary.discount',
-        field: (row) => row.sale.discount,
-        format: (value) => `${value} %`,
-        sortable: true,
-    },
-    {
-        name: 'total',
-        label: 'account.summary.total',
-        field: ({ sale }) =>
-            toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
-        sortable: true,
-    },
-]);
+const filter = {
+    where: { id: entityId },
+};
 </script>
 
 <template>
     <CardSummary
         ref="summary"
         :url="`VnRoles`"
-        :entity-id="entityId"
-        @on-fetch="getAccountDms"
+        :filter="filter"
+        @on-fetch="(data) => (role = data)"
     >
-        <!-- <template #header="{ entity: { account } }">
-            {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
-        </template> -->
-        <template #body="{ entity }">
-            {{ entity }}
+        <template #header> {{ role.id }} - {{ role.name }} </template>
+        <template #body>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <a
+                        class="header header-link"
+                        :href="`#/VnUser/${entityId}/basic-data`"
+                    >
+                        {{ t('globals.pageTitles.basicData') }}
+                        <QIcon name="open_in_new" />
+                    </a>
+                </QCardSection>
+                <VnLv :label="t('role.card.id')" :value="role.id" />
+                <VnLv :label="t('role.card.name')" :value="role.name" />
+                <VnLv :label="t('role.card.description')" :value="role.description" />
+            </QCard>
         </template>
     </CardSummary>
 </template>

From 2cae2168ace441908a586e01deef3e0036c51a71 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 21 May 2024 08:52:19 +0200
Subject: [PATCH 21/25] perf: AccountCard, BasicData, summary

---
 src/pages/Account/AccountList.vue           |  41 +----
 src/pages/Account/Card/AccountBasicData.vue | 164 +++-----------------
 src/pages/Account/Role/AccountRoles.vue     |  50 ++----
 src/pages/Account/locale/en.yml             |  11 +-
 src/pages/Account/locale/es.yml             |   8 +
 src/router/modules/account.js               |  47 ++----
 6 files changed, 64 insertions(+), 257 deletions(-)

diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 933f62b6c..56d54a47d 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -21,17 +21,9 @@ const filter = {
     include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
 
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
-};
 function getApiUrl() {
     return new URL(window.location).origin;
 }
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
 function navigate(event, id) {
     if (event.ctrlKey || event.metaKey)
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
@@ -86,37 +78,12 @@ function navigate(event, id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
+                            <VnLv :label="t('account.card.name')" :value="row.nickname">
                             </VnLv>
                             <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
-                                    >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
+                                :label="t('account.card.nickname')"
+                                :value="row.username"
+                            >
                             </VnLv>
                         </template>
                         <template #actions>
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index 7a3548b8b..232e18d52 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -3,178 +3,52 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
-import axios from 'axios';
-import { useSession } from 'src/composables/useSession';
-
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 
 const accountFilter = {
-    fields: [
-        'id',
-        'clientFk',
-        'created',
-        'workerFk',
-        'accountStateFk',
-        'packages',
-        'pickup',
-    ],
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                fields: ['name'],
-            },
-        },
-    ],
-};
-
-const accountStates = ref([]);
-const accountStatesCopy = ref([]);
-const optionsList = ref([]);
-
-const workersOptions = ref([]);
-
-function setAccountStates(data) {
-    accountStates.value = data;
-    accountStatesCopy.value = data;
-}
-
-async function getEnumValues() {
-    optionsList.value = [{ id: null, description: t('account.basicData.null') }];
-    const { data } = await axios.get(`Applications/get-enum-values`, {
-        params: {
-            schema: 'vn',
-            table: 'account',
-            column: 'pickup',
-        },
-    });
-    for (let value of data)
-        optionsList.value.push({
-            id: value,
-            description: t(`account.basicData.${value}`),
-        });
-}
-
-getEnumValues();
-
-const statesFilter = {
-    options: accountStates,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return accountStatesCopy.value;
-
-        return options.value.filter((row) => {
-            const description = row.description.toLowerCase();
-
-            return description.indexOf(search) > -1;
-        });
-    },
+    where: { id: route.params.id },
+    fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
+    include: [],
 };
 </script>
 <template>
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-    />
-    <FetchData url="AccountStates" @on-fetch="setAccountStates" auto-load />
     <FormModel
-        :url="`Accounts/${route.params.id}`"
-        :url-update="`Accounts/updateAccount/${route.params.id}`"
+        :url="`VnUsers/preview`"
+        :url-update="`VnUsers/${route.params.id}/update-user`"
         :filter="accountFilter"
-        model="account"
+        model="Accounts"
         auto-load
     >
-        <template #form="{ data, validate, filter }">
+        <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnInput
-                        v-model="data.client.name"
-                        :label="t('account.basicData.customer')"
-                        disable
-                    />
+                    <VnInput v-model="data.name" :label="t('account.card.nickname')" />
                 </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnInputDate
-                        v-model="data.created"
-                        :label="t('account.basicData.created')"
-                    />
+                    <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput v-model="data.email" :label="t('account.card.email')" />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelect
-                        :label="t('account.basicData.assignedTo')"
-                        v-model="data.workerFk"
-                        :options="workersOptions"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        auto-load
-                        :rules="validate('account.accountStateFk')"
-                    >
-                        <template #before>
-                            <QAvatar color="orange">
-                                <QImg
-                                    v-if="data.workerFk"
-                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                    spinner-color="white"
-                                />
-                            </QAvatar>
-                        </template>
-                    </VnSelect>
-                </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.accountStateFk"
-                        :options="accountStates"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        :label="t('account.basicData.state')"
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, statesFilter)"
-                        :rules="validate('account.accountStateFk')"
-                        :input-debounce="0"
-                    >
-                    </QSelect>
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QInput
-                        v-model.number="data.packages"
-                        :label="t('globals.packages')"
-                        :rules="validate('account.packages')"
-                        type="number"
+                        v-model="data.lang"
+                        :options="['es', 'en']"
+                        :label="t('account.card.lang')"
                     />
                 </div>
-                <div class="col">
-                    <QSelect
-                        v-model="data.pickup"
-                        :options="optionsList"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        :label="t('account.basicData.pickup')"
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                    </QSelect>
-                </div>
             </VnRow>
         </template>
     </FormModel>
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 8e52b2196..f90c833f6 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -8,22 +8,16 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from '../Card/AccountSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
+const redirectToCreateView = () => {
+    router.push({ name: 'RoleCreate' });
 };
 function getApiUrl() {
     return new URL(window.location).origin;
 }
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
 function navigate(event, id) {
     if (event.ctrlKey || event.metaKey)
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
@@ -49,37 +43,11 @@ function navigate(event, id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
-                            </VnLv>
+                            <VnLv :label="t('role.card.name')" :value="row.name"> </VnLv>
                             <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
-                                    >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
+                                :label="t('role.card.description')"
+                                :value="row.description"
+                            >
                             </VnLv>
                         </template>
                         <template #actions>
@@ -101,5 +69,11 @@ function navigate(event, id) {
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
+            <QTooltip>
+                {{ t('New client') }}
+            </QTooltip>
+        </QPageSticky>
     </QPage>
 </template>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 04a6ff073..6ef3fdc17 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -15,11 +15,14 @@ account:
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding
     card:
-        nickname: Usuario
+        name: Name
+        nickname: User
         role: Rol
+        email: Email
+        alias: Alias
+        lang: Language
         actions:
             setPassword: Set password
-
             disableAccount:
                 name: Disable account
                 title: La cuenta será deshabilitada
@@ -32,3 +35,7 @@ role:
     pageTitles:
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
+    card:
+        description: Description
+        id: Id
+        name: Name
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index f61b1d4de..fbae7918a 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -16,7 +16,11 @@ account:
         mailForwarding: Reenvío de correo
     card:
         nickname: Usuario
+        name: Nombre
         role: Rol
+        email: Mail
+        alias: Alias
+        lang: dioma
         actions:
             setPassword: Establecer contraseña
             disableAccount:
@@ -41,3 +45,7 @@ role:
     pageTitles:
         inheritedRoles: Roles heredados
         subRoles: Subroles
+    card:
+        description: Descripción
+        id: Idd
+        name: Nombre
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index a45261158..ff4eaa69c 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -53,41 +53,18 @@ export default {
                         icon: 'group',
                     },
                     component: () => import('src/pages/Account/Role/AccountRoles.vue'),
-                    // children: [
-                    //     {
-                    //         name: 'RoleCard',
-                    //         path: ':id',
-                    //         component: () =>
-                    //             import('src/pages/Account/Role/Card/RoleCard.vue'),
-                    //         redirect: { name: 'RoleSummary' },
-                    //         children: [
-                    //             {
-                    //                 name: 'RoleSummary',
-                    //                 path: 'summary',
-                    //                 meta: {
-                    //                     title: 'summary',
-                    //                     icon: 'launch',
-                    //                 },
-                    //                 component: () =>
-                    //                     import(
-                    //                         'src/pages/Account/Role/Card/RoleSummary.vue'
-                    //                     ),
-                    //             },
-                    //             {
-                    //                 name: 'RoleBasicData',
-                    //                 path: 'basic-data',
-                    //                 meta: {
-                    //                     title: 'basicData',
-                    //                     icon: 'vn:settings',
-                    //                 },
-                    //                 component: () =>
-                    //                     import(
-                    //                         'src/pages/Account/Role/Card/RoleBasicData.vue'
-                    //                     ),
-                    //             },
-                    //         ],
-                    //     },
-                    // ],
+                    children: [
+                        {
+                            name: 'RoleCreate',
+                            path: 'create',
+                            meta: {
+                                title: 'RoleCreate',
+                                icon: 'add',
+                            },
+                            component: () =>
+                                import('src/pages/Account/Role/AccountRoles.vue'),
+                        },
+                    ],
                 },
                 {
                     path: 'alias',

From dc1411671799cd8f1909de7ea288a228355918a5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 21 May 2024 08:52:34 +0200
Subject: [PATCH 22/25] perf: RoleCard, BasicData, summary

---
 src/pages/Account/Role/Card/RoleBasicData.vue  | 12 ++++--------
 src/pages/Account/Role/Card/RoleDescriptor.vue |  7 +------
 src/pages/Account/Role/Card/RoleSummary.vue    | 15 ++-------------
 src/router/modules/role.js                     |  4 ++--
 4 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/pages/Account/Role/Card/RoleBasicData.vue b/src/pages/Account/Role/Card/RoleBasicData.vue
index e3f03f653..4607ef15c 100644
--- a/src/pages/Account/Role/Card/RoleBasicData.vue
+++ b/src/pages/Account/Role/Card/RoleBasicData.vue
@@ -13,18 +13,14 @@ const { t } = useI18n();
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnInput
-                        v-model="data.client.name"
-                        :label="t('role.basicData.name')"
-                        disable
-                    />
+                    <VnInput v-model="data.name" :label="t('role.card.name')" />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnInputDate
-                        v-model="data.created"
-                        :label="t('role.basicData.description')"
+                    <VnInput
+                        v-model="data.description"
+                        :label="t('role.card.description')"
                     />
                 </div>
             </VnRow>
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
index d6fd4bf8e..2df191950 100644
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -1,14 +1,11 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate, toPercentage } from 'src/filters';
 import { useState } from 'src/composables/useState';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import { getUrl } from 'src/composables/getUrl';
 import { useQuasar } from 'quasar';
 
 import axios from 'axios';
@@ -27,9 +24,7 @@ const quasar = useQuasar();
 const router = useRouter();
 
 const { notify } = useNotify();
-const state = useState();
 const { t } = useI18n();
-const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
diff --git a/src/pages/Account/Role/Card/RoleSummary.vue b/src/pages/Account/Role/Card/RoleSummary.vue
index eca5f7085..05fee63a2 100644
--- a/src/pages/Account/Role/Card/RoleSummary.vue
+++ b/src/pages/Account/Role/Card/RoleSummary.vue
@@ -1,24 +1,13 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate, toCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
-import FetchData from 'components/FetchData.vue';
-import { getUrl } from 'src/composables/getUrl';
-import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import VnTitle from 'src/components/common/VnTitle.vue';
-import axios from 'axios';
-import dashIfEmpty from 'src/filters/dashIfEmpty';
 import { useArrayData } from 'src/composables/useArrayData';
 
 const route = useRoute();
-const router = useRouter();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 
 const $props = defineProps({
     id: {
diff --git a/src/router/modules/role.js b/src/router/modules/role.js
index 5d291a024..6aab5f945 100644
--- a/src/router/modules/role.js
+++ b/src/router/modules/role.js
@@ -9,7 +9,7 @@ export default {
         moduleName: 'Role',
     },
     component: RouterView,
-    redirect: { name: 'RoleCard' },
+    redirect: { name: 'AccountRoles' },
     menus: {
         main: [],
         card: ['RoleBasicData', 'SubRoles', 'InheritedRoles', 'RoleLog'],
@@ -62,7 +62,7 @@ export default {
                         import('src/pages/Account/Role/Card/InheritedRoles.vue'),
                 },
                 {
-                    name: 'RoleBasicData',
+                    name: 'RoleLog',
                     path: 'log',
                     meta: {
                         title: 'log',

From 06664cc2d051007f122032906faa594ded9ce83e Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 23 May 2024 08:52:57 +0200
Subject: [PATCH 23/25] feat: newRole

---
 src/i18n/locale/en.yml                   |  6 ----
 src/pages/Account/Role/AccountRoles.vue  | 13 ++++---
 src/pages/Account/Role/Card/RoleForm.vue | 44 ++++++++++++++++++++++++
 src/pages/Account/locale/en.yml          |  2 ++
 src/pages/Account/locale/es.yml          |  2 ++
 src/router/modules/account.js            | 23 ++++++-------
 6 files changed, 68 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/Account/Role/Card/RoleForm.vue

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index f736bb0f7..657fbf9b1 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1249,12 +1249,6 @@ zone:
         zonesList: Zones
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
-role:
-    pageTitles:
-        role: Zones
-        zonesList: Zones
-        deliveryList: Delivery days
-        upcomingList: Upcoming deliveries
 
 components:
     topbar: {}
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index f90c833f6..7018f4a17 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -70,10 +70,15 @@ function navigate(event, id) {
             </VnPaginate>
         </div>
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
-            <QTooltip>
-                {{ t('New client') }}
-            </QTooltip>
+            <RouterLink :to="{ name: 'RoleCreate' }">
+                <QBtn fab icon="add" color="primary" />
+                <QTooltip>
+                    {{ t('role.pageTitles.roleCreate') }}
+                </QTooltip></RouterLink
+            >
         </QPageSticky>
     </QPage>
 </template>
+<i18n>
+    New rol: Nuevo role
+</i18n>
diff --git a/src/pages/Account/Role/Card/RoleForm.vue b/src/pages/Account/Role/Card/RoleForm.vue
new file mode 100644
index 000000000..6143239d9
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleForm.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+const route = useRoute();
+const { t } = useI18n();
+const shelvingId = route.params?.id || null;
+const isNew = Boolean(!shelvingId);
+const defaultInitialData = {
+    name: null,
+    description: null,
+};
+</script>
+<template>
+    <VnSubToolbar />
+    <FormModel
+        :url="isNew ? null : `VnRoles/${route.params.id}`"
+        :url-create="isNew ? 'VnRoles' : null"
+        :observe-form-changes="!isNew"
+        model="VnRole"
+        :auto-load="!isNew"
+        :form-initial-data="defaultInitialData"
+        @on-data-saved="onSave"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput v-model="data.name" :label="t('role.card.name')" />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.description"
+                        :label="t('role.card.description')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 6ef3fdc17..993299e75 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -11,6 +11,7 @@ account:
         connections: Connections
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
+        roleCreate: New role
         privileges: Privileges
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding
@@ -35,6 +36,7 @@ role:
     pageTitles:
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
+
     card:
         description: Description
         id: Id
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index fbae7918a..c0bdaa151 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -10,6 +10,7 @@ account:
         acls: ACLs
         connections: Conexiones
         inheritedRoles: Roles heredados
+        roleCreate: Nuevo rol
         subRoles: Subroles
         privileges: Privilegios
         mailAlias: Alias de correo
@@ -45,6 +46,7 @@ role:
     pageTitles:
         inheritedRoles: Roles heredados
         subRoles: Subroles
+        roleCreate: Nuevo rol
     card:
         description: Descripción
         id: Idd
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index ff4eaa69c..6dc2825b3 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -53,19 +53,18 @@ export default {
                         icon: 'group',
                     },
                     component: () => import('src/pages/Account/Role/AccountRoles.vue'),
-                    children: [
-                        {
-                            name: 'RoleCreate',
-                            path: 'create',
-                            meta: {
-                                title: 'RoleCreate',
-                                icon: 'add',
-                            },
-                            component: () =>
-                                import('src/pages/Account/Role/AccountRoles.vue'),
-                        },
-                    ],
                 },
+
+                {
+                    name: 'RoleCreate',
+                    path: 'create',
+                    meta: {
+                        title: 'roleCreate',
+                        icon: 'add',
+                    },
+                    component: () => import('src/pages/Account/Role/Card/RoleForm.vue'),
+                },
+
                 {
                     path: 'alias',
                     name: 'AccountAlias',

From 889263bfb80747c11c781e81e396857d72e77c84 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 23 May 2024 13:47:14 +0200
Subject: [PATCH 24/25] feat: roleCreate as dialog

---
 src/components/LeftMenuItem.vue          | 14 +++++++-
 src/pages/Account/Role/AccountRoles.vue  | 41 +++++++++++++++---------
 src/pages/Account/Role/Card/RoleForm.vue | 21 ++++++------
 src/pages/Account/locale/en.yml          |  2 +-
 src/pages/Account/locale/es.yml          |  4 +--
 src/router/modules/account.js            | 11 -------
 6 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/components/LeftMenuItem.vue b/src/components/LeftMenuItem.vue
index 5e0ee461f..d12fb8428 100644
--- a/src/components/LeftMenuItem.vue
+++ b/src/components/LeftMenuItem.vue
@@ -20,7 +20,13 @@ const itemComputed = computed(() => {
 });
 </script>
 <template>
-    <QItem active-class="bg-hover" :to="{ name: itemComputed.name }" clickable v-ripple>
+    <QItem
+        active-class="bg-hover"
+        class="min-height"
+        :to="{ name: itemComputed.name }"
+        clickable
+        v-ripple
+    >
         <QItemSection avatar v-if="itemComputed.icon">
             <QIcon :name="itemComputed.icon" />
         </QItemSection>
@@ -33,3 +39,9 @@ const itemComputed = computed(() => {
         </QItemSection>
     </QItem>
 </template>
+
+<style lang="scss" scoped>
+.q-item {
+    min-height: 5vh;
+}
+</style>
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 7018f4a17..2109a3ab4 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -6,14 +6,17 @@ import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from '../Card/AccountSummary.vue';
+import { ref } from 'vue';
+import RoleForm from './Card/RoleForm.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const redirectToCreateView = () => {
-    router.push({ name: 'RoleCreate' });
+const roleCreateDialogRef = ref(null);
+
+const openCreateModal = () => {
+    roleCreateDialogRef.value.show();
 };
 function getApiUrl() {
     return new URL(window.location).origin;
@@ -43,12 +46,15 @@ function navigate(event, id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('role.card.name')" :value="row.name"> </VnLv>
-                            <VnLv
-                                :label="t('role.card.description')"
-                                :value="row.description"
-                            >
-                            </VnLv>
+                            <div style="flex-direction: column; width: 100%">
+                                <VnLv :label="t('role.card.name')" :value="row.name">
+                                </VnLv>
+                                <VnLv
+                                    :label="t('role.card.description')"
+                                    :value="row.description"
+                                >
+                                </VnLv>
+                            </div>
                         </template>
                         <template #actions>
                             <QBtn
@@ -69,13 +75,18 @@ function navigate(event, id) {
                 </template>
             </VnPaginate>
         </div>
+        <QDialog
+            ref="roleCreateDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <RoleForm />
+        </QDialog>
         <QPageSticky :offset="[20, 20]">
-            <RouterLink :to="{ name: 'RoleCreate' }">
-                <QBtn fab icon="add" color="primary" />
-                <QTooltip>
-                    {{ t('role.pageTitles.roleCreate') }}
-                </QTooltip></RouterLink
-            >
+            <QBtn fab icon="add" color="primary" @click="openCreateModal()" />
+            <QTooltip>
+                {{ t('account.pageTitles.newRole') }}
+            </QTooltip>
         </QPageSticky>
     </QPage>
 </template>
diff --git a/src/pages/Account/Role/Card/RoleForm.vue b/src/pages/Account/Role/Card/RoleForm.vue
index 6143239d9..0fef124c6 100644
--- a/src/pages/Account/Role/Card/RoleForm.vue
+++ b/src/pages/Account/Role/Card/RoleForm.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -15,17 +15,15 @@ const defaultInitialData = {
 };
 </script>
 <template>
-    <VnSubToolbar />
-    <FormModel
-        :url="isNew ? null : `VnRoles/${route.params.id}`"
-        :url-create="isNew ? 'VnRoles' : null"
-        :observe-form-changes="!isNew"
+    <FormModelPopup
+        :title="t('Create role')"
+        ref="formModelPopupRef"
+        url-create="VnRoles"
         model="VnRole"
-        :auto-load="!isNew"
         :form-initial-data="defaultInitialData"
         @on-data-saved="onSave"
     >
-        <template #form="{ data }">
+        <template #form-inputs="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInput v-model="data.name" :label="t('role.card.name')" />
@@ -40,5 +38,10 @@ const defaultInitialData = {
                 </div>
             </VnRow>
         </template>
-    </FormModel>
+    </FormModelPopup>
 </template>
+
+<i18n>
+    es:
+        Create role: Crear role
+</i18n>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 993299e75..dd0955d91 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -11,7 +11,7 @@ account:
         connections: Connections
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
-        roleCreate: New role
+        newRole: New role
         privileges: Privileges
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index c0bdaa151..95fa3bc36 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -10,7 +10,7 @@ account:
         acls: ACLs
         connections: Conexiones
         inheritedRoles: Roles heredados
-        roleCreate: Nuevo rol
+        newRole: Nuevo rol
         subRoles: Subroles
         privileges: Privilegios
         mailAlias: Alias de correo
@@ -46,7 +46,7 @@ role:
     pageTitles:
         inheritedRoles: Roles heredados
         subRoles: Subroles
-        roleCreate: Nuevo rol
+        newRole: Nuevo rol
     card:
         description: Descripción
         id: Idd
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 6dc2825b3..0f38d8a40 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -54,17 +54,6 @@ export default {
                     },
                     component: () => import('src/pages/Account/Role/AccountRoles.vue'),
                 },
-
-                {
-                    name: 'RoleCreate',
-                    path: 'create',
-                    meta: {
-                        title: 'roleCreate',
-                        icon: 'add',
-                    },
-                    component: () => import('src/pages/Account/Role/Card/RoleForm.vue'),
-                },
-
                 {
                     path: 'alias',
                     name: 'AccountAlias',

From d46b906020e53903c24ab6503be1c9d9beba49c1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 25 May 2024 10:37:52 +0200
Subject: [PATCH 25/25] feat: bolierplate layout samba and ldap

---
 src/pages/Account/AccountAccounts.vue |   1 -
 src/pages/Account/AccountCreate.vue   |   8 +-
 src/pages/Account/AccountLdap.vue     | 110 +++++++---------------
 src/pages/Account/AccountSamba.vue    | 127 ++++++++++----------------
 src/pages/Account/locale/en.yml       |  21 +++++
 src/pages/Account/locale/es.yml       |  21 +++++
 6 files changed, 124 insertions(+), 164 deletions(-)

diff --git a/src/pages/Account/AccountAccounts.vue b/src/pages/Account/AccountAccounts.vue
index e75eb3bdb..dc6690487 100644
--- a/src/pages/Account/AccountAccounts.vue
+++ b/src/pages/Account/AccountAccounts.vue
@@ -29,7 +29,6 @@ const newAccountForm = reactive({
             url-create="Entries"
             model="account"
             :form-initial-data="newAccountForm"
-            @on-data-saved="redirectToAccountBasicData"
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
index 6044db303..ca69fbb00 100644
--- a/src/pages/Account/AccountCreate.vue
+++ b/src/pages/Account/AccountCreate.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -17,7 +17,6 @@ import { toDate } from 'src/filters';
 const state = useState();
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
 const stateStore = useStateStore();
 
 const user = state.getUser();
@@ -29,10 +28,6 @@ const newAccountForm = reactive({
 const suppliersOptions = ref([]);
 const travelsOptions = ref([]);
 const companiesOptions = ref([]);
-
-const redirectToAccountBasicData = (_, { id }) => {
-    router.push({ name: 'AccountBasicData', params: { id } });
-};
 </script>
 
 <template>
@@ -75,7 +70,6 @@ const redirectToAccountBasicData = (_, { id }) => {
             url-create="Entries"
             model="account"
             :form-initial-data="newAccountForm"
-            @on-data-saved="redirectToAccountBasicData"
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
index 0f7a9735c..4d5fdfb34 100644
--- a/src/pages/Account/AccountLdap.vue
+++ b/src/pages/Account/AccountLdap.vue
@@ -1,16 +1,12 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
 
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters';
-
 const { t } = useI18n();
 
 const newAccountForm = reactive({
@@ -22,89 +18,47 @@ const newAccountForm = reactive({
 
 <template>
     <QPage>
-        <VnSubToolbar />
+        <VnSubToolbar> </VnSubToolbar>
         <pre>TODO <b>LDAP</b></pre>
         <FormModel
             url-create="Entries"
             model="account"
             :form-initial-data="newAccountForm"
-            @on-data-saved="redirectToAccountBasicData"
         >
-            <template #form="{ data, validate }">
+            <template #moreActions>
+                <QBtnGroup push class="q-gutter-x-sm">
+                    <QBtn round flat color="primary" :label="t('ldap.testConnection')">
+                        <QTooltip>
+                            {{ t('ldap.testConnection') }}
+                        </QTooltip>
+                    </QBtn>
+                </QBtnGroup>
+            </template>
+            <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelect
-                            :label="t('Supplier')"
-                            class="full-width"
-                            v-model="data.supplierFk"
-                            :options="suppliersOptions"
-                            option-value="id"
-                            option-label="nickname"
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.supplierFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            #{{ scope.opt?.id }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Travel')"
-                            class="full-width"
-                            v-model="data.travelFk"
-                            :options="travelsOptions"
-                            option-value="id"
-                            option-label="warehouseInName"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.travelFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt?.agencyModeName }} -
-                                            {{ scope.opt?.warehouseInName }} ({{
-                                                toDate(scope.opt?.shipped)
-                                            }}) &#x2192;
-                                            {{ scope.opt?.warehouseOutName }} ({{
-                                                toDate(scope.opt?.landed)
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Company')"
-                            class="full-width"
-                            v-model="data.companyFk"
-                            :options="companiesOptions"
-                            option-value="id"
-                            option-label="code"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.companyFk')"
+                        <QCheckbox
+                            :label="t('ldap.enableSync')"
+                            v-model="data.enableSync"
                         />
                     </div>
                 </VnRow>
+                <template v-if="data.enableSync">
+                    <VnInput :label="t('ldap.server')" clearable v-model="data.server" />
+                    <VnInput :label="t('ldap.rdn')" clearable v-model="data.rdn" />
+                    <VnInput
+                        :label="t('ldap.passwordAD')"
+                        clearable
+                        type="password"
+                        v-model="data.passwordAD"
+                    />
+                    <VnInput :label="t('ldap.userDN')" clearable v-model="data.userDN" />
+                    <VnInput
+                        :label="t('ldap.groupDN')"
+                        clearable
+                        v-model="data.groupDN"
+                    />
+                </template>
             </template>
         </FormModel>
     </QPage>
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
index 6f122b00a..d04ba1ed5 100644
--- a/src/pages/Account/AccountSamba.vue
+++ b/src/pages/Account/AccountSamba.vue
@@ -1,16 +1,12 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
 
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters';
-
 const { t } = useI18n();
 
 const newAccountForm = reactive({
@@ -22,89 +18,64 @@ const newAccountForm = reactive({
 
 <template>
     <QPage>
-        <VnSubToolbar />
+        <VnSubToolbar></VnSubToolbar>
         <pre>TODO <b>SAMBA</b></pre>
         <FormModel
             url-create="Entries"
             model="account"
             :form-initial-data="newAccountForm"
-            @on-data-saved="redirectToAccountBasicData"
         >
-            <template #form="{ data, validate }">
+            <template #moreActions>
+                <QBtn round flat color="primary" :label="t('samba.testConnection')">
+                    <QTooltip>
+                        {{ t('samba.testConnection') }}
+                    </QTooltip>
+                </QBtn>
+                <QBtn round flat color="primary" :label="t('samba.verifyCertificate')">
+                    <QTooltip>
+                        {{ t('samba.verifyCertificate') }}
+                    </QTooltip>
+                </QBtn>
+            </template>
+            <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelect
-                            :label="t('Supplier')"
-                            class="full-width"
-                            v-model="data.supplierFk"
-                            :options="suppliersOptions"
-                            option-value="id"
-                            option-label="nickname"
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.supplierFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            #{{ scope.opt?.id }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Travel')"
-                            class="full-width"
-                            v-model="data.travelFk"
-                            :options="travelsOptions"
-                            option-value="id"
-                            option-label="warehouseInName"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.travelFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt?.agencyModeName }} -
-                                            {{ scope.opt?.warehouseInName }} ({{
-                                                toDate(scope.opt?.shipped)
-                                            }}) &#x2192;
-                                            {{ scope.opt?.warehouseOutName }} ({{
-                                                toDate(scope.opt?.landed)
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Company')"
-                            class="full-width"
-                            v-model="data.companyFk"
-                            :options="companiesOptions"
-                            option-value="id"
-                            option-label="code"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.companyFk')"
+                        <QCheckbox
+                            :label="t('samba.enableSync')"
+                            v-model="data.enableSync"
                         />
                     </div>
                 </VnRow>
+                <template v-if="data.enableSync">
+                    <VnInput
+                        :label="t('samba.domainController')"
+                        clearable
+                        v-model="data.domainController"
+                    />
+                    <VnInput
+                        :label="t('samba.domainAD')"
+                        clearable
+                        v-model="data.domainAD"
+                    />
+                    <VnInput
+                        :label="t('samba.groupDN')"
+                        clearable
+                        v-model="data.groupDN"
+                    />
+
+                    <VnInput :label="t('samba.userAD')" clearable v-model="data.userAD" />
+                    <VnInput
+                        :label="t('samba.passwordAD')"
+                        clearable
+                        type="password"
+                        v-model="data.passwordAD"
+                    />
+                    <VnInput
+                        :label="t('samba.domainPart')"
+                        clearable
+                        v-model="data.domainPart"
+                    />
+                </template>
             </template>
         </FormModel>
     </QPage>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index dd0955d91..2464d3728 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -41,3 +41,24 @@ role:
         description: Description
         id: Id
         name: Name
+ldap:
+    enableSync: Enable synchronization
+    server: Server
+    rdn: RDN
+    userDN: User DN
+    filter: Filter
+    groupDN: Group DN
+    testConnection: Test connection
+    success: LDAP connection established!
+
+samba:
+    enableSync: Enable synchronization
+    domainController: Domain controller
+    domainAD: AD domain
+    userAD: AD user
+    groupDN: Group DN
+    passwordAD: AD password
+    domainPart: User DN (without domain part)
+    verifyCertificate: Verify certificate
+    testConnection: Test connection
+    success: Samba connection established!
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 95fa3bc36..dd242fe63 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -51,3 +51,24 @@ role:
         description: Descripción
         id: Idd
         name: Nombre
+
+ldap:
+    enableSync: Habilitar sincronización
+    server: Servidor
+    rdn: RDN
+    userDN: DN usuarios
+    filter: Filtro
+    groupDN: DN grupos
+    testConnection: Probar conexión
+    success: ¡Conexión con LDAP establecida!
+samba:
+    enableSync: Habilitar sincronización
+    domainController: Controlador de dominio
+    domainAD: Dominio AD
+    groupDN: DN grupos
+    userAD: Usuario AD
+    passwordAD: Contraseña AD
+    domainPart: DN usuarios (sin la parte del dominio)
+    Verify certificate: Verificar certificado
+    testConnection: Probar conexión
+    success: ¡Conexión con Samba establecida!