# kary317/intelligent-recruitment-front architecture

> Architecture diagram of the GitHub repository kary317/intelligent-recruitment-front, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kary317/intelligent-recruitment-front
- Repository: https://github.com/kary317/intelligent-recruitment-front

## Overview

This is an HR recruiting frontend: users sign in, then manage positions, candidates and their hiring stages, employees, and HR department assignments. The Vue router mounts the relevant pages; those pages call domain API modules, which share an Axios request layer, while user credentials live in a Pinia store. Resume upload/parsing and candidate AI scoring are visible API capabilities, though their external implementation is outside this repository. Several page/API connections are supported by the SOURCE INDEX rather than full excerpts; other unsampled page behavior is summarized without inferring internal calls.

Main entry points: [`src/router/index.ts`](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/router/index.ts) (Route dispatch), [`src/apis/request.ts`](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/request.ts) (HTTP client), [`src/apis/user_api.ts`](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/user_api.ts) (User and HR API), [`src/apis/position_api.ts`](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/position_api.ts) (Position API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["Vue entry<br/>[main.ts]"]
  node_root["App router view<br/>[App.vue]"]
  node_routes["Route dispatch<br/>[index.ts]"]
  node_mainlayout["Main layout<br/>[MainLayout.vue]"]
end

subgraph group_identity["Identity and access"]
  node_authlayout["Auth layout<br/>[AuthLayout.vue]"]
  node_login["Login and registration<br/>[index.vue]"]
  node_register["Registration page<br/>[index.vue]"]
  node_userstore["User session<br/>[user.ts]"]
  node_userapi["User and HR API<br/>[user_api.ts]"]
end

subgraph group_recruiting["Recruiting workflow"]
  node_dashboard["Recruitment dashboard<br/>[index.vue]"]
  node_dashapi["Dashboard API<br/>[dashboard_api.ts]"]
  node_positions["Position management<br/>[index.vue]"]
  node_positionapi["Position API<br/>[position_api.ts]"]
  node_candidates["Candidate pipeline<br/>[index.vue]"]
  node_candidateadd["Candidate intake<br/>[add.vue]"]
  node_candidateapi["Candidate and resume API<br/>[candidate_api.ts]"]
end

subgraph group_workforce["Workforce administration"]
  node_employees["Employee management<br/>[index.vue]"]
  node_hrmanage["HR administration<br/>[index.vue]"]
  node_settings["Settings page<br/>[index.vue]"]
end

subgraph group_transport["API transport"]
  node_request["HTTP client<br/>[request.ts]"]
  node_loading["Full-screen loading<br/>[fullLoading.ts]"]
end

node_employee(("HR user"))
node_service["HR backend"]

node_employee -->|"uses app"| node_entry
node_entry -->|"mounts"| node_root
node_entry -->|"installs router"| node_routes
node_root -->|"renders routes"| node_routes
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_register
node_routes -->|"routes to"| node_mainlayout
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_positions
node_routes -->|"routes to"| node_candidates
node_routes -->|"routes to"| node_candidateadd
node_routes -->|"routes to"| node_employees
node_routes -->|"routes to"| node_hrmanage
node_routes -->|"routes to"| node_settings
node_login -->|"uses layout"| node_authlayout
node_register -->|"uses layout"| node_authlayout
node_login -->|"authenticates through"| node_userapi
node_register -->|"registers through"| node_userapi
node_login -->|"updates session"| node_userstore
node_employees -->|"reads session"| node_userstore
node_employees -->|"manages employees"| node_userapi
node_hrmanage -->|"manages HR"| node_userapi
node_dashboard -->|"loads metrics"| node_dashapi
node_positions -->|"manages positions"| node_positionapi
node_candidates -->|"manages pipeline"| node_candidateapi
node_candidates -->|"loads positions"| node_positionapi
node_candidateadd -->|"submits intake"| node_candidateapi
node_candidateadd -->|"loads positions"| node_positionapi
node_candidateadd -->|"uses loading"| node_loading
node_userapi -->|"sends requests"| node_request
node_positionapi -->|"sends requests"| node_request
node_candidateapi -->|"sends requests"| node_request
node_dashapi -->|"sends requests"| node_request
node_request -->|"reads token"| node_userstore
node_request -->|"HTTP requests"| node_service
node_candidateapi -->|"uses position types"| node_positionapi

click node_entry "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/main.ts"
click node_root "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/App.vue"
click node_routes "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/router/index.ts"
click node_mainlayout "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/components/MainLayout.vue"
click node_authlayout "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/components/AuthLayout.vue"
click node_login "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/login/index.vue"
click node_register "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/register/index.vue"
click node_userstore "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/stores/user.ts"
click node_userapi "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/user_api.ts"
click node_dashboard "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/dashboard/index.vue"
click node_dashapi "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/dashboard_api.ts"
click node_positions "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/positions/index.vue"
click node_positionapi "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/position_api.ts"
click node_candidates "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/candidates/index.vue"
click node_candidateadd "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/candidates/add.vue"
click node_candidateapi "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/candidate_api.ts"
click node_employees "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/employees/index.vue"
click node_hrmanage "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/hr-management/index.vue"
click node_settings "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/settings/index.vue"
click node_request "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/request.ts"
click node_loading "https://github.com/kary317/intelligent-recruitment-front/blob/master/src/utils/fullLoading.ts"

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_entry,node_root,node_routes,node_mainlayout,node_employee toneBlue
class node_authlayout,node_login,node_register,node_userstore,node_userapi toneAmber
class node_dashboard,node_dashapi,node_positions,node_positionapi,node_candidates,node_candidateadd,node_candidateapi toneMint
class node_employees,node_hrmanage,node_settings toneRose
class node_request,node_loading,node_service toneIndigo
```

## Components

### Application shell

- [Vue entry](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/main.ts): `src/main.ts`
- [App router view](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/App.vue): `src/App.vue`
- [Route dispatch](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/router/index.ts): `src/router/index.ts`
- [Main layout](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/components/MainLayout.vue): `src/components/MainLayout.vue`

### Identity and access

- [Auth layout](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/components/AuthLayout.vue): `src/components/AuthLayout.vue`
- [Login and registration](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/login/index.vue): `src/pages/login/index.vue`
- [Registration page](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/register/index.vue): `src/pages/register/index.vue`
- [User session](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/stores/user.ts): `src/stores/user.ts`
- [User and HR API](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/user_api.ts): `src/apis/user_api.ts`

### Recruiting workflow

- [Recruitment dashboard](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/dashboard/index.vue): `src/pages/dashboard/index.vue`
- [Dashboard API](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/dashboard_api.ts): `src/apis/dashboard_api.ts`
- [Position management](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/positions/index.vue): `src/pages/positions/index.vue`
- [Position API](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/position_api.ts): `src/apis/position_api.ts`
- [Candidate pipeline](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/candidates/index.vue): `src/pages/candidates/index.vue`
- [Candidate intake](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/candidates/add.vue): `src/pages/candidates/add.vue`
- [Candidate and resume API](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/candidate_api.ts): `src/apis/candidate_api.ts`

### Workforce administration

- [Employee management](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/employees/index.vue): `src/pages/employees/index.vue`
- [HR administration](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/hr-management/index.vue): `src/pages/hr-management/index.vue`
- [Settings page](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/pages/settings/index.vue): `src/pages/settings/index.vue`

### API transport

- [HTTP client](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/apis/request.ts): `src/apis/request.ts`
- [Full-screen loading](https://github.com/kary317/intelligent-recruitment-front/blob/master/src/utils/fullLoading.ts): `src/utils/fullLoading.ts`

### Other components

- **HR user**
- **HR backend**

## Connections

- HR user → Vue entry: uses app (evidence: `src/main.ts`)
- Vue entry → App router view: mounts (evidence: `src/main.ts`)
- Vue entry → Route dispatch: installs router (evidence: `src/main.ts`)
- App router view → Route dispatch: renders routes (evidence: `src/App.vue`)
- Route dispatch → Login and registration: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Registration page: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Main layout: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Recruitment dashboard: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Position management: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Candidate pipeline: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Candidate intake: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Employee management: routes to (evidence: `src/router/index.ts`)
- Route dispatch → HR administration: routes to (evidence: `src/router/index.ts`)
- Route dispatch → Settings page: routes to (evidence: `src/router/index.ts`)
- Login and registration → Auth layout: uses layout (evidence: `src/pages/login/index.vue`)
- Registration page → Auth layout: uses layout (evidence: `src/pages/register/index.vue`)
- Login and registration → User and HR API: authenticates through (evidence: `src/pages/login/index.vue`)
- Registration page → User and HR API: registers through (evidence: `src/pages/register/index.vue`)
- Login and registration → User session: updates session (evidence: `src/pages/login/index.vue`)
- Employee management → User session: reads session (evidence: `src/pages/employees/index.vue`)
- Employee management → User and HR API: manages employees (evidence: `src/pages/employees/index.vue`)
- HR administration → User and HR API: manages HR (evidence: `src/pages/hr-management/index.vue`)
- Recruitment dashboard → Dashboard API: loads metrics (evidence: `src/pages/dashboard/index.vue`)
- Position management → Position API: manages positions (evidence: `src/pages/positions/index.vue`)
- Candidate pipeline → Candidate and resume API: manages pipeline (evidence: `src/pages/candidates/index.vue`)
- Candidate pipeline → Position API: loads positions (evidence: `src/pages/candidates/index.vue`)
- Candidate intake → Candidate and resume API: submits intake (evidence: `src/pages/candidates/add.vue`)
- Candidate intake → Position API: loads positions (evidence: `src/pages/candidates/add.vue`)
- Candidate intake → Full-screen loading: uses loading (evidence: `src/pages/candidates/add.vue`)
- User and HR API → HTTP client: sends requests (evidence: `src/apis/user_api.ts`)
- Position API → HTTP client: sends requests (evidence: `src/apis/position_api.ts`)
- Candidate and resume API → HTTP client: sends requests (evidence: `src/apis/candidate_api.ts`)
- Dashboard API → HTTP client: sends requests (evidence: `src/apis/dashboard_api.ts`)
- HTTP client → User session: reads token (evidence: `src/apis/request.ts`)
- HTTP client → HR backend: HTTP requests (evidence: `src/apis/request.ts`)
- Candidate and resume API → Position API: uses position types (evidence: `src/apis/candidate_api.ts`)