# syncfusion/ej2-showcase-vue-asset-management architecture

> Architecture diagram of the GitHub repository syncfusion/ej2-showcase-vue-asset-management, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/syncfusion/ej2-showcase-vue-asset-management
- Repository: https://github.com/syncfusion/ej2-showcase-vue-asset-management

## Overview

This is a Vue showcase app for tracking and visualizing organizational hardware and software assets. Users navigate the dashboard and inventory views, add or edit assets, submit and review requests, and issue licenses; dashboard charts summarize the seeded data and activity. The runtime state and sample records are held client-side, with no backend or persistent store shown. The excerpts establish several component calls and data references; other subsystem connections are included only where the SOURCE INDEX or README supports them.

Main entry points: [`src/main.js`](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/main.js) (Router and state), [`src/components/DashboardTemplate.vue`](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/DashboardTemplate.vue) (Dashboard), [`src/datasource.js`](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/datasource.js) (Seed asset data), [`src/App.vue`](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/App.vue) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_app["App shell<br/>[App.vue]"]
  node_runtime["Router and state<br/>[main.js]"]
  node_about["About sample<br/>[AboutTemplate.vue]"]
  node_data[("Seed asset data<br/>[datasource.js]")]
end

subgraph group_inventory["Asset inventory"]
  node_hardwarelist["Hardware inventory<br/>[AllHardware.vue]"]
  node_hardwareform["Hardware editor<br/>[AddHardware.vue]"]
  node_softwarelist["Software inventory<br/>[AllSoftware.vue]"]
  node_softwareform["Software editor<br/>[AddSoftware.vue]"]
end

subgraph group_requests["Requests"]
  node_requestslist["Request queue<br/>[AllRequests.vue]"]
  node_requestform["Request form<br/>[RequestForm.vue]"]
end

subgraph group_licensing["Software licensing"]
  node_licenseform["License issuer<br/>[IssueLicense.vue]"]
  node_licenses["Issued licenses"]
end

subgraph group_insights["Dashboard and activity"]
  node_dashboard["Dashboard"]
  node_hardwarecategory["Hardware category chart"]
  node_hardwarestatus["Hardware status chart"]
  node_softwarecategory["Software category chart"]
  node_softwarelicense["License type chart"]
  node_activity["Activity feed"]
  node_notifications["Notifications"]
end

node_user(("Organization user"))

node_user -->|"uses"| node_app
node_runtime -->|"mounts"| node_app
node_runtime -->|"loads"| node_data
node_runtime -->|"routes to"| node_hardwareform
node_runtime -->|"routes to"| node_softwareform
node_runtime -->|"routes to"| node_requestform
node_runtime -->|"routes to"| node_licenseform
node_runtime -->|"routes to"| node_hardwarelist
node_runtime -->|"routes to"| node_softwarelist
node_runtime -->|"routes to"| node_requestslist
node_runtime -->|"routes to"| node_licenses
node_runtime -->|"routes to"| node_dashboard
node_runtime -->|"routes to"| node_about
node_app -->|"uses"| node_notifications
node_hardwarelist -->|"opens editor"| node_hardwareform
node_softwarelist -->|"opens editor"| node_softwareform
node_requestslist -->|"opens form"| node_requestform
node_licenses -->|"opens issuer"| node_licenseform
node_hardwareform -->|"reads records"| node_data
node_softwareform -->|"reads records"| node_data
node_requestform -->|"reads records"| node_data
node_licenseform -->|"reads records"| node_data
node_dashboard -->|"renders"| node_hardwarecategory
node_dashboard -->|"renders"| node_hardwarestatus
node_dashboard -->|"renders"| node_softwarecategory
node_dashboard -->|"renders"| node_softwarelicense
node_dashboard -->|"shows"| node_activity
node_notifications -->|"uses"| node_activity
node_hardwarecategory -.->|"reads aggregates"| node_runtime
node_softwarelicense -.->|"reads aggregates"| node_runtime

click node_app "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/App.vue"
click node_runtime "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/main.js"
click node_about "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AboutTemplate.vue"
click node_hardwarelist "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllHardware.vue"
click node_hardwareform "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AddHardware.vue"
click node_softwarelist "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllSoftware.vue"
click node_softwareform "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AddSoftware.vue"
click node_requestslist "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllRequests.vue"
click node_requestform "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/RequestForm.vue"
click node_licenseform "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/IssueLicense.vue"
click node_licenses "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllIssuedLicenses.vue"
click node_data "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/datasource.js"
click node_dashboard "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/DashboardTemplate.vue"
click node_hardwarecategory "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/HardwareCategoryChart.vue"
click node_hardwarestatus "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/HardwareStatusChart.vue"
click node_softwarecategory "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/SoftwareCategoryChart.vue"
click node_softwarelicense "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/SoftwareLicenseChart.vue"
click node_activity "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/ActivityTemplate.vue"
click node_notifications "https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/NotificationTemplate.vue"

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_runtime,node_about,node_data,node_user toneBlue
class node_hardwarelist,node_hardwareform,node_softwarelist,node_softwareform toneAmber
class node_requestslist,node_requestform toneMint
class node_licenseform,node_licenses toneRose
class node_dashboard,node_hardwarecategory,node_hardwarestatus,node_softwarecategory,node_softwarelicense,node_activity,node_notifications toneIndigo
```

## Components

### Application shell

- [App shell](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/App.vue): `src/App.vue`
- [Router and state](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/main.js): `src/main.js`
- [About sample](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AboutTemplate.vue): `src/components/AboutTemplate.vue`
- [Seed asset data](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/datasource.js): `src/datasource.js`

### Asset inventory

- [Hardware inventory](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllHardware.vue): `src/components/AllHardware.vue`
- [Hardware editor](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AddHardware.vue): `src/components/AddHardware.vue`
- [Software inventory](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllSoftware.vue): `src/components/AllSoftware.vue`
- [Software editor](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AddSoftware.vue): `src/components/AddSoftware.vue`

### Requests

- [Request queue](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllRequests.vue): `src/components/AllRequests.vue`
- [Request form](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/RequestForm.vue): `src/components/RequestForm.vue`

### Software licensing

- [License issuer](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/IssueLicense.vue): `src/components/IssueLicense.vue`
- [Issued licenses](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/AllIssuedLicenses.vue): `src/components/AllIssuedLicenses.vue`

### Dashboard and activity

- [Dashboard](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/DashboardTemplate.vue): `src/components/DashboardTemplate.vue`
- [Hardware category chart](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/HardwareCategoryChart.vue): `src/components/dashboard/HardwareCategoryChart.vue`
- [Hardware status chart](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/HardwareStatusChart.vue): `src/components/dashboard/HardwareStatusChart.vue`
- [Software category chart](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/SoftwareCategoryChart.vue): `src/components/dashboard/SoftwareCategoryChart.vue`
- [License type chart](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/dashboard/SoftwareLicenseChart.vue): `src/components/dashboard/SoftwareLicenseChart.vue`
- [Activity feed](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/ActivityTemplate.vue): `src/components/ActivityTemplate.vue`
- [Notifications](https://github.com/syncfusion/ej2-showcase-vue-asset-management/blob/master/src/components/NotificationTemplate.vue): `src/components/NotificationTemplate.vue`

### Other components

- **Organization user**

## Connections

- Organization user → App shell: uses (evidence: `README.md`)
- Router and state → App shell: mounts (evidence: `src/main.js`)
- Router and state → Seed asset data: loads (evidence: `src/main.js`)
- Router and state → Hardware editor: routes to (evidence: `src/main.js`)
- Router and state → Software editor: routes to (evidence: `src/main.js`)
- Router and state → Request form: routes to (evidence: `src/main.js`)
- Router and state → License issuer: routes to (evidence: `src/main.js`)
- Router and state → Hardware inventory: routes to (evidence: `src/main.js`)
- Router and state → Software inventory: routes to (evidence: `src/main.js`)
- Router and state → Request queue: routes to (evidence: `src/main.js`)
- Router and state → Issued licenses: routes to (evidence: `src/main.js`)
- Router and state → Dashboard: routes to (evidence: `src/main.js`)
- Router and state → About sample: routes to (evidence: `src/main.js`)
- App shell → Notifications: uses (evidence: `src/App.vue`)
- Hardware inventory → Hardware editor: opens editor (evidence: `src/components/AllHardware.vue`)
- Software inventory → Software editor: opens editor (evidence: `src/components/AllSoftware.vue`)
- Request queue → Request form: opens form (evidence: `src/components/AllRequests.vue`)
- Issued licenses → License issuer: opens issuer (evidence: `src/components/AllIssuedLicenses.vue`)
- Hardware editor → Seed asset data: reads records (evidence: `src/components/AddHardware.vue`)
- Software editor → Seed asset data: reads records (evidence: `src/components/AddSoftware.vue`)
- Request form → Seed asset data: reads records (evidence: `src/components/RequestForm.vue`)
- License issuer → Seed asset data: reads records (evidence: `src/components/IssueLicense.vue`)
- Dashboard → Hardware category chart: renders (evidence: `src/components/DashboardTemplate.vue`)
- Dashboard → Hardware status chart: renders (evidence: `src/components/DashboardTemplate.vue`)
- Dashboard → Software category chart: renders (evidence: `src/components/DashboardTemplate.vue`)
- Dashboard → License type chart: renders (evidence: `src/components/DashboardTemplate.vue`)
- Dashboard → Activity feed: shows (evidence: `src/components/DashboardTemplate.vue`)
- Notifications → Activity feed: uses (evidence: `src/components/NotificationTemplate.vue`)
- Hardware category chart → Router and state: reads aggregates
- License type chart → Router and state: reads aggregates