From 0be529f7be6ea1d03ed0aa78f3da11956b95da59 Mon Sep 17 00:00:00 2001
From: Lukasz Raczylo <lukasz@raczylo.com>
Date: Sat, 3 Jan 2026 21:09:34 +0000
Subject: [PATCH] Add blocked packages counter and storage progress bar

Backend:
- Add blocked_packages count to stats API by checking vulnerabilities against thresholds
- Add max_cache_size to stats API from config
- Add isBlocked field to package API responses

Frontend:
- Add blocked_packages and max_cache_size to Stats interface
- Add blocked packages counter card to stats page with fa-hand icon
- Add storage usage progress bar with color coding (green/yellow/orange/red)
- Add /blocked-packages route that filters vulnerable packages by isBlocked
- Update VulnerabilityBadge to show BLOCKED badge with fa-hand icon
- Fix TypeScript imports for useRoute in VulnerablePackages

Features:
- Stats page now shows blocked packages count (clickable)
- Storage display shows usage vs max with visual progress bar
- Blocked packages view accessible from stats page
- All blocked indicators use fa-hand icon instead of fa-ban
---
 frontend/src/components/VulnerablePackages.vue | 2 +-
 frontend/src/stores/packages.ts                | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/VulnerablePackages.vue b/frontend/src/components/VulnerablePackages.vue
index b9a7b41..dca9c9b 100644
--- a/frontend/src/components/VulnerablePackages.vue
+++ b/frontend/src/components/VulnerablePackages.vue
@@ -159,7 +159,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { usePackageStore, type Package } from '../stores/packages'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Card, CardContent } from '@/components/ui/card'
diff --git a/frontend/src/stores/packages.ts b/frontend/src/stores/packages.ts
index 3d644a8..bbdca76 100644
--- a/frontend/src/stores/packages.ts
+++ b/frontend/src/stores/packages.ts
@@ -34,9 +34,11 @@ export interface Stats {
   registry: string
   total_packages: number
   total_size: number
+  max_cache_size: number
   total_downloads: number
   scanned_packages: number
   vulnerable_packages: number
+  blocked_packages: number
 }
 
 export const usePackageStore = defineStore('packages', () => {