[Feat]: Add pagination size dropdown #3593
Conversation
- Replace custom pagination select with PaginationDropdown component - Improve layout and styling of pagination controls - Move pagination size control next to entries count - Update text color to #111827 for better visibility
WalkthroughThis pull request implements a dynamic pagination feature for the team statistics table. In the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TeamStatsTable
participant PaginationDropdown
User->>TeamStatsTable: Selects new page size
TeamStatsTable->>PaginationDropdown: Calls update for pagination options
PaginationDropdown->>TeamStatsTable: Returns updated options
TeamStatsTable->>TeamStatsTable: Resets current page and recalculates indices
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsxOops! Something went wrong! :( ESLint: 8.46.0 ESLint couldn't find the config "next/core-web-vitals" to extend from. Please check that the name of the config is correct. The config "next/core-web-vitals" was referenced from the config file in "/apps/web/.eslintrc.json". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. Tip 🌐 Web search-backed reviews and chat
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/lib/settings/page-dropdown.tsx (1)
20-34: Fix array formatting in baseOptions.The array formatting in baseOptions has inconsistent spacing.
- const baseOptions = [10, 20, 30,40, 50]; + const baseOptions = [10, 20, 30, 40, 50];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx(5 hunks)apps/web/lib/settings/page-dropdown.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: deploy
🔇 Additional comments (5)
apps/web/lib/settings/page-dropdown.tsx (3)
11-19: LGTM! Props are well-typed and documented.The props interface is clear and properly typed with TypeScript.
54-58: LGTM! Effect properly handles total prop changes.The effect correctly updates pagination options when total changes, with proper dependency array.
97-102: LGTM! Styling is consistent and supports dark mode.The styling changes maintain consistency and properly handle dark mode.
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx (2)
47-51: LGTM! Pagination state and calculations are well implemented.The pagination logic is correct with proper state management and calculations.
221-233: LGTM! Pagination dropdown is well integrated.The pagination dropdown is properly integrated with good UX considerations:
- Resets to page 1 when page size changes
- Shows correct entry count
- Properly passes total count to dropdown
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx (1)
221-228: Consider adding ARIA labels for better accessibility.The pagination controls would benefit from proper ARIA labels to improve accessibility.
<PaginationDropdown + aria-label="Select number of items per page" setValue={(value) => { setPageSize(value); setCurrentPage(1); }} total={rapportDailyActivity?.length} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: deploy
🔇 Additional comments (3)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx (3)
6-6: LGTM! Pagination state and calculations are well implemented.The pageSize state is properly integrated with the pagination logic, and the calculations for totalPages, startIndex, and endIndex are mathematically sound.
Also applies to: 46-49
70-76: LGTM! Empty state handling is improved with dark mode support.The empty state UI is well-implemented with proper dark mode support and consistent layout.
193-194: LGTM! Responsive layout and pagination controls are well implemented.The flex layout provides good mobile responsiveness, and the PaginationDropdown is properly integrated with the pagination state.
Also applies to: 221-234
Description
Please include a summary of the changes and the related issues.
Type of Change
Checklist
Previous screenshots
Please add here videos or images of the previous status
Current screenshots
Please add here videos or images of the current (new) status
Summary by CodeRabbit