# luisivan147/panel-sielse-itil architecture

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

- Interactive diagram: https://gitdiagram.com/luisivan147/panel-sielse-itil
- Repository: https://github.com/luisivan147/panel-sielse-itil

## Overview

This is a browser-based ITIL support-ticket portal. Users can sign in, create tickets with requester, service, incident, and attachment details, search and filter tickets, update their status, and record ratings or responses. The dashboard page coordinates these workflows using in-memory React state initialized from sample records; the login identity is kept in browser local storage. The graph follows the sampled page and callback wiring; other routes and components are not inferred from their names alone.

Main entry points: [`src/app/dashboard/page.tsx`](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/app/dashboard/page.tsx) (Dashboard page), [`src/components/auth/LoginForm.tsx`](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/auth/LoginForm.tsx) (Login form), [`src/types/dashboard.ts`](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/types/dashboard.ts) (Ticket and rating types), [`src/components/dashboard/AddRecordForm.tsx`](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/AddRecordForm.tsx) (Ticket creation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_auth["Authentication"]
  node_login_page["Login page<br/>[page.tsx]"]
  node_login_form["Login form<br/>[LoginForm.tsx]"]
end

subgraph group_workspace["Ticket workspace"]
  node_dashboard_page["Dashboard page<br/>[page.tsx]"]
  node_workspace_nav["Workspace navigation<br/>[Sidebar.tsx]"]
  node_welcome_view["Welcome view<br/>[WelcomeView.tsx]"]
  node_record_form["Ticket creation<br/>[AddRecordForm.tsx]"]
  node_record_search["Ticket search<br/>[SearchRecords.tsx]"]
  node_rating_form["Rating and response<br/>[RatingForm.tsx]"]
  node_dashboard_header["Dashboard header<br/>[Header.tsx]"]
end

subgraph group_domain["Domain model"]
  node_mock_data["Sample tickets and ratings<br/>[mockData.ts]"]
  node_ticket_types["Ticket and rating types<br/>[dashboard.ts]"]
end

node_user(("Portal user"))
node_browser_storage[("Browser local storage")]

node_user -->|"opens"| node_login_page
node_login_page -->|"renders"| node_login_form
node_user -->|"submits credentials"| node_login_form
node_login_form -->|"stores identity"| node_browser_storage
node_login_form -->|"navigates on success"| node_dashboard_page
node_user -->|"uses workspace"| node_dashboard_page
node_dashboard_page -->|"reads identity"| node_browser_storage
node_dashboard_page -->|"initializes ticket state"| node_mock_data
node_dashboard_page -->|"renders and wires navigation"| node_workspace_nav
node_dashboard_page -->|"renders"| node_dashboard_header
node_dashboard_page -->|"renders by view"| node_welcome_view
node_dashboard_page -->|"renders and handles ticket creation"| node_record_form
node_dashboard_page -->|"passes tickets and status handler"| node_record_search
node_dashboard_page -->|"passes tickets and rating handlers"| node_rating_form
node_record_form -->|"submits new ticket"| node_dashboard_page
node_record_search -->|"requests status update"| node_dashboard_page
node_rating_form -->|"submits rating and status update"| node_dashboard_page
node_record_form -->|"uses ticket shape"| node_ticket_types
node_record_search -->|"uses ticket and rating shapes"| node_ticket_types
node_rating_form -->|"uses ticket and rating shapes"| node_ticket_types
node_mock_data -->|"defines sample data as"| node_ticket_types

click node_login_page "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/app/login/page.tsx"
click node_login_form "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/auth/LoginForm.tsx"
click node_dashboard_page "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/app/dashboard/page.tsx"
click node_workspace_nav "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/Sidebar.tsx"
click node_welcome_view "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/WelcomeView.tsx"
click node_record_form "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/AddRecordForm.tsx"
click node_record_search "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/SearchRecords.tsx"
click node_rating_form "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/RatingForm.tsx"
click node_dashboard_header "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/Header.tsx"
click node_mock_data "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/data/mockData.ts"
click node_ticket_types "https://github.com/luisivan147/panel-sielse-itil/blob/main/src/types/dashboard.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_login_page,node_login_form,node_user toneBlue
class node_dashboard_page,node_workspace_nav,node_welcome_view,node_record_form,node_record_search,node_rating_form,node_dashboard_header,node_browser_storage toneAmber
class node_mock_data,node_ticket_types toneMint
```

## Components

### Authentication

- [Login page](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/app/login/page.tsx): `src/app/login/page.tsx`
- [Login form](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/auth/LoginForm.tsx): `src/components/auth/LoginForm.tsx`

### Ticket workspace

- [Dashboard page](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/app/dashboard/page.tsx): `src/app/dashboard/page.tsx`
- [Workspace navigation](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/Sidebar.tsx): `src/components/dashboard/Sidebar.tsx`
- [Welcome view](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/WelcomeView.tsx): `src/components/dashboard/WelcomeView.tsx`
- [Ticket creation](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/AddRecordForm.tsx): `src/components/dashboard/AddRecordForm.tsx`
- [Ticket search](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/SearchRecords.tsx): `src/components/dashboard/SearchRecords.tsx`
- [Rating and response](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/RatingForm.tsx): `src/components/dashboard/RatingForm.tsx`
- [Dashboard header](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/components/dashboard/Header.tsx): `src/components/dashboard/Header.tsx`

### Domain model

- [Sample tickets and ratings](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/data/mockData.ts): `src/data/mockData.ts`
- [Ticket and rating types](https://github.com/luisivan147/panel-sielse-itil/blob/main/src/types/dashboard.ts): `src/types/dashboard.ts`

### Other components

- **Portal user**
- **Browser local storage**

## Connections

- Portal user → Login page: opens
- Login page → Login form: renders
- Portal user → Login form: submits credentials
- Login form → Browser local storage: stores identity
- Login form → Dashboard page: navigates on success
- Portal user → Dashboard page: uses workspace
- Dashboard page → Browser local storage: reads identity
- Dashboard page → Sample tickets and ratings: initializes ticket state
- Dashboard page → Workspace navigation: renders and wires navigation
- Dashboard page → Dashboard header: renders
- Dashboard page → Welcome view: renders by view
- Dashboard page → Ticket creation: renders and handles ticket creation
- Dashboard page → Ticket search: passes tickets and status handler
- Dashboard page → Rating and response: passes tickets and rating handlers
- Ticket creation → Dashboard page: submits new ticket
- Ticket search → Dashboard page: requests status update
- Rating and response → Dashboard page: submits rating and status update
- Ticket creation → Ticket and rating types: uses ticket shape
- Ticket search → Ticket and rating types: uses ticket and rating shapes
- Rating and response → Ticket and rating types: uses ticket and rating shapes
- Sample tickets and ratings → Ticket and rating types: defines sample data as