# ashrafyawar/network-management-system-with-vuejs-django-postgresql architecture

> Architecture diagram of the GitHub repository ashrafyawar/network-management-system-with-vuejs-django-postgresql, 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/ashrafyawar/network-management-system-with-vuejs-django-postgresql
- Repository: https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql

## Overview

This repository is a network-management admin application: a Vue interface provides account entry, dashboard summaries, and network-resource views, backed by a Django REST app with admin, device, statistics, demo-request, risky-device, and blocked-IP data models. The dashboard’s device and statistics requests are visible, but the excerpts do not establish their URL-to-view mapping or database configuration. Other front-end resource views are included from the source index; their detailed behavior was not sampled.

Main entry points: [`Front-End-VUEjs/src/router/index.js`](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/router/index.js) (Page router), [`Back-End-Django_Rest_Framework/AdminApp/views.py`](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/views.py) (API handlers), [`Front-End-VUEjs/src/views/AdminDashboardView.vue`](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardView.vue) (Dashboard summary), [`Back-End-Django_Rest_Framework/AdminApp/models.py`](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/models.py) (Domain models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue client"]
  node_app["Vue application<br/>[App.vue]"]
  node_router["Page router<br/>[index.js]"]
  node_login["Login and signup<br/>[LoginView.vue]"]
  node_summary["Dashboard summary"]
  node_dashboardbase["Dashboard navigation"]
  node_cards["Status cards"]
  node_devices["Device management"]
  node_groups["Device groups"]
  node_sites["Site management"]
  node_clusters["Edge clusters"]
  node_accesspoints["Access points"]
  node_applications["Applications"]
  node_microslicing["Microslicing"]
  node_about["System guide"]
  node_support["Tech support"]
end

subgraph group_backend["Django API"]
  node_api_routes["API routing<br/>[urls.py]"]
  node_api_views["API handlers<br/>[views.py]"]
  node_serializers["REST serializers<br/>[serializers.py]"]
end

subgraph group_domain["Network data"]
  node_models["Domain models<br/>[models.py]"]
end

subgraph group_persistence["Persistence"]
  node_db[("Database")]
end

node_admin(("Administrator"))

node_admin -->|"opens"| node_app
node_app -->|"uses"| node_router
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_summary
node_router -->|"routes to"| node_devices
node_router -->|"routes to"| node_groups
node_router -->|"routes to"| node_sites
node_router -->|"routes to"| node_clusters
node_router -->|"routes to"| node_accesspoints
node_router -->|"routes to"| node_applications
node_router -->|"routes to"| node_microslicing
node_router -->|"routes to"| node_about
node_router -->|"routes to"| node_support
node_summary -->|"renders"| node_dashboardbase
node_summary -->|"renders"| node_cards
node_cards -.->|"requests statistics"| node_api_views
node_summary -.->|"requests device data"| node_api_views
node_api_routes -->|"routes to"| node_api_views
node_api_views -->|"uses"| node_serializers
node_api_views -->|"queries"| node_models
node_serializers -->|"serializes"| node_models
node_models -.->|"persists through ORM"| node_db

click node_app "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/App.vue"
click node_router "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/router/index.js"
click node_login "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/LoginView.vue"
click node_summary "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardView.vue"
click node_dashboardbase "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/components/AdminDashboardBaseView.vue"
click node_cards "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/components/AdminDashboardCardsView.vue"
click node_devices "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardDevicesView.vue"
click node_groups "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardDeviceGroupsView.vue"
click node_sites "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardSitesView.vue"
click node_clusters "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardEdgeClustersView.vue"
click node_accesspoints "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardAccessPointsView.vue"
click node_applications "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardApplicationsView.vue"
click node_microslicing "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardMicroslicingView.vue"
click node_about "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AboutSystemView.vue"
click node_support "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/TechSupportView.vue"
click node_api_routes "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/urls.py"
click node_api_views "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/views.py"
click node_serializers "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/serializers.py"
click node_models "https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/models.py"

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_router,node_login,node_summary,node_dashboardbase,node_cards,node_devices,node_groups,node_sites,node_clusters,node_accesspoints,node_applications,node_microslicing,node_about,node_support toneBlue
class node_api_routes,node_api_views,node_serializers toneAmber
class node_models toneMint
class node_db toneRose
class node_admin toneIndigo
```

## Components

### Vue client

- [Vue application](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/App.vue): `Front-End-VUEjs/src/App.vue`
- [Page router](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/router/index.js): `Front-End-VUEjs/src/router/index.js`
- [Login and signup](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/LoginView.vue): `Front-End-VUEjs/src/views/LoginView.vue`
- [Dashboard summary](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardView.vue): `Front-End-VUEjs/src/views/AdminDashboardView.vue`
- [Dashboard navigation](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/components/AdminDashboardBaseView.vue): `Front-End-VUEjs/src/components/AdminDashboardBaseView.vue`
- [Status cards](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/components/AdminDashboardCardsView.vue): `Front-End-VUEjs/src/components/AdminDashboardCardsView.vue`
- [Device management](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardDevicesView.vue): `Front-End-VUEjs/src/views/AdminDashboardDevicesView.vue`
- [Device groups](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardDeviceGroupsView.vue): `Front-End-VUEjs/src/views/AdminDashboardDeviceGroupsView.vue`
- [Site management](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardSitesView.vue): `Front-End-VUEjs/src/views/AdminDashboardSitesView.vue`
- [Edge clusters](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardEdgeClustersView.vue): `Front-End-VUEjs/src/views/AdminDashboardEdgeClustersView.vue`
- [Access points](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardAccessPointsView.vue): `Front-End-VUEjs/src/views/AdminDashboardAccessPointsView.vue`
- [Applications](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardApplicationsView.vue): `Front-End-VUEjs/src/views/AdminDashboardApplicationsView.vue`
- [Microslicing](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AdminDashboardMicroslicingView.vue): `Front-End-VUEjs/src/views/AdminDashboardMicroslicingView.vue`
- [System guide](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/AboutSystemView.vue): `Front-End-VUEjs/src/views/AboutSystemView.vue`
- [Tech support](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Front-End-VUEjs/src/views/TechSupportView.vue): `Front-End-VUEjs/src/views/TechSupportView.vue`

### Django API

- [API routing](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/urls.py): `Back-End-Django_Rest_Framework/AdminApp/urls.py`
- [API handlers](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/views.py): `Back-End-Django_Rest_Framework/AdminApp/views.py`
- [REST serializers](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/serializers.py): `Back-End-Django_Rest_Framework/AdminApp/serializers.py`

### Network data

- [Domain models](https://github.com/ashrafyawar/network-management-system-with-vuejs-django-postgresql/blob/master/Back-End-Django_Rest_Framework/AdminApp/models.py): `Back-End-Django_Rest_Framework/AdminApp/models.py`

### Persistence

- **Database**

### Other components

- **Administrator**

## Connections

- Administrator → Vue application: opens
- Vue application → Page router: uses (evidence: `Front-End-VUEjs/src/main.js`)
- Page router → Login and signup: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Dashboard summary: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Device management: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Device groups: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Site management: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Edge clusters: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Access points: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Applications: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Microslicing: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → System guide: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Page router → Tech support: routes to (evidence: `Front-End-VUEjs/src/router/index.js`)
- Dashboard summary → Dashboard navigation: renders (evidence: `Front-End-VUEjs/src/views/AdminDashboardView.vue`)
- Dashboard summary → Status cards: renders (evidence: `Front-End-VUEjs/src/views/AdminDashboardView.vue`)
- Status cards → API handlers: requests statistics
- Dashboard summary → API handlers: requests device data
- API routing → API handlers: routes to (evidence: `Back-End-Django_Rest_Framework/AdminApp/urls.py`)
- API handlers → REST serializers: uses (evidence: `Back-End-Django_Rest_Framework/AdminApp/views.py`)
- API handlers → Domain models: queries (evidence: `Back-End-Django_Rest_Framework/AdminApp/views.py`)
- REST serializers → Domain models: serializes (evidence: `Back-End-Django_Rest_Framework/AdminApp/serializers.py`)
- Domain models → Database: persists through ORM