Update UI Components to Use Next.js API Responses for Real Data

Description:

Modify the UI components in the Compliance Dashboard to fetch and display real compliance check and vulnerability report data from the Next.js API endpoints.

---

Tasks:

1. Update Compliance Dashboard UI

   • Modify components to fetch data from /api/compliance-scans.
   • Display compliance check results in tables and charts.
   • Implement loading and error states.

2. Update Vulnerability Reports UI

   • Modify components to fetch data from /api/policy-scans.
   • Display vulnerability details including severity, namespace, and affected policies.
   • Implement sorting, filtering, and pagination.

3. Refactor API Calls

   • Use React hooks (useEffect, useState) or react-query for efficient data fetching.
   • Optimize API request handling to reduce unnecessary re-fetching.

4. Testing & Validation

   • Write unit tests for API data fetching logic.
   • Perform integration tests to ensure UI updates correctly with real data.

---

Acceptance Criteria:

• Compliance Dashboard and Vulnerability Reports UI display real data from Next.js API.
• API responses are correctly handled with error and loading states.
• UI components include sorting, filtering, and pagination where applicable.
• Tests validate API integration and UI updates.