# erwinfloresmarca/client-hoteles architecture

> Architecture diagram of the GitHub repository erwinfloresmarca/client-hoteles, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/erwinfloresmarca/client-hoteles
- Repository: https://github.com/erwinfloresmarca/client-hoteles

## Overview

#### 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`

Main entry points: [`src/utils/axiosReq.ts`](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/utils/axiosReq.ts) (Session & HTTP client), [`src/router/index.ts`](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/router/index.ts) (Router), [`src/layout/components/AppMain.vue`](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/components/AppMain.vue) (Feature outlet), [`src/layout/Layout.vue`](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/Layout.vue) (Authenticated layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_bootstrap["Bootstrap"]
  node_vite{{"Vite build/serve<br/>tooling<br/>[vite.config.ts]"}}
  node_entry["Vue entry<br/>bootstrap<br/>[main.ts]"]
  node_app["Root application<br/>Vue root<br/>[App.vue]"]
end

subgraph group_access["Access &amp; State"]
  node_router["Router<br/>navigation<br/>[index.ts]"]
  node_route_modules["Route modules<br/>route definitions<br/>[administracion.ts]"]
  node_permission["Permission layer<br/>route guard<br/>[permission.ts]"]
  node_stores["Application stores<br/>state modules<br/>[index.ts]"]
  node_session["Session &amp; HTTP client<br/>browser/API boundary<br/>[axiosReq.ts]"]
  node_login["Login<br/>auth view<br/>[Login.vue]"]
end

subgraph group_shell["Admin Shell"]
  node_layout["Authenticated layout<br/>Vue shell<br/>[Layout.vue]"]
  node_navigation["Navigation chrome<br/>shell components<br/>[Sidebar.vue]"]
  node_content_outlet["Feature outlet<br/>routed content<br/>[AppMain.vue]"]
end

subgraph group_features["Domain Features"]
  node_resource_api["Resource API layer<br/>domain API client<br/>[resource.ts]"]
  node_novedades_api["Novedades API<br/>domain API client"]
  node_novedades["Cuaderno de novedades<br/>feature workflow<br/>[index.vue]"]
  node_people["People management<br/>feature page<br/>[index.vue]"]
  node_spaces["Rooms &amp; salons<br/>feature pages<br/>[index.vue]"]
  node_filter["Resource filtering<br/>shared UI component<br/>[index.vue]"]
end

node_backend[("Backend API<br/>external service")]
node_error_log["Error log<br/>operational view<br/>[ErrorLog.vue]"]

node_vite -->|"builds and serves"| node_entry
node_entry -->|"mounts"| node_app
node_app -->|"hosts"| node_router
node_router -->|"loads"| node_route_modules
node_router -->|"guarded by"| node_permission
node_permission -->|"uses access state"| node_stores
node_login -->|"authenticates through"| node_session
node_session -->|"updates session state"| node_stores
node_session -->|"sends requests"| node_backend
node_router -->|"renders authenticated routes in"| node_layout
node_layout -->|"composes"| node_navigation
node_layout -->|"contains"| node_content_outlet
node_content_outlet -->|"renders"| node_novedades
node_content_outlet -->|"renders"| node_people
node_content_outlet -->|"renders"| node_spaces
node_novedades -->|"uses"| node_novedades_api
node_people -->|"uses"| node_resource_api
node_spaces -->|"uses"| node_resource_api
node_resource_api -->|"uses HTTP client"| node_session
node_novedades_api -->|"uses HTTP client"| node_session
node_novedades -->|"uses"| node_filter
node_error_log -.->|"reads application errors"| node_stores

click node_vite "https://github.com/erwinfloresmarca/client-hoteles/blob/master/vite.config.ts"
click node_entry "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/main.ts"
click node_app "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/App.vue"
click node_router "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/router/index.ts"
click node_route_modules "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/router/modules/administracion.ts"
click node_permission "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/permission.ts"
click node_stores "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/store/index.ts"
click node_session "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/utils/axiosReq.ts"
click node_login "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/login/Login.vue"
click node_layout "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/Layout.vue"
click node_navigation "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/components/Sidebar/Sidebar.vue"
click node_content_outlet "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/components/AppMain.vue"
click node_resource_api "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/api/resource.ts"
click node_novedades_api "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/api/cuadernoDeNovedad.ts"
click node_novedades "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/cuadernoDeNovedades/index.vue"
click node_people "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/persona/index.vue"
click node_spaces "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/habitacion/index.vue"
click node_filter "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/components/FilterResource/index.vue"
click node_error_log "https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/error-log/ErrorLog.vue"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_vite,node_entry,node_app toneBlue
class node_router,node_route_modules,node_permission,node_stores,node_session,node_login toneAmber
class node_layout,node_navigation,node_content_outlet toneMint
class node_resource_api,node_novedades_api,node_novedades,node_people,node_spaces,node_filter toneRose
class node_backend,node_error_log toneNeutral
```

## Components

### Bootstrap

- [Vite build/serve](https://github.com/erwinfloresmarca/client-hoteles/blob/master/vite.config.ts): tooling · Environment-specific SPA build and development server. · `vite.config.ts`
- [Vue entry](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/main.ts): bootstrap · `src/main.ts`
- [Root application](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/App.vue): Vue root · `src/App.vue`

### Access & State

- [Router](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/router/index.ts): navigation · Defines application and feature navigation routes. · `src/router/index.ts`
- [Route modules](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/router/modules/administracion.ts): route definitions · Administration and user route groups. · `src/router/modules/administracion.ts`
- [Permission layer](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/permission.ts): route guard · Coordinates authorization and route/menu availability. · `src/permission.ts`
- [Application stores](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/store/index.ts): state modules · User, permission, UI, and visited-tag state. · `src/store/index.ts`
- [Session & HTTP client](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/utils/axiosReq.ts): browser/API boundary · Authentication utilities and Axios request infrastructure. · `src/utils/axiosReq.ts`
- [Login](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/login/Login.vue): auth view · `src/views/login/Login.vue`

### Admin Shell

- [Authenticated layout](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/Layout.vue): Vue shell · Responsive chrome for authenticated feature routes. · `src/layout/Layout.vue`
- [Navigation chrome](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/components/Sidebar/Sidebar.vue): shell components · Sidebar, navbar, breadcrumbs, and visited tags. · `src/layout/components/Sidebar/Sidebar.vue`
- [Feature outlet](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/layout/components/AppMain.vue): routed content · `src/layout/components/AppMain.vue`

### Domain Features

- [Resource API layer](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/api/resource.ts): domain API client · Resource-oriented client contract for domain CRUD calls. · `src/api/resource.ts`
- [Novedades API](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/api/cuadernoDeNovedad.ts): domain API client · `src/api/cuadernoDeNovedad.ts`
- [Cuaderno de novedades](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/cuadernoDeNovedades/index.vue): feature workflow · Create and review incident/news log records. · `src/views/cuadernoDeNovedades/index.vue`
- [People management](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/persona/index.vue): feature page · `src/views/persona/index.vue`
- [Rooms & salons](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/habitacion/index.vue): feature pages · Physical-space administration. · `src/views/habitacion/index.vue`
- [Resource filtering](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/components/FilterResource/index.vue): shared UI component · Shared pagination and filtering UI. · `src/components/FilterResource/index.vue`

### Other components

- **Backend API**: external service
- [Error log](https://github.com/erwinfloresmarca/client-hoteles/blob/master/src/views/error-log/ErrorLog.vue): operational view · `src/views/error-log/ErrorLog.vue`

## Connections

- Vite build/serve → Vue entry: builds and serves
- Vue entry → Root application: mounts
- Root application → Router: hosts
- Router → Route modules: loads
- Router → Permission layer: guarded by
- Permission layer → Application stores: uses access state
- Login → Session & HTTP client: authenticates through
- Session & HTTP client → Application stores: updates session state
- Session & HTTP client → Backend API: sends requests
- Router → Authenticated layout: renders authenticated routes in
- Authenticated layout → Navigation chrome: composes
- Authenticated layout → Feature outlet: contains
- Feature outlet → Cuaderno de novedades: renders
- Feature outlet → People management: renders
- Feature outlet → Rooms & salons: renders
- Cuaderno de novedades → Novedades API: uses
- People management → Resource API layer: uses
- Rooms & salons → Resource API layer: uses
- Resource API layer → Session & HTTP client: uses HTTP client
- Novedades API → Session & HTTP client: uses HTTP client
- Cuaderno de novedades → Resource filtering: uses
- Error log → Application stores: reads application errors