# chanya-grace-2546/toktick_3456 architecture

> Architecture diagram of the GitHub repository chanya-grace-2546/toktick_3456, 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/chanya-grace-2546/toktick_3456
- Repository: https://github.com/chanya-grace-2546/toktick_3456

## Overview

TokTickIT is a role-based IT ticketing application. Users authenticate, then requesters create and track tickets with attachments and comments; IT staff work a shared queue and manage ticket ownership, priority, status, and notes; administrators manage accounts. The React client routes role-specific pages through its API module to the Express application, which persists application and session data through Prisma/PostgreSQL. The README establishes the major capabilities; sampled source confirms routing, auth state, several API calls, and server-side ticket/auth behavior, but not every route-to-handler detail.

Main entry points: [`client/src/api.ts`](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/api.ts) (API client), [`server/src/app.ts`](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/app.ts) (HTTP routes), [`client/src/App.tsx`](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/App.tsx) (Route application), [`server/src/prisma.ts`](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/prisma.ts) (Prisma access)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["Route application<br/>[App.tsx]"]
  node_authctx["Auth context<br/>[AuthContext.tsx]"]
  node_guard["Role guards<br/>[AuthGuard.tsx]"]
  node_login["Login and password<br/>[Login.tsx]"]
  node_requesterui["Requester tickets<br/>[MyTickets.tsx]"]
  node_createui["Ticket creation<br/>[CreateTicket.tsx]"]
  node_detailui["Requester detail<br/>[TicketDetail.tsx]"]
  node_queueui["Staff queue"]
  node_staffdetail["Staff ticket detail"]
  node_adminui["User management<br/>[UserManagement.tsx]"]
  node_clientapi["API client<br/>[api.ts]"]
end

subgraph group_server["Application API"]
  node_routes["HTTP routes<br/>[app.ts]"]
end

subgraph group_auth["Identity and access"]
  node_authlogic["Session and authorization<br/>[auth.ts]"]
  node_adminlogic["Account administration<br/>[adminUsers.ts]"]
end

subgraph group_ticketing["Ticket operations"]
  node_ticketvalidation["Ticket validation"]
  node_ticketnumber["Ticket numbering<br/>[ticketNumber.ts]"]
end

subgraph group_data["Persistence"]
  node_prisma["Prisma access<br/>[prisma.ts]"]
  node_schema["Domain schema<br/>[schema.prisma]"]
end

node_requester(("Requester"))
node_staff(("IT staff"))
node_admin(("Administrator"))
node_http(("HTTP client"))
node_postgres[("PostgreSQL")]

node_requester -->|"uses requester pages"| node_app
node_staff -->|"uses staff pages"| node_app
node_admin -->|"uses admin pages"| node_app
node_app -->|"guards routes"| node_guard
node_app -->|"provides auth state"| node_authctx
node_authctx -->|"requests session"| node_clientapi
node_login -->|"signs in"| node_authctx
node_requesterui -->|"lists tickets"| node_clientapi
node_createui -->|"creates ticket"| node_clientapi
node_detailui -->|"manages ticket"| node_clientapi
node_queueui -->|"loads queue"| node_clientapi
node_staffdetail -->|"updates ticket"| node_clientapi
node_adminui -->|"manages accounts"| node_clientapi
node_clientapi -->|"sends requests"| node_http
node_http -->|"calls API"| node_routes
node_routes -->|"checks access"| node_authlogic
node_routes -->|"validates ticket"| node_ticketvalidation
node_routes -->|"generates number"| node_ticketnumber
node_routes -->|"manages users"| node_adminlogic
node_routes -->|"reads and writes"| node_prisma
node_authlogic -->|"checks sessions"| node_prisma
node_ticketnumber -->|"creates ticket"| node_prisma
node_prisma -->|"queries data"| node_postgres
node_schema -->|"defines data model"| node_prisma

click node_app "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/App.tsx"
click node_authctx "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/context/AuthContext.tsx"
click node_guard "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/components/AuthGuard.tsx"
click node_login "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/Login.tsx"
click node_requesterui "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/MyTickets.tsx"
click node_createui "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/CreateTicket.tsx"
click node_detailui "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/TicketDetail.tsx"
click node_queueui "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/StaffTicketQueue.tsx"
click node_staffdetail "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/StaffTicketDetail.tsx"
click node_adminui "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/UserManagement.tsx"
click node_clientapi "https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/api.ts"
click node_routes "https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/app.ts"
click node_authlogic "https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/auth.ts"
click node_ticketvalidation "https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/validateCreateTicket.ts"
click node_ticketnumber "https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/ticketNumber.ts"
click node_adminlogic "https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/adminUsers.ts"
click node_prisma "https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/prisma.ts"
click node_schema "https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/prisma/schema.prisma"

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_app,node_authctx,node_guard,node_login,node_requesterui,node_createui,node_detailui,node_queueui,node_staffdetail,node_adminui,node_clientapi,node_http toneBlue
class node_routes,node_postgres toneAmber
class node_authlogic,node_adminlogic,node_requester toneMint
class node_ticketvalidation,node_ticketnumber toneRose
class node_prisma,node_schema,node_staff,node_admin toneIndigo
```

## Components

### Web client

- [Route application](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Auth context](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/context/AuthContext.tsx): `client/src/context/AuthContext.tsx`
- [Role guards](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/components/AuthGuard.tsx): `client/src/components/AuthGuard.tsx`
- [Login and password](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/Login.tsx): `client/src/pages/Login.tsx`
- [Requester tickets](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/MyTickets.tsx): `client/src/pages/MyTickets.tsx`
- [Ticket creation](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/CreateTicket.tsx): `client/src/pages/CreateTicket.tsx`
- [Requester detail](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/TicketDetail.tsx): `client/src/pages/TicketDetail.tsx`
- [Staff queue](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/StaffTicketQueue.tsx): `client/src/pages/StaffTicketQueue.tsx`
- [Staff ticket detail](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/StaffTicketDetail.tsx): `client/src/pages/StaffTicketDetail.tsx`
- [User management](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/pages/UserManagement.tsx): `client/src/pages/UserManagement.tsx`
- [API client](https://github.com/chanya-grace-2546/toktick_3456/blob/main/client/src/api.ts): `client/src/api.ts`

### Application API

- [HTTP routes](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/app.ts): `server/src/app.ts`

### Identity and access

- [Session and authorization](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/auth.ts): `server/src/auth.ts`
- [Account administration](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/adminUsers.ts): `server/src/adminUsers.ts`

### Ticket operations

- [Ticket validation](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/validateCreateTicket.ts): `server/src/validateCreateTicket.ts`
- [Ticket numbering](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/ticketNumber.ts): `server/src/ticketNumber.ts`

### Persistence

- [Prisma access](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/src/prisma.ts): `server/src/prisma.ts`
- [Domain schema](https://github.com/chanya-grace-2546/toktick_3456/blob/main/server/prisma/schema.prisma): `server/prisma/schema.prisma`

### Other components

- **Requester**
- **IT staff**
- **Administrator**
- **HTTP client**
- **PostgreSQL**

## Connections

- Requester → Route application: uses requester pages
- IT staff → Route application: uses staff pages
- Administrator → Route application: uses admin pages
- Route application → Role guards: guards routes
- Route application → Auth context: provides auth state
- Auth context → API client: requests session
- Login and password → Auth context: signs in
- Requester tickets → API client: lists tickets
- Ticket creation → API client: creates ticket
- Requester detail → API client: manages ticket
- Staff queue → API client: loads queue
- Staff ticket detail → API client: updates ticket
- User management → API client: manages accounts
- API client → HTTP client: sends requests
- HTTP client → HTTP routes: calls API
- HTTP routes → Session and authorization: checks access
- HTTP routes → Ticket validation: validates ticket
- HTTP routes → Ticket numbering: generates number
- HTTP routes → Account administration: manages users
- HTTP routes → Prisma access: reads and writes
- Session and authorization → Prisma access: checks sessions
- Ticket numbering → Prisma access: creates ticket
- Prisma access → PostgreSQL: queries data
- Domain schema → Prisma access: defines data model