Phase3: UI Implementation for Dashboard

[kushagra0902]

Description

This PR implements Dashboard UI for the metrics and thus implements phase 3 as described here

Related Issue

This PR is in series for solving issue #144 ans thus completes the issue now.

Motivation and Context

Main motivation is described in the Issue itslef. TLDR: Showing different KPIs to users so they can track which configs are working.

How Has This Been Tested?

The UI has been tested manually by spinning up the server for dashboard, and then monitoring UI if the changes are occuring properly

Screenshots (if appropriate):

Screencast.from.2026-04-13.17-03-08.webm

Types of changes

• Non-functional change (docs, style, minor refactor)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my code changes.
• All new and existing tests passed.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	typescript-eslint@​8.58.1
	@​types/​react-dom@​19.2.3
	@​types/​react@​19.2.14
	vite@​8.0.8
	react@​19.2.5
	globals@​17.5.0
	eslint-plugin-react-refresh@​0.5.2
	eslint@​9.39.4
	lucide-react@​1.8.0
	ws@​8.20.0
	typescript@​6.0.2
	@​eslint/​js@​9.39.4
	react-dom@​19.2.5
	eslint-plugin-react-hooks@​7.0.1
	@​vitejs/​plugin-react@​6.0.1

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm vite is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: dashboard-ui/package-lock.json → npm/vite@8.0.8 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/vite@8.0.8. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report