From 2ef554a2a8c0b89fffaed097310a304a306459ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mois=C3=A9s=20de=20Jes=C3=BAs=20Cort=C3=A9s=20Castellanos?=
 <ing.moisesdejesuscortesc@notsoweb.com>
Date: Thu, 16 Jan 2025 21:42:49 -0600
Subject: [PATCH] =?UTF-8?q?ADD:=20Visualizaci=C3=B3n=20del=20historial=20d?=
 =?UTF-8?q?e=20cambios=20del=20backend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 .../Holos/Skeleton/Sidebar/Left.vue           |  2 +-
 .../{Changelogs.vue => Changelogs/App.vue}    |  7 +++
 src/pages/Changelogs/Core.vue                 | 54 +++++++++++++++++++
 src/router/Index.js                           | 13 ++++-
 5 files changed, 75 insertions(+), 3 deletions(-)
 rename src/pages/{Changelogs.vue => Changelogs/App.vue} (95%)
 create mode 100644 src/pages/Changelogs/Core.vue

diff --git a/package.json b/package.json
index 983f949..5da6ca3 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Holos/Skeleton/Sidebar/Left.vue b/src/components/Holos/Skeleton/Sidebar/Left.vue
index 4b415e3..be3c4c9 100644
--- a/src/components/Holos/Skeleton/Sidebar/Left.vue
+++ b/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>
diff --git a/src/pages/Changelogs.vue b/src/pages/Changelogs/App.vue
similarity index 95%
rename from src/pages/Changelogs.vue
rename to src/pages/Changelogs/App.vue
index 433bbe9..de19c7b 100644
--- a/src/pages/Changelogs.vue
+++ b/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>
diff --git a/src/pages/Changelogs/Core.vue b/src/pages/Changelogs/Core.vue
new file mode 100644
index 0000000..de43a4f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index ead24ef..e6d9f3e 100644
--- a/src/router/Index.js
+++ b/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(.*)*',