[DEMO] ENG-2943: Add Access Control Summary and Logs

[kruulik]

Ticket [ENG-2943]

Description Of Changes

Add the data layer and summary cards for the access control summary page. This includes an RTK Query slice with MSW mock handlers, three summary cards (violations over time chart, violation rate stat, top data consumers list), and a time range toggle (24H/7D/30D).

The mock-first approach means swapping to a real backend requires no UI changes — components consume RTK Query hooks, and MSW handlers intercept API calls to return mock data during development.

Code Changes

• src/features/access-control/types.ts - TypeScript types for all API response shapes
• src/features/access-control/access-control.slice.ts - RTK Query slice with 4 endpoints injected into baseApi
• src/features/common/api.slice.ts - Added "Access Control" to tagTypes
• src/mocks/access-control/data.ts - Mock response data for all endpoints
• src/mocks/access-control/handlers.ts - MSW handlers with query param parsing (pagination, date range, group_by, sort)
• src/mocks/handlers.ts - Registered access-control handlers
• src/features/access-control/summary/ViolationsOverTimeCard.tsx - Dual-line area chart (violations + total requests) using recharts
• src/features/access-control/summary/ViolationRateCard.tsx - Percentage stat with progress bar
• src/features/access-control/summary/DataConsumersCard.tsx - Top 5 data consumers list
• src/features/access-control/summary/SummaryCards.tsx - 3-column grid layout composing the cards
• src/pages/data-discovery/access-control/summary/index.tsx - Added Segmented time range toggle and SummaryCards

Steps to Confirm

1. Run NEXT_PUBLIC_MOCK_API=true npm run dev from clients/admin-ui/
2. Navigate to /data-discovery/access-control/summary
3. Confirm time range toggle (24H/7D/30D) renders above the cards
4. Confirm Violations Over Time card shows dual-line area chart
5. Confirm Violation Rate card shows percentage stat with progress bar at bottom
6. Confirm Data Consumers card shows top 5 consumers list
7. Switch time ranges and confirm chart data updates

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
• Followup issues:
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Error		Mar 18, 2026 7:40pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Mar 18, 2026 7:40pm

[greptile-apps]

Greptile Summary

This PR adds the data layer and three summary dashboard cards for the Access Control summary page — a violations-over-time area chart, a violation-rate stat card, and a top-data-consumers list — along with an RTK Query slice, MSW mock handlers, and a Segmented time-range toggle (24H / 7D / 30D). The mock-first approach means swapping in a real backend requires no UI changes.

Key observations:

• The grid layout in SummaryCards.tsx uses a bare div with Tailwind classes instead of an Ant Design layout component (Row/Col or Flex), which conflicts with the project's semantic HTML guideline.
• Single-character reduce callback parameters (s, c in handlers.ts; i in data.ts) violate the project's full-name variable convention.
• In ViolationsOverTimeCard.tsx, the tickFormatter prop on XAxis is redundant because the custom XAxisTick component formats the value itself using payload.value (the raw timestamp); the formatted output of tickFormatter is unused. This does not affect rendering but is dead code.
• The useMemo wrapping getDateRange in the page correctly scopes date recalculation to timeRange changes only.

Confidence Score: 4/5

• This PR is safe to merge with minor style fixes recommended before landing.
• All logic is sound — division-by-zero is guarded, RTK Query cache keys are properly differentiated, and the mock-first wiring is clean. The deductions are three style-convention violations (div layout, short variable names) that should be addressed but do not affect runtime behaviour.
• clients/admin-ui/src/features/access-control/summary/SummaryCards.tsx (div layout), clients/admin-ui/src/mocks/access-control/handlers.ts and data.ts (variable naming).

Important Files Changed

Filename	Overview
clients/admin-ui/src/features/access-control/access-control.slice.ts	New RTK Query slice injecting 4 endpoints into baseApi; two endpoints share the URL data-consumer/requests differentiated by query params — this is a valid pattern since RTK Query cache keys include params. providesTags correctly tags all queries as "Access Control".
clients/admin-ui/src/features/access-control/summary/SummaryCards.tsx	Composes the three summary cards in a 3-column layout, but uses a bare div with Tailwind grid classes rather than an Ant Design layout component (violates the project's semantic HTML / component-library rule).
clients/admin-ui/src/features/access-control/summary/ViolationsOverTimeCard.tsx	Dual-line area chart using recharts. Both a tickFormatter and a custom tick component (XAxisTick) are provided to XAxis; in recharts, the custom tick component receives the raw payload.value and formats it itself, so tickFormatter is redundant dead code — but this does not affect rendering correctness.
clients/admin-ui/src/mocks/access-control/data.ts	Mock response data with random generation. The single-character i in Array.from callback violates the project's full-name variable convention; otherwise clean.
clients/admin-ui/src/mocks/access-control/handlers.ts	MSW handlers with query param parsing. The reduce callbacks on lines 51–52 use single-character parameter names s and c, which violate the project naming convention.
clients/admin-ui/src/pages/data-discovery/access-control/summary/index.tsx	Page component wiring up the Segmented time-range toggle and SummaryCards. useMemo correctly prevents unnecessary date recalculation, and loading state is properly combined from both queries. The div className="mb-4" is used solely for margin spacing of the toggle, which is acceptable per the project rule.

_{Last reviewed commit: 8030763}