# dpanel-id/frontend architecture

> Architecture diagram of the GitHub repository dpanel-id/frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/dpanel-id/frontend
- Repository: https://github.com/dpanel-id/frontend

## Overview

dPanel is a React dashboard for managing infrastructure and applications, alongside public documentation. Its main user-facing workflow is to create or manage an application, then inspect its releases, deployments, and logs. The tree shows distinct creation, application-detail, backend-resource, and administration areas, plus shared API and event-handling layers. The README documents the product capabilities and API connection; only a few sampled files expose concrete internal wiring, so other likely workflow links are marked unverified rather than asserted.

Main entry points: [`src/app/_with-app-layout/route.tsx`](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/route.tsx) (Dashboard shell), [`src/app/_with-app-layout/applications/$id/-EventController.tsx`](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/%24id/-EventController.tsx) (Application details), [`src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts`](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts) (Server management), [`src/app/_with-app-layout/applications/create/-usecase/submit-flow.ts`](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/create/-usecase/submit-flow.ts) (Application creation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_product["Product shell"]
  node_dashboard["Dashboard shell<br/>[route.tsx]"]
  node_docs["Public docs<br/>[$.tsx]"]
  node_assistant["AI assistant"]
end

subgraph group_apps["Applications"]
  node_appcreate["Application creation<br/>[submit-flow.ts]"]
  node_applist["Application catalog<br/>[index.tsx]"]
  node_appdetail["Application details"]
  node_releases["Releases and deploys<br/>[index.tsx]"]
  node_applogs["Application logs<br/>[index.tsx]"]
end

subgraph group_infra["Infrastructure"]
  node_servers["Server management"]
  node_cloud["Cloud projects"]
  node_domains["Domains and DNS"]
  node_loadbalancers["Load balancers<br/>[use-create.ts]"]
  node_teams["Teams"]
end

subgraph group_admin["Administration"]
  node_adminresources["Resource administration<br/>[index.tsx]"]
  node_admintasks["Task administration<br/>[index.tsx]"]
  node_workers["Workspace workers<br/>[WorkersCard.tsx]"]
end

subgraph group_shared["Shared runtime"]
  node_serverapi["Server API client<br/>[server.ts]"]
  node_handler["Server action wiring"]
end

node_user(("Dashboard user"))
node_api{{"dPanel API"}}

node_user -->|"uses"| node_dashboard
node_dashboard -->|"requests data"| node_api
node_user -->|"visits"| node_docs
node_dashboard -.->|"starts creation"| node_appcreate
node_appcreate -.->|"adds application"| node_applist
node_applist -.->|"opens application"| node_appdetail
node_appdetail -.->|"shows releases"| node_releases
node_appdetail -.->|"shows logs"| node_applogs
node_dashboard -.->|"manages servers"| node_servers
node_dashboard -.->|"manages projects"| node_cloud
node_dashboard -.->|"manages domains"| node_domains
node_dashboard -.->|"manages routing"| node_loadbalancers
node_dashboard -.->|"manages teams"| node_teams
node_dashboard -.->|"administers resources"| node_adminresources
node_dashboard -.->|"administers tasks"| node_admintasks
node_dashboard -.->|"configures workers"| node_workers
node_dashboard -.->|"opens assistant"| node_assistant
node_servers -->|"builds actions"| node_handler
node_handler -->|"emits actions"| node_servers
node_serverapi -.->|"calls endpoints"| node_api

click node_dashboard "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/route.tsx"
click node_docs "https://github.com/dpanel-id/frontend/blob/dev/src/app/%24.tsx"
click node_appcreate "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/create/-usecase/submit-flow.ts"
click node_applist "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/-view/index.tsx"
click node_appdetail "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/%24id/-EventController.tsx"
click node_releases "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/%24id/-view/Releases/index.tsx"
click node_applogs "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/%24id/-view/AppLogs/index.tsx"
click node_servers "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts"
click node_cloud "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/backend/cloud-projects/-view/MainList/useCloudProjectHandlers.ts"
click node_domains "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/backend/domain/-usecase/use-add-new-domain.ts"
click node_loadbalancers "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/backend/load-balancers/create/-usecase/use-create.ts"
click node_teams "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/teams/-EventController.tsx"
click node_adminresources "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/administrator/resources/-model/resources-data/index.tsx"
click node_admintasks "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/administrator/tasks/-model/tasks-data/index.tsx"
click node_workers "https://github.com/dpanel-id/frontend/blob/dev/src/features/workspace-workers/view/WorkersCard.tsx"
click node_assistant "https://github.com/dpanel-id/frontend/blob/dev/src/features/ai-assistant/usecase/useAssistantChat.ts"
click node_serverapi "https://github.com/dpanel-id/frontend/blob/dev/src/shared/api/server.ts"
click node_handler "https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.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_dashboard,node_docs,node_assistant,node_user toneBlue
class node_appcreate,node_applist,node_appdetail,node_releases,node_applogs toneAmber
class node_servers,node_cloud,node_domains,node_loadbalancers,node_teams,node_api toneMint
class node_adminresources,node_admintasks,node_workers toneRose
class node_serverapi,node_handler toneIndigo
```

## Components

### Product shell

- [Dashboard shell](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/route.tsx): `src/app/_with-app-layout/route.tsx`
- [Public docs](https://github.com/dpanel-id/frontend/blob/dev/src/app/%24.tsx): `src/app/$.tsx`
- [AI assistant](https://github.com/dpanel-id/frontend/blob/dev/src/features/ai-assistant/usecase/useAssistantChat.ts): `src/features/ai-assistant/usecase/useAssistantChat.ts`

### Applications

- [Application creation](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/create/-usecase/submit-flow.ts): `src/app/_with-app-layout/applications/create/-usecase/submit-flow.ts`
- [Application catalog](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/-view/index.tsx): `src/app/_with-app-layout/applications/-view/index.tsx`
- [Application details](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/%24id/-EventController.tsx): `src/app/_with-app-layout/applications/$id/-EventController.tsx`
- [Releases and deploys](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/%24id/-view/Releases/index.tsx): `src/app/_with-app-layout/applications/$id/-view/Releases/index.tsx`
- [Application logs](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/applications/%24id/-view/AppLogs/index.tsx): `src/app/_with-app-layout/applications/$id/-view/AppLogs/index.tsx`

### Infrastructure

- [Server management](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts): `src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts`
- [Cloud projects](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/backend/cloud-projects/-view/MainList/useCloudProjectHandlers.ts): `src/app/_with-app-layout/backend/cloud-projects/-view/MainList/useCloudProjectHandlers.ts`
- [Domains and DNS](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/backend/domain/-usecase/use-add-new-domain.ts): `src/app/_with-app-layout/backend/domain/-usecase/use-add-new-domain.ts`
- [Load balancers](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/backend/load-balancers/create/-usecase/use-create.ts): `src/app/_with-app-layout/backend/load-balancers/create/-usecase/use-create.ts`
- [Teams](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/teams/-EventController.tsx): `src/app/_with-app-layout/teams/-EventController.tsx`

### Administration

- [Resource administration](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/administrator/resources/-model/resources-data/index.tsx): `src/app/_with-app-layout/administrator/resources/-model/resources-data/index.tsx`
- [Task administration](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/administrator/tasks/-model/tasks-data/index.tsx): `src/app/_with-app-layout/administrator/tasks/-model/tasks-data/index.tsx`
- [Workspace workers](https://github.com/dpanel-id/frontend/blob/dev/src/features/workspace-workers/view/WorkersCard.tsx): `src/features/workspace-workers/view/WorkersCard.tsx`

### Shared runtime

- [Server API client](https://github.com/dpanel-id/frontend/blob/dev/src/shared/api/server.ts): `src/shared/api/server.ts`
- [Server action wiring](https://github.com/dpanel-id/frontend/blob/dev/src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts): `src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts`

### Other components

- **Dashboard user**
- **dPanel API**

## Connections

- Dashboard user → Dashboard shell: uses (evidence: `README.md`)
- Dashboard shell → dPanel API: requests data (evidence: `README.md`)
- Dashboard user → Public docs: visits (evidence: `README.md`)
- Dashboard shell → Application creation: starts creation
- Application creation → Application catalog: adds application
- Application catalog → Application details: opens application
- Application details → Releases and deploys: shows releases
- Application details → Application logs: shows logs
- Dashboard shell → Server management: manages servers
- Dashboard shell → Cloud projects: manages projects
- Dashboard shell → Domains and DNS: manages domains
- Dashboard shell → Load balancers: manages routing
- Dashboard shell → Teams: manages teams
- Dashboard shell → Resource administration: administers resources
- Dashboard shell → Task administration: administers tasks
- Dashboard shell → Workspace workers: configures workers
- Dashboard shell → AI assistant: opens assistant
- Server management → Server action wiring: builds actions (evidence: `src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts`)
- Server action wiring → Server management: emits actions (evidence: `src/app/_with-app-layout/servers/-view/ServerList/useServerHandlers.ts`)
- Server API client → dPanel API: calls endpoints