erwinfloresmarca/client-hoteles

Purpose and runtime

This is a Vue 3 + TypeScript single-page administrative application, built and served with Vite and using Element Plus UI components. It adapts the upstream admin template into domain modules for categories, people, rooms, salons, status, and a “cuaderno de novedades” (incident/news log). Browser entry is index.html, which loads src/main.ts; the root component is src/App.vue.

Application bootstrap

src/main.ts initializes the Vue application and attaches global application concerns. src/App.vue hosts the routed application. Environment-specific build/serve behavior is supplied through Vite and environment files:

• src/main.ts

• src/App.vue

• vite.config.ts

• .env.build, .env.serve-dev, .env.serve-prod

Routing, authentication, and authorization

The router defines navigation and feature routes, with route groups for administration and users. A permission layer coordinates access control and likely dynamic route/menu availability from application state. Login, redirect, and unauthorized/not-found views form the authentication and failure boundaries.

• src/router/index.ts

• src/router/modules/administracion.ts

• src/router/modules/user.ts

• src/permission.ts

• src/directive/permission.ts

• src/views/login/Login.vue

State and session boundary

Centralized store modules maintain app UI state, authenticated-user state, route permissions, and visited tags. Authentication utilities and request infrastructure sit at the boundary between browser session state and backend API calls.

• src/store/index.ts

• src/store/modules/user.ts

• src/store/modules/permission.ts

• src/store/modules/app.ts

• src/utils/auth.ts

• src/utils/axiosReq.ts

Admin shell and navigation

Authenticated routes render within a reusable application shell: sidebar, navbar, breadcrumbs, main content outlet, and tags/visited-view navigation. This separates global navigation/chrome from feature-page rendering and handles responsive layout behavior.

• src/layout/Layout.vue

• src/layout/components/AppMain.vue

• src/layout/components/Navbar.vue

• src/layout/components/Sidebar/Sidebar.vue

• src/layout/components/TagsView/index.vue

• src/layout/hook/ResizeHandler.ts

API and domain features

src/api is the client-facing domain API layer, organized by backend resource rather than page. Views consume those APIs to implement CRUD-style administration for core entities; dialogs and selection components encapsulate feature-local editing and lookup UI. Shared API resource typing defines the transport contract.

• src/api/resource.ts

• src/api/persona.ts

• src/api/habitacion.ts

• src/api/salon.ts

• src/api/cuadernoDeNovedad.ts

• src/types/apiResources.ts

Primary user workflows

Feature pages are organized as domain roots with nested components for forms, lists, and selectors. The notable workflow is creating and reviewing novedades; other modules manage categorized people and physical-space records. Pagination/filtering are shared UI-level mechanisms, not backend ownership.

• src/views/cuadernoDeNovedades/index.vue

• src/views/cuadernoDeNovedades/components/CuadernoDeNovedades.vue

• src/views/persona/index.vue

• src/views/habitacion/index.vue

• src/views/salon/index.vue

• src/components/FilterResource/index.vue

Cross-cutting UI and error handling

Global styles, icons, filters, mixins, directives, and hooks provide reusable presentation and behavioral conventions. Error logging is exposed as an application feature; WebSocket support is suggested by a shared mixin, but its external endpoint and integration are not identifiable from the supplied tree.

• src/hooks/errorLogHook.ts

• src/views/error-log/ErrorLog.vue

• src/mixins/websocketMixin.js

• src/icons/SvgIcon.vue

• src/styles/index.scss