From e42af7db7e005283f528fbdc811561dbf964ee75 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: Mon, 30 Dec 2024 15:56:25 -0600
Subject: [PATCH] ADD: Historial de cambios

---
 .../Holos/Skeleton/Sidebar/Left.vue           |  8 +-
 src/pages/Changelogs.vue                      | 87 +++++++++++++++++++
 src/router/Index.js                           |  5 ++
 3 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Changelogs.vue

diff --git a/src/components/Holos/Skeleton/Sidebar/Left.vue b/src/components/Holos/Skeleton/Sidebar/Left.vue
index b635c4c..4b415e3 100644
--- a/src/components/Holos/Skeleton/Sidebar/Left.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Left.vue
@@ -41,11 +41,11 @@ const year = (new Date).getFullYear();
             </ul>
           </div>
           <div class="mb-4 px-5 space-y-1">
-            <p class="block text-center text-xs">
-              &copy {{year}} {{ APP_COPYRIGHT }}
-            </p>
+              <p class="block text-center text-xs">
+                &copy {{year}} {{ APP_COPYRIGHT }}
+              </p>
             <p class="text-center text-xs text-yellow-500 cursor-pointer">
-              APP {{ APP_VERSION }} API {{ $page.app.version }}
+              <RouterLink :to="{name:'changelogs'}"> APP {{ APP_VERSION }} </RouterLink> API {{ $page.app.version }}
             </p>
           </div>
         </div>
diff --git a/src/pages/Changelogs.vue b/src/pages/Changelogs.vue
new file mode 100644
index 0000000..c8848e0
--- /dev/null
+++ b/src/pages/Changelogs.vue
@@ -0,0 +1,87 @@
+<script setup>
+import Table from '@Holos/TableSimple.vue';
+
+const changelogs = [
+    {
+        version: '0.9.0',
+        details: [
+            'INIT: Commit inicial',
+            'ADD: Generación de plantilla',
+        ],
+        date: '2024-12-13'
+    },
+    {
+        version: '0.9.1',
+        details: [
+            'ADD: Script de instalación.',
+            'ADD: Versionado de la aplicación.',
+            'ADD: Logo administrado en en backend.'
+        ],
+        date: '2024-12-16'
+    },
+    {
+        version: '0.9.2',
+        details: [
+            'ADD: Asignación de roles a usuarios.',
+            'FIX: Correcciones visuales en Layout.'
+        ],
+        date: '2024-12-16'
+    },
+    {
+        version: '0.9.3',
+        details: [
+            'FIX: Creación de usuarios.',
+            'ADD: Notificaciones en tiempo real.',
+            'ADD: Usuarios conectados en tiempo real.'
+        ],
+        date: '2024-12-27'
+    },
+    {
+        version: '0.9.4',
+        details: [
+            'ADD: Creación de nuevos roles con permisos personalizados.',
+            'ADD: Recarga de permisos en tiempo real para usuarios en linea.',
+            'FIX: Tooltip de botones en tablas.'
+        ],
+        date: '2024-12-28'
+    }
+]
+</script>
+
+<template>
+    <div>
+        <h1>{{ $t('changelogs.title') }}</h1>
+        <Table :items="changelogs.reverse()">
+            <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.details.reverse()" 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 e9e0891..1a3e6cb 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -92,6 +92,11 @@ const router = createRouter({
                 }
             ]
         },
+        {
+            path: '/changelogs',
+            name: 'changelogs',
+            component: () => import('@Pages/Changelogs.vue')
+        },
         {
             path: '/:pathMatch(.*)*',
             name: '404',