[Feat]: Improve activity modal UI #3585
Conversation
WalkthroughThis update refines the UI elements for the team dashboard. In the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Table as TeamStatsTable
participant State as EmployeeLog State
participant Modal as ActivityModal
User->>Table: Click "View Activity" button
Table->>State: Set employeeLog state with selected log
State-->>Table: Updated employeeLog
Table->>Modal: Render ActivityModal conditionally
Modal-->>User: Display employee activity details
Possibly related PRs
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/activity-modal.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. 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. apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.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: 2
🧹 Nitpick comments (3)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/activity-modal.tsx (1)
92-97: Enhance modal accessibility.Consider adding ARIA attributes to improve the modal's accessibility.
<Modal isOpen={isOpen} closeModal={closeModal} className="bg-light--theme-light dark:bg-dark--theme-light rounded-xl w-full md:w-40 md:min-w-[32rem] justify-start h-[auto]" titleClass="font-bold flex justify-start w-full" + aria-labelledby="activity-modal-title" + aria-describedby="activity-modal-description" >Also update the heading:
-<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100"> +<h3 id="activity-modal-title" className="text-lg font-medium text-gray-900 dark:text-gray-100">apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx (2)
173-186: Remove unnecessary Fragment.The Fragment wrapper is redundant as it contains only one child.
-<> <Button variant="ghost" size="icon" onClick={() => { setEmployeeLog(employeeLog); openModal(); }} aria-label={`View activity chart for ${employeeLog.employee?.user?.name || 'employee'}`} title="View activity chart"> <ChartIcon /> </Button> -</>🧰 Tools
🪛 Biome (1.9.4)
[error] 173-185: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
204-238: Enhance pagination buttons accessibility.Add descriptive aria-labels to pagination buttons for better screen reader support.
-<Button variant="outline" size="icon" onClick={goToFirstPage} disabled={currentPage === 1}> +<Button + variant="outline" + size="icon" + onClick={goToFirstPage} + disabled={currentPage === 1} + aria-label="Go to first page" +> <ChevronsLeft className="w-4 h-4" /> </Button>Apply similar changes to other pagination buttons.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/activity-modal.tsx(1 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx(3 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx(4 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx
[error] 173-185: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: deploy
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (3)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx (1)
76-77: LGTM! Layout improvements.The padding and height adjustments improve the visual consistency of the dashboard layout.
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/activity-modal.tsx (1)
101-110: LGTM! Improved visual hierarchy.The reduced avatar size and font size create a better visual hierarchy in the modal header.
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx (1)
63-77: LGTM! Consistent loading states.The increased minimum height for loading and no data states improves layout consistency.
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx
Show resolved
Hide resolved
|
@Innocent-Akim resolve merge conflicts please |
- Fix type error in ActivityModal component - Improve modal styling and responsiveness - Replace custom button with Button component - Add accessibility attributes to chart button - Optimize modal rendering with null check
- Fix type error in ActivityModal component - Improve modal styling and responsiveness - Replace custom button with Button component - Add accessibility attributes to chart button - Optimize modal rendering with null check
Innocent-Akim
force-pushed
the
feat/improve-activity-modal-ui
branch
from
bcd9b0b to
5eec9ed
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx (1)
75-75: Maintain consistent min-height across states.The loading state uses
min-h-[500px]while the empty state usesmin-h-[400px]. This inconsistency could cause layout shifts when transitioning between states.-<div className="flex justify-center items-center min-h-[400px] text-gray-500 dark:text-white dark:bg-dark--theme-light"> +<div className="flex justify-center items-center min-h-[500px] text-gray-500 dark:text-white dark:bg-dark--theme-light">
🧹 Nitpick comments (2)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx (2)
47-47: Consider using non-nullable state type.The state type
ITimerEmployeeLog | undefinedcould be made more explicit about its purpose by usingnullinstead ofundefinedto represent the absence of data.-const [employeeLog, setEmployeeLog] = useState<ITimerEmployeeLog | undefined>(undefined); +const [employeeLog, setEmployeeLog] = useState<ITimerEmployeeLog | null>(null);
175-188: Remove unnecessary Fragment.The Fragment wrapper is redundant as it contains only one child element.
-<> <Button variant="ghost" size="icon" onClick={() => { setEmployeeLog(employeeLog); openModal(); }} aria-label={`View activity chart for ${employeeLog.employee?.user?.name || 'employee'}`} title="View activity chart"> <ChartIcon /> </Button> -</>🧰 Tools
🪛 Biome (1.9.4)
[error] 175-187: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/activity-modal.tsx(1 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx(5 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/activity-modal.tsx
- apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-table.tsx
[error] 175-187: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
⏰ 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)
147-158: Use actual data for activity percentages.The manually added, active time, idle time, and unknown activity percentages are still hardcoded.
176-186: LGTM! Well-implemented accessibility.The activity chart button is well-implemented with proper accessibility attributes (aria-label and title).
200-237: LGTM! Well-implemented pagination controls.The pagination implementation is robust with:
- Complete navigation controls (first, last, previous, next)
- Proper disabled states
- Good keyboard accessibility
Description
#3251
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
Summary by CodeRabbit
New Features
Style