ADD: Visualización del historial de cambios del backend

package.json

@@ -2,7 +2,7 @@
   "name": "notsoweb.frontend",
   "copyright": "Notsoweb Software Inc.",
   "private": true,
-  "version": "0.9.6",
+  "version": "0.9.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/Holos/Skeleton/Sidebar/Left.vue

@@ -45,7 +45,7 @@ const year = (new Date).getFullYear();
                 &copy {{year}} {{ APP_COPYRIGHT }}
               </p>
             <p class="text-center text-xs text-yellow-500 cursor-pointer">
-              <RouterLink :to="{name:'changelogs'}"> APP {{ APP_VERSION }} </RouterLink> API {{ $page.app.version }}
+              <RouterLink :to="{name:'changelogs.app'}"> APP {{ APP_VERSION }} </RouterLink> <RouterLink :to="{name:'changelogs.core'}"> API {{ $page.app.version }} </RouterLink>
             </p>
           </div>
         </div>

src/pages/Changelogs/App.vue

@@ -64,6 +64,13 @@ const changelogs = [
             'ADD: Recuperación de contraseña.'
         ],
         date: '2025-01-06'
+    },
+    {
+        version: '0.9.7',
+        details: [
+            'ADD: Visualización de historial de cambios del backend.',
+        ],
+        date: '2025-01-17'
     }
 ]
 </script>

src/pages/Changelogs/Core.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { api } from '@Services/Api';
+
+import Table from '@Holos/TableSimple.vue';
+
+const changelogs = ref([]);
+
+onMounted(() => {
+    api.get(route('changelogs'), {
+        onSuccess: (response) => {
+            changelogs.value = response;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <h1>{{ $t('changelogs.title') }}</h1>
+        <Table :items="changelogs">
+            <template #head>
+                <th 
+                    v-text="$t('version')"
+                    class="w-10" 
+                />
+                <th 
+                    v-text="$t('date')"
+                    class="w-24" 
+                />
+                <th 
+                    v-text="$t('details')"
+                />
+            </template>
+            <template #body="{items}">
+                <template v-for="item in items">
+                    <tr>
+                        <td class="table-item">
+                            <span v-text="item.version" />
+                        </td>
+                        <td class="table-item">
+                            <span v-text="item.date" />
+                        </td>
+                        <td class="table-item">
+                            <ul class="list-disc list-inside">
+                                <li v-for="detail in item.changes" v-text="detail" />
+                            </ul>
+                        </td>
+                    </tr>
+                </template>
+            </template>
+        </Table>
+    </div>
+</template>

src/router/Index.js

@@ -111,7 +111,18 @@ const router = createRouter({
         {
             path: '/changelogs',
             name: 'changelogs',
-            component: () => import('@Pages/Changelogs.vue')
+            children: [
+                {
+                    path: '',
+                    name: 'changelogs.app',
+                    component: () => import('@Pages/Changelogs/App.vue')
+                },
+                {
+                    path: 'core',
+                    name: 'changelogs.core',
+                    component: () => import('@Pages/Changelogs/Core.vue')
+                }
+            ]
         },
         {
             path: '/:pathMatch(.*)*',