feat: add watchlist component

[alejandrobailo]

Context

Implements a reusable WatchlistCard component for the new overview page to display compliance
frameworks and cloud services with their respective scores. This component follows the new design
system and provides consistent UI patterns for watchlist features across the application.

Description

This PR adds a new reusable WatchlistCard component with the following features:

• WatchlistCard component with three states: normal (populated), empty, and skeleton loading
• ComplianceWatchlist implementation using real compliance framework icons
• ServiceWatchlist implementation using AWS service icons
• Empty state with customizable messaging and inline navigation links
• Skeleton loading state with 6 placeholder rows

Additionally, moved ResourceStatsCard from @/components/shadcn/ to
@/app/(prowler)/new-overview/components/ following The Scope Rule (component only used in
new-overview feature).

Steps to review

1. Review component structure:

   • Check /app/(prowler)/new-overview/components/watchlist-card/watchlist-card.tsx for the main
     component implementation
   • Verify TypeScript types and const-based pattern for SCORE_CONFIG

2. Review implementations:

   • Check /app/(prowler)/new-overview/components/compliance-watchlist.tsx for compliance framework
     usage
   • Check /app/(prowler)/new-overview/components/service-watchlist.tsx for AWS services usage

3. Test the three states:

   • Normal state: View the new overview page with populated data
   • Empty state: In compliance-watchlist.tsx, change const items = MOCK_COMPLIANCE_ITEMS to
     const items = []
   • Skeleton state: Import and render <WatchlistCardSkeleton /> to verify loading state

4. Verify score-based coloring:

   • Values 0-30 should display in red (error)
   • Values 31-60 should display in amber (warning)
   • Values 61-100 should display in green (success)

5. Check responsive behavior:

   • Verify width matches ThreatScore component behavior at different breakpoints
   • Confirm consistent height across all three states

6. Run quality checks:

   npm run healthcheck  # TypeScript + ESLint
   npm run format:check # Prettier
   

Checklist

• Are there new checks included in this PR? Yes / No
  • If so, do we need to update permissions for the provider? Please review this carefully.
• Review if the code is being covered by tests.
• Review if code is being documented following this specification https://github.com/google/styleguide/blob/gh-pages/pyguide.md#38-comments-and-docstrings
• Review if backport is needed.
• Review if is needed to change the Readme.md
• Ensure new entries are added to CHANGELOG.md, if applicable.

UI

• All issue/task requirements work as expected on the UI
• Screenshots/Video of the functionality flow (if applicable) - Mobile (X < 640px)
• Screenshots/Video of the functionality flow (if applicable) - Table (640px > X < 1024px)
• Screenshots/Video of the functionality flow (if applicable) - Desktop (X > 1024px)
• Ensure new entries are added to CHANGELOG.md, if applicable.

API

• Verify if API specs need to be regenerated.
• Check if version updates are required (e.g., specs, Poetry, etc.).
• Ensure new entries are added to CHANGELOG.md, if applicable.

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[github-actions]

✅ Conflict Markers Resolved

All conflict markers have been successfully resolved in this pull request.

[github-actions]

🔒 Container Security Scan

Image: prowler-ui:aa5a516
Last scan: 2025-11-21 19:14:07 UTC

✅ No Vulnerabilities Detected

The container image passed all security checks. No known CVEs were found.

📋 Resources:

• Download full report (see artifacts)
• View in Security tab
• Scanned with Trivy