feat: new finding detail view

[alejandrobailo]

Context

Redesign the findings table with improved UX including new cell components, tabbed finding details in a drawer, enhanced filters with date picker, and updated design system components.

Screen.Recording.2026-01-07.at.11.02.32.mov

Description

• Add shadcn Drawer and InfoField components for finding details panel with tabs (General, Resources, Scans)
• Implement new table cell components: NotificationIndicator, ProviderIconCell, ImpactedResourcesCell
• Refactor findings filters with provider/account selectors and animated expandable sections
• Add Calendar component and redesigned date picker for date range filtering
• Update table design system: pagination, search bar, severity/status badges, checkbox, and select components
• Add skeleton loading states for findings table

Steps to review

1. Verify finding detail drawer opens correctly when clicking a finding title in the table
2. Test all three tabs (General, Resources, Scans) display correct data
3. Check drawer responsive widths: 100% mobile, 50% md screens, 33% 3xl screens
4. Test filter controls expand/collapse animation and clear filters functionality
5. Verify date picker calendar works with date range selection
6. Check table pagination, search, and sorting work correctly
7. Test skeleton loading states appear during data fetching
8. Verify no TypeScript errors: pnpm run typecheck

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.

[Alan-TheGentleman]

The 3xl breakpoint is not standard Tailwind (only goes up to 2xl). Verify it's configured in tailwind.config.js, otherwise this won't work.

[Alan-TheGentleman]

Note: Line 87-90 uses window.location directly which can cause hydration mismatch in Next.js. Consider using usePathname() and useSearchParams() from Next.js:

const pathname = usePathname();
const searchParams = useSearchParams();

// Build URL using Next.js hooks instead of window.location
const params = new URLSearchParams(searchParams);
params.set('id', findingDetails.id);
const url = `${pathname}?${params.toString()}`;

This is pre-existing code, but worth addressing.

[Alan-TheGentleman]

Thank youuu!

One concern:

• finding-detail.tsx still uses @heroui/snippet, can we migrate that snippet usage to a shadcn-style equivalent as part of this PR?
  • If not let's create a TODO around it.

Minor/nits

• navigator.clipboard.writeText(url) might be worth wrapping in try/catch to avoid failures in restricted clipboard contexts.
• Controlled/uncontrolled: since FindingDetail supports open and defaultOpen, it may be safer to ignore defaultOpen when open is provided (avoids ambiguous behavior).