UPDATE: Correcciones visuales en administración usuarios

src/components/Holos/Modal/Elements/Header.vue

@@ -8,6 +8,7 @@ defineProps({
 
 <template>
     <div class="text-center p-6 bg-primary dark:bg-primary-d border-b">
+        <slot />
         <p class="pt-2 text-lg font-bold text-gray-50">
             {{ title }}
         </p>

src/components/Holos/PageHeader.vue

@@ -17,7 +17,8 @@ defineProps({
         />
     </div>
     <div class="flex w-full justify-end py-[0.31rem] mb-2 border-y-2 border-page-t dark:border-page-dt">
-        <div id="buttons" class="flex items-center space-x-2 text-sm">
+        <div id="buttons" class="flex items-center space-x-1 text-sm">
+            <slot />
             <RouterLink :to="$view({ name: 'index' })">
                 <IconButton
                     :title="$t('home')"

src/lang/es.js

@@ -358,6 +358,7 @@ export default {
     unknown:'Desconocido',
     update:'Actualizar',
     updated:'Actualizado',
+    updated_at:'Fecha actualización',
     updateFail:'Error al actualizar',
     unreaded:'No leído',
     user:'Usuario',

src/pages/Admin/Users/Create.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { api, useForm } from '@Services/Api';
-import { viewTo } from './Module';
+import { transl, viewTo } from './Module';
 
 import IconButton      from '@Holos/Button/Icon.vue'
 import Input           from '@Holos/Form/Input.vue';
@@ -50,7 +50,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <PageHeader>
+    <PageHeader :title="transl('create.title')">
         <RouterLink :to="viewTo({ name: 'index' })">
             <IconButton
                 class="text-white"

src/pages/Admin/Users/Edit.vue

@@ -2,7 +2,7 @@
 import { onMounted } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo } from './Module';
+import { viewTo, apiTo , transl } from './Module';
 
 import IconButton      from '@Holos/Button/Icon.vue'
 import PageHeader      from '@Holos/PageHeader.vue';
@@ -40,7 +40,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <PageHeader>
+    <PageHeader :title="transl('edit.title')">
         <RouterLink :to="viewTo({ name: 'index' })">
             <IconButton
                 class="text-white"

src/pages/Admin/Users/Modals/Show.vue

@@ -1,8 +1,9 @@
 <script setup>
+import { getDateTime } from '@Controllers/DateController';
+
 import Header     from '@Holos/Modal/Elements/Header.vue';
 import ShowModal  from '@Holos/Modal/Show.vue';
 import GoogleIcon from '@Shared/GoogleIcon.vue';
-
 /** Eventos */
 defineEmits([
     'close', 
@@ -21,31 +22,48 @@ defineProps({
     >
         <Header
             :title="model.name"
-            :subtitle="model.full_last_name"
+            :subtitle="model.last_name"
         >
+            <div class="flex w-full flex-col">
+                <div class="flex w-full justify-center items-center">
+                    <img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
+                </div>
+            </div>
         </Header>
         <div class="py-2 border-b">
-            <div class="px-4 py-2 flex">
+            <div class="flex w-full px-4 py-2">
                 <GoogleIcon 
                     class="text-xl text-success"
                     name="contact_mail"
                 />
                 <div class="pl-3">
                     <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('contact') }}
+                        {{ $t('details') }}
+                    </p>
+                    <p>
+                        <b>{{ $t('name') }}: </b>
+                        {{ model.full_name }}
                     </p>
                     <p>
                         <b>{{ $t('phone') }}: </b>
                         <a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
-                            {{ model.phone }}
+                            {{ model.phone ?? '-' }}
                         </a>
                     </p>
                     <p>
-                        <b>{{ $t('email') }}: </b>
+                        <b>{{ $t('email.title') }}: </b>
                         <a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
                             {{ model.email }}
                         </a>
                     </p>
+                    <p>
+                        <b>{{ $t('created_at') }}: </b>
+                        {{ getDateTime(model.created_at) }}
+                    </p>
+                    <p>
+                        <b>{{ $t('updated_at') }}: </b>
+                        {{ getDateTime(model.updated_at) }}
+                    </p>
                 </div>
             </div>
         </div>

src/pages/Admin/Users/Settings.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { api } from '@Services/Api';
-import { viewTo, apiTo } from './Module';
+import { viewTo, apiTo, transl } from './Module';
 
 import IconButton      from '@Holos/Button/Icon.vue';
 import PageHeader      from '@Holos/PageHeader.vue';
@@ -25,35 +25,35 @@ onMounted(() => {
 </script>
 
 <template>
-        <PageHeader>
+    <PageHeader :title="transl('settings')">
-          <RouterLink :to="viewTo({ name: 'index' })">
+      <RouterLink :to="viewTo({ name: 'index' })">
-              <IconButton
+          <IconButton
-                class="text-white"
+            class="text-white"
-                icon="arrow_back"
+            icon="arrow_back"
-                :title="$t('return')"
+            :title="$t('return')"
-                outline
+            outline
-              />
+          />
-          </RouterLink>
+      </RouterLink>
-        </PageHeader>
+    </PageHeader>
-        <div class="flex w-full pt-2">
+    <div class="flex w-full pt-2">
-            <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-lg">
+        <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-lg">
-                <p class="pt-2 text-lg font-bold text-gray-50">
+            <p class="pt-2 text-lg font-bold text-gray-50">
-                    {{ user?.name }}
+                {{ user?.name }}
-                </p>
+            </p>
-                <p class="text-sm text-gray-100">
+            <p class="text-sm text-gray-100">
-                    {{ user?.full_last_name }}
+                {{ user?.full_last_name }}
-                </p>
+            </p>
-            </div>
-        </div>
-        <div class="w-full mt-12 space-y-4">
-            <UpdatePassword
-                :userId="vroute.params.id"
-            />
-            <SectionBorder />
-            <Roles
-                :userId="vroute.params.id"
-            />
-            <SectionBorder />
         </div>
+    </div>
+    <div class="w-full mt-12 space-y-4">
+        <UpdatePassword
+            :userId="vroute.params.id"
+        />
+        <SectionBorder />
+        <Roles
+            :userId="vroute.params.id"
+        />
+        <SectionBorder />
+    </div>
 </template>