[Feat]: Implement report activity filters and loading state #3536
Conversation
|
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/dashboard-header.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. WalkthroughThis pull request introduces significant enhancements to the team dashboard functionality, focusing on improving date range and filter interactions. The changes span multiple files, including the dashboard header, team stats chart, page component, and a new report activity hook. The modifications enable more dynamic and interactive data visualization, allowing users to customize their view of team activities through flexible date range selection and filter options. Changes
Sequence DiagramsequenceDiagram
participant User
participant DashboardHeader
participant TeamDashboard
participant UseReportActivity
participant TeamStatsChart
User->>DashboardHeader: Select Date Range/Filter
DashboardHeader->>TeamDashboard: onUpdateDateRange/onUpdateFilters
TeamDashboard->>UseReportActivity: Update Date/Filters
UseReportActivity-->>UseReportActivity: Fetch Report Activity
UseReportActivity->>TeamStatsChart: Update Chart Data
TeamStatsChart->>User: Render Updated Chart
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
✨ Finishing Touches
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: 0
🔭 Outside diff range comments (1)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx (1)
Export functionality is incomplete and needs to be implemented
The export Select component is currently non-functional:
- No
onValueChangehandler is implemented for the export options- Export options (CSV, PDF, Excel) are defined but have no associated actions
- The UI elements should either be connected to export functionality or removed to avoid confusion
🔗 Analysis chain
Line range hint
68-79: Implement export functionality or remove if not needed.The export functionality appears to be incomplete as it doesn't handle the export actions.
Let's check if there are any existing export implementations:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for export-related functionality rg -g '!*.{json,lock}' -i "export.*\.(csv|pdf|excel)" -A 5Length of output: 60
Script:
#!/bin/bash # Search for export-related functions and handlers rg -g '!*.{json,lock}' -i "function.*export|export.*function|onExport|handleExport" -A 5 # Search for Select onChange handlers in the dashboard-header file rg -g "dashboard-header.tsx" "onChange" -A 5 # Search for any export-related utilities rg -g '!*.{json,lock,md}' -i "export.*util|export.*helper|export.*service" -A 5Length of output: 121816
Script:
#!/bin/bash # Search for Select component implementation in dashboard-header ast-grep --pattern 'Select $$$' apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx # Search for export-related functions rg -g '!*.{json,lock}' -i "function.*export|handleExport|downloadExport" -A 5Length of output: 2165
Script:
#!/bin/bash # Get the full implementation of dashboard-header.tsx cat apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsxLength of output: 2398
🧹 Nitpick comments (6)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx (2)
26-46: Consider extracting filter logic and improving date calculations.The date calculations in
handleFilterChangecould be improved to ensure consistent behavior across timezones.Consider this implementation:
const handleFilterChange = (value: string) => { - const today = new Date(); - let startDate = new Date(); - const endDate = today; + const endDate = new Date(); + endDate.setHours(23, 59, 59, 999); + + let startDate = new Date(endDate); + startDate.setHours(0, 0, 0, 0); switch (value) { case 'today': - startDate = today; break; case 'week': - startDate.setDate(today.getDate() - 7); + startDate.setDate(endDate.getDate() - 7); break; case 'month': - startDate.setMonth(today.getMonth() - 1); + startDate.setMonth(endDate.getMonth() - 1); break; default: return; }
Line range hint
53-67: Extract filter options to constants.The filter options are currently hardcoded in the JSX. Consider extracting them to a constants file for better maintainability.
Example implementation:
// constants/filters.ts export const DASHBOARD_FILTERS = { TODAY: 'today', WEEK: 'week', MONTH: 'month' } as const; export const DASHBOARD_FILTER_OPTIONS = [ { value: DASHBOARD_FILTERS.TODAY, label: 'Today' }, { value: DASHBOARD_FILTERS.WEEK, label: 'This Week' }, { value: DASHBOARD_FILTERS.MONTH, label: 'This Month' } ];apps/web/app/hooks/features/useReportActivity.ts (2)
11-20: Extract date manipulation to a utility function.The date string manipulation logic could be moved to a utility function for reusability and consistency.
Consider this implementation:
// utils/date.ts export const formatDateToISODate = (date: Date): string => date.toISOString().split('T')[0]; export const getDefaultDateRange = (daysBack: number = 7) => { const endDate = new Date(); const startDate = new Date(); startDate.setDate(startDate.getDate() - daysBack); return { startDate: formatDateToISODate(startDate), endDate: formatDateToISODate(endDate) }; };
35-61: Enhance error handling with specific error types.The error handling could be more robust by handling specific error types and providing more context.
Consider this implementation:
const fetchReportActivity = useCallback(async (customProps?: Partial<UseReportActivityProps>) => { if (!user) return; try { const mergedProps = { ...defaultProps, ...currentFilters, ...(customProps || {}), organizationId: user?.employee.organizationId, tenantId: user?.tenantId ?? '' }; const { data } = await queryTimeLogReportDailyChart(mergedProps); if (data) { setRapportChartActivity(data); if (customProps) { setCurrentFilters(prev => ({ ...prev, ...customProps })); } } else { setRapportChartActivity([]); } } catch (err) { - console.error('Failed to fetch activity report:', err); + const error = err as Error; + console.error('Failed to fetch activity report:', { + message: error.message, + filters: customProps, + userId: user.id + }); + // Optionally, you could emit an error event or notify an error tracking service setRapportChartActivity([]); } }, [user, queryTimeLogReportDailyChart, currentFilters, setRapportChartActivity]);apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-chart.tsx (2)
39-61: Extract chart configuration to constants.The line colors and initial visibility state could be extracted to constants for better maintainability.
Consider this implementation:
const CHART_COLORS = { TRACKED: '#2563eb', MANUAL: '#dc2626', IDLE: '#eab308', RESUMED: '#34c759' } as const; const INITIAL_LINE_VISIBILITY = { tracked: true, manual: true, idle: true, resumed: true } as const; export function TeamStatsChart({ rapportChartActivity, isLoading }: TeamStatsChartProps) { const [visibleLines, setVisibleLines] = useState(INITIAL_LINE_VISIBILITY); // ... }
63-69: Enhance loading state with a progress indicator.The loading state could be more informative by showing a progress message.
Consider this implementation:
if (isLoading) { return ( <div className="flex justify-center items-center h-[250px]"> - <Spinner /> + <div className="flex flex-col items-center gap-2"> + <Spinner /> + <p className="text-sm text-gray-500">Loading activity data...</p> + </div> </div> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx(1 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/team-stats-chart.tsx(3 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx(3 hunks)apps/web/app/hooks/features/useReportActivity.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: deploy
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (1)
apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/page.tsx (1)
56-65: LGTM! Clean integration of the report activity feature.The integration of
useReportActivityhook and the props passing to child components is well-structured and follows React best practices.
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
Release Notes
New Features
Improvements
Performance