diff --git a/src/components/Holos/Dropdown.vue b/src/components/Holos/Dropdown.vue index a794f48..83eba7f 100644 --- a/src/components/Holos/Dropdown.vue +++ b/src/components/Holos/Dropdown.vue @@ -9,7 +9,7 @@ const props = defineProps({ contentClasses: { default: () => [ 'pt-1', - 'bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt' + '!bg-white dark:!bg-primary-d !text-gray-800 dark:!text-primary-dt' ], type: Array }, diff --git a/src/components/Holos/Layout/RhApp.vue b/src/components/Holos/Layout/RhApp.vue new file mode 100644 index 0000000..c3f6332 --- /dev/null +++ b/src/components/Holos/Layout/RhApp.vue @@ -0,0 +1,57 @@ + + + \ No newline at end of file diff --git a/src/components/Holos/Searcher.vue b/src/components/Holos/Searcher.vue index 3224708..1bdb48d 100644 --- a/src/components/Holos/Searcher.vue +++ b/src/components/Holos/Searcher.vue @@ -86,7 +86,7 @@ const clear = () => { diff --git a/src/components/Holos/Skeleton/Header.vue b/src/components/Holos/Skeleton/Header.vue index 5dc2abe..c23d72f 100644 --- a/src/components/Holos/Skeleton/Header.vue +++ b/src/components/Holos/Skeleton/Header.vue @@ -32,7 +32,7 @@ const loader = useLoader() class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50" :class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}" > -
+
{{ $page.user.name }}
- - {{$t('profile')}} - -
-
- - {{$t('auth.logout')}} - -
+ + {{$t('profile')}} + +
+
+ + {{$t('auth.logout')}} + +
diff --git a/src/components/Holos/Skeleton/RhSidebar.vue b/src/components/Holos/Skeleton/RhSidebar.vue new file mode 100644 index 0000000..b0e0715 --- /dev/null +++ b/src/components/Holos/Skeleton/RhSidebar.vue @@ -0,0 +1,54 @@ + + + \ No newline at end of file diff --git a/src/components/Holos/Skeleton/Sidebar/Link.vue b/src/components/Holos/Skeleton/Sidebar/Link.vue index d2c206a..1d5e97e 100644 --- a/src/components/Holos/Skeleton/Sidebar/Link.vue +++ b/src/components/Holos/Skeleton/Sidebar/Link.vue @@ -13,15 +13,26 @@ const vroute = useRoute(); const props = defineProps({ icon: String, name: String, - to: String + to: String, + active: { + type: Boolean, + default: false + } }); const classes = computed(() => { - let status = props.to === vroute.name - ? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d' - : 'border-transparent'; + let isActive = props.active || props.to === vroute.name; + + if (isActive) { + return 'flex items-center px-4 py-3 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent'; + } else { + return 'flex items-center px-4 py-3 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200'; + } +}); - return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition` +const iconClasses = computed(() => { + let isActive = props.active || props.to === vroute.name; + return isActive ? 'text-white' : 'text-gray-500'; }); const closeSidebar = () => { @@ -39,19 +50,21 @@ const closeSidebar = () => { > + class="text-sm font-medium" + > + {{ name }} + diff --git a/src/layouts/RhLayout.vue b/src/layouts/RhLayout.vue new file mode 100644 index 0000000..d9805de --- /dev/null +++ b/src/layouts/RhLayout.vue @@ -0,0 +1,61 @@ + + \ No newline at end of file diff --git a/src/pages/Academic/Index.vue b/src/pages/Academic/Index.vue new file mode 100644 index 0000000..9cf0bff --- /dev/null +++ b/src/pages/Academic/Index.vue @@ -0,0 +1,152 @@ + + + \ No newline at end of file diff --git a/src/pages/Additional/Index.vue b/src/pages/Additional/Index.vue new file mode 100644 index 0000000..6e576ad --- /dev/null +++ b/src/pages/Additional/Index.vue @@ -0,0 +1,151 @@ + + + \ No newline at end of file diff --git a/src/pages/Dashboard/Index.vue b/src/pages/Dashboard/Index.vue index 1b0dd60..6dfd144 100644 --- a/src/pages/Dashboard/Index.vue +++ b/src/pages/Dashboard/Index.vue @@ -1,9 +1,119 @@ \ No newline at end of file diff --git a/src/pages/Employees/Index.vue b/src/pages/Employees/Index.vue new file mode 100644 index 0000000..afa5afe --- /dev/null +++ b/src/pages/Employees/Index.vue @@ -0,0 +1,166 @@ + + + \ No newline at end of file diff --git a/src/pages/Payroll/Index.vue b/src/pages/Payroll/Index.vue new file mode 100644 index 0000000..03acdad --- /dev/null +++ b/src/pages/Payroll/Index.vue @@ -0,0 +1,145 @@ + + + \ No newline at end of file diff --git a/src/pages/Security/Index.vue b/src/pages/Security/Index.vue new file mode 100644 index 0000000..f0ea0e7 --- /dev/null +++ b/src/pages/Security/Index.vue @@ -0,0 +1,166 @@ + + + \ No newline at end of file diff --git a/src/router/Index.js b/src/router/Index.js index 448bef5..28d3ba2 100644 --- a/src/router/Index.js +++ b/src/router/Index.js @@ -16,7 +16,7 @@ const router = createRouter({ routes: [ { path: '/', - component: () => import('@Layouts/AppLayout.vue'), + component: () => import('@Layouts/RhLayout.vue'), name: 'root', meta: { title: 'Inicio', @@ -27,40 +27,79 @@ const router = createRouter({ { path: '', name: 'index', - redirect: '/dashboard', - meta: { - title: 'Inicio', - icon: 'home', - }, + redirect: '/dashboard' }, { path: 'dashboard', name: 'dashboard.index', component: () => import('@Pages/Dashboard/Index.vue'), + meta: { + title: 'Dashboard', + icon: 'grid_view', + } }, { - path: 'profile', - children: [ - { - path: '', - name: 'profile.show', - component: () => import('@Pages/Profile/Show.vue'), - meta: { - title: 'Perfil', - icon: 'person', - }, - }, - { - path: 'notifications', - children: [ + path: 'employees', + name: 'employees.index', + component: () => import('@Pages/Employees/Index.vue'), + meta: { + title: 'Empleados', + icon: 'people', + } + }, + { + path: 'academic', + name: 'academic.index', + component: () => import('@Pages/Academic/Index.vue'), + meta: { + title: 'Historial Académico', + icon: 'school', + } + }, + { + path: 'security', + name: 'security.index', + component: () => import('@Pages/Security/Index.vue'), + meta: { + title: 'Seguridad y Salud', + icon: 'security', + } + }, + { + path: 'payroll', + name: 'payroll.index', + component: () => import('@Pages/Payroll/Index.vue'), + meta: { + title: 'Nómina', + icon: 'payments', + } + }, + { + path: 'additional', + name: 'additional.index', + component: () => import('@Pages/Additional/Index.vue'), + meta: { + title: 'Información Adicional', + icon: 'info', + } + }, { - path: '', - name: 'profile.notifications.index', - component: () => import('@Pages/Profile/Notifications/Index.vue') - } - ] - }, - ] + path: 'profile', + name: 'profile.show', + component: () => import('@Pages/Profile/Show.vue'), + meta: { + title: 'Perfil', + icon: 'person', + } + }, + { + path: 'profile/notifications', + name: 'profile.notifications.index', + component: () => import('@Pages/Profile/Notifications/Index.vue'), + meta: { + title: 'Notificaciones', + icon: 'notifications', + } }, ], },