# aruku-interactive/ifm-core-ui architecture

> Architecture diagram of the GitHub repository aruku-interactive/ifm-core-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aruku-interactive/ifm-core-ui
- Repository: https://github.com/aruku-interactive/ifm-core-ui

## Overview

This is a React/Vite web-app template with authentication flows, protected pages, and an example users page. The main workflow routes users through sign-in/sign-up and account confirmation, then uses the authentication context to call auth services, persist session cookies, notify users, and navigate. A separate example page fetches and displays users. Edges are limited to relationships shown in excerpts, the source index, or README; some page-to-form and provider wiring is not shown.

Main entry points: [`src/configs/routes.tsx`](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/configs/routes.tsx) (Route table), [`src/context/AuthContext.tsx`](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/context/AuthContext.tsx) (Auth provider), [`src/pages/example-users/Users.tsx`](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/Users.tsx) (Users page), [`src/layouts/PrivateLayout.tsx`](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/layouts/PrivateLayout.tsx) (Private layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and pages"]
  node_routes["Route table<br/>[routes.tsx]"]
  node_authlayout["Auth layout<br/>[AuthLayout.tsx]"]
  node_privatelayout["Private layout<br/>[PrivateLayout.tsx]"]
end

subgraph group_authentication["Authentication"]
  node_authpages["Auth pages"]
  node_authforms["Auth forms"]
  node_authcontext["Auth provider<br/>[AuthContext.tsx]"]
end

subgraph group_services["Services and state"]
  node_authstate["Loading state<br/>[useAuthState.tsx]"]
  node_authservice["Auth service<br/>[auth.service.ts]"]
  node_apiservice["API service<br/>[api.service.ts]"]
  node_axios["HTTP transport<br/>[axios.tsx]"]
  node_cookies["Cookie service<br/>[cookie.service.ts]"]
  node_notifications["Notifications"]
end

subgraph group_example["Example users"]
  node_userspage["Users page<br/>[Users.tsx]"]
  node_userslist["Users list<br/>[UsersList.tsx]"]
  node_usershook["Users hook<br/>[useUsers.ts]"]
  node_usersservice["Users service<br/>[users.service.ts]"]
end

node_browser(("User"))
node_backend["Application API"]
node_placeholder["JSONPlaceholder API"]

node_browser -->|"navigates"| node_routes
node_routes -->|"routes auth"| node_authlayout
node_routes -->|"routes private"| node_privatelayout
node_routes -->|"routes auth"| node_authpages
node_routes -->|"routes users"| node_userspage
node_authcontext -->|"uses state"| node_authstate
node_authcontext -->|"calls auth"| node_authservice
node_authcontext -->|"reads and writes"| node_cookies
node_authcontext -->|"notifies"| node_notifications
node_authpages -.->|"uses forms"| node_authforms
node_privatelayout -->|"accesses provider"| node_authcontext
node_authservice -->|"calls API"| node_apiservice
node_apiservice -->|"delegates HTTP"| node_axios
node_axios -.->|"sends requests"| node_backend
node_userspage -->|"uses hook"| node_usershook
node_userspage -->|"renders list"| node_userslist
node_usershook -->|"loads users"| node_usersservice
node_usersservice -->|"fetches users"| node_placeholder

click node_routes "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/configs/routes.tsx"
click node_authlayout "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/layouts/AuthLayout.tsx"
click node_privatelayout "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/layouts/PrivateLayout.tsx"
click node_authpages "https://github.com/aruku-interactive/ifm-core-ui/tree/main/src/pages/auth"
click node_authforms "https://github.com/aruku-interactive/ifm-core-ui/tree/main/src/components/auth"
click node_authcontext "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/context/AuthContext.tsx"
click node_authstate "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/hooks/auth/useAuthState.tsx"
click node_authservice "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/auth.service.ts"
click node_apiservice "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/api.service.ts"
click node_axios "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/configs/axios.tsx"
click node_cookies "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/cookie.service.ts"
click node_notifications "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/notification.service.ts"
click node_userspage "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/Users.tsx"
click node_userslist "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/components/UsersList.tsx"
click node_usershook "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/hooks/useUsers.ts"
click node_usersservice "https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/services/users.service.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_routes,node_authlayout,node_privatelayout,node_browser toneBlue
class node_authpages,node_authforms,node_authcontext toneAmber
class node_authstate,node_authservice,node_apiservice,node_axios,node_cookies,node_notifications,node_backend,node_placeholder toneMint
class node_userspage,node_userslist,node_usershook,node_usersservice toneRose
```

## Components

### Routing and pages

- [Route table](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/configs/routes.tsx): `src/configs/routes.tsx`
- [Auth layout](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/layouts/AuthLayout.tsx): `src/layouts/AuthLayout.tsx`
- [Private layout](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/layouts/PrivateLayout.tsx): `src/layouts/PrivateLayout.tsx`

### Authentication

- [Auth pages](https://github.com/aruku-interactive/ifm-core-ui/tree/main/src/pages/auth): `src/pages/auth`
- [Auth forms](https://github.com/aruku-interactive/ifm-core-ui/tree/main/src/components/auth): `src/components/auth`
- [Auth provider](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`

### Services and state

- [Loading state](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/hooks/auth/useAuthState.tsx): `src/hooks/auth/useAuthState.tsx`
- [Auth service](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/auth.service.ts): `src/services/auth.service.ts`
- [API service](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/api.service.ts): `src/services/api.service.ts`
- [HTTP transport](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/configs/axios.tsx): `src/configs/axios.tsx`
- [Cookie service](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/cookie.service.ts): `src/services/cookie.service.ts`
- [Notifications](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/services/notification.service.ts): `src/services/notification.service.ts`

### Example users

- [Users page](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/Users.tsx): `src/pages/example-users/Users.tsx`
- [Users list](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/components/UsersList.tsx): `src/pages/example-users/components/UsersList.tsx`
- [Users hook](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/hooks/useUsers.ts): `src/pages/example-users/hooks/useUsers.ts`
- [Users service](https://github.com/aruku-interactive/ifm-core-ui/blob/main/src/pages/example-users/services/users.service.ts): `src/pages/example-users/services/users.service.ts`

### Other components

- **User**
- **Application API**
- **JSONPlaceholder API**

## Connections

- User → Route table: navigates
- Route table → Auth layout: routes auth (evidence: `src/configs/routes.tsx`)
- Route table → Private layout: routes private (evidence: `src/configs/routes.tsx`)
- Route table → Auth pages: routes auth (evidence: `src/configs/routes.tsx`)
- Route table → Users page: routes users (evidence: `src/configs/routes.tsx`)
- Auth provider → Loading state: uses state (evidence: `src/context/AuthContext.tsx`)
- Auth provider → Auth service: calls auth (evidence: `src/context/AuthContext.tsx`)
- Auth provider → Cookie service: reads and writes (evidence: `src/context/AuthContext.tsx`)
- Auth provider → Notifications: notifies (evidence: `src/context/AuthContext.tsx`)
- Auth pages → Auth forms: uses forms (evidence: `src/pages/auth/ResendConfirmationCode.tsx`)
- Private layout → Auth provider: accesses provider (evidence: `src/layouts/PrivateLayout.tsx`)
- Auth service → API service: calls API (evidence: `src/services/auth.service.ts`)
- API service → HTTP transport: delegates HTTP (evidence: `src/services/api.service.ts`)
- HTTP transport → Application API: sends requests
- Users page → Users hook: uses hook (evidence: `src/pages/example-users/Users.tsx`)
- Users page → Users list: renders list (evidence: `src/pages/example-users/Users.tsx`)
- Users hook → Users service: loads users (evidence: `src/pages/example-users/hooks/useUsers.ts`)
- Users service → JSONPlaceholder API: fetches users (evidence: `src/pages/example-users/services/users.service.ts`)