src/composables/getUrl.js

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+export async function getUrl(route, appName = 'salix') {
+    let url;
+    const env = process.env.NODE_ENV === 'development' ? 'dev' : process.env.NODE_ENV;
+    const filter = {
+        where: {and: [
+            {appName: appName},
+            {environment:  env}
+        ]}
+    };
+
+    await axios.get('Urls/findOne', {params: {filter}})
+        .then(res => {
+            url = res.data.url + route;
+        });
+
+    return url;
+}

src/pages/Claim/Card/ClaimCard.vue

@@ -1,12 +1,36 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import ClaimDescriptor from './ClaimDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import ClaimDescriptor from './ClaimDescriptor.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
+const route = useRoute();
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+const claimSections = [
+    { name: 'Notes', url: '/note/index', icon: 'draft' },
+    { name: 'Development', url: '/development', icon: 'vn:traceability' },
+    { name: 'Action', url: '/action', icon: 'vn:actions' },
+];
+
+let salixUrl;
+onMounted(async () => {
+    salixUrl = await getUrl(`claim/${entityId.value}`);
+});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
@@ -22,6 +46,22 @@ const { t } = useI18n();
             <ClaimDescriptor />
             <QSeparator />
             <LeftMenu source="card" />
+            <QSeparator />
+            <QList>
+                <QItem
+                    v-for="section in claimSections"
+                    :key="section.name"
+                    active-class="text-primary"
+                    :href="salixUrl + section.url"
+                    clickable
+                    v-ripple
+                >
+                    <QItemSection avatar>
+                        <QIcon :name="section.icon" />
+                    </QItemSection>
+                    <QItemSection> {{ t(section.name) }} </QItemSection>
+                </QItem>
+            </QList>
         </QScrollArea>
     </QDrawer>
     <QPageContainer>
@@ -35,4 +75,8 @@ const { t } = useI18n();
 es:
     Search claim: Buscar reclamación
     You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
+    Details: Detalles
+    Notes: Notas
+    Development: Trazabilidad
+    Action: Acción
 </i18n>