[Feat]: Implement productivity table for app usage statistics #3606
Conversation
- Add ProductivityTable component with member, project, and app usage data - Integrate table with shadcn UI components and custom styling - Add loading states with skeleton UI - Update layout with Card container and proper spacing - Make table responsive with proper dark mode support
|
Warning Rate limit exceeded@Innocent-Akim has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 6 minutes and 21 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughThis pull request introduces new productivity components and updates existing ones on the dashboard. The changes add a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AppUrls as AppUrls Page
participant Layout as MainLayout
participant ProdTable as ProductivityTable
User->>AppUrls: Navigate to page
AppUrls->>Layout: Render layout container
Layout->>ProdTable: Render ProductivityTable component
sequenceDiagram
participant Chart as ProductivityChart
participant Data as Data Array
participant Util as getDateNumber Function
Chart->>Data: Iterate over productivity data
Data->>Util: Extract day from date string
Util-->>Chart: Return day number
Chart->>Chart: Render bars and corresponding day labels
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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: 7
🧹 Nitpick comments (2)
apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx (2)
15-17: Add date validation and consider using date-fns.The
getDateNumberfunction should handle invalid dates and could benefit from using a date utility library like date-fns for more robust date handling.-const getDateNumber = (dateString: string) => { - return new Date(dateString).getDate(); -}; +import { getDate, isValid, parseISO } from 'date-fns'; + +const getDateNumber = (dateString: string) => { + const date = parseISO(dateString); + if (!isValid(date)) { + return '-'; + } + return getDate(date); +};
20-54: Consider memoizing the date labels.The layout structure looks good, but the date labels could be memoized to avoid unnecessary recalculations on re-renders.
+const dateLabels = useMemo( + () => data.map((day) => ({ + key: `label-${day.date}`, + label: getDateNumber(day.date) + })), + [data] +); return ( <div className="flex flex-col gap-2"> {/* ... bars ... */} <div className="flex gap-[2px] w-full justify-between px-1"> - {data.map((day) => ( + {dateLabels.map(({ key, label }) => ( <div - key={`label-${day.date}`} + key={key} className="flex-1 text-xs text-center text-gray-500" > - {getDateNumber(day.date)} + {label} </div> ))} </div> </div> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx(1 hunks)apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx(1 hunks)apps/web/app/[locale]/dashboard/app-url/components/ProductivityHeader.tsx(1 hunks)apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx(1 hunks)apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- apps/web/app/[locale]/dashboard/app-url/components/ProductivityHeader.tsx
- apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx
Show resolved
Hide resolved
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx
Show resolved
Hide resolved
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx
Outdated
Show resolved
Hide resolved
apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx (2)
78-78:⚠️ Potential issueRemove console.log statement.
Remove debugging console.log statement from production code.
-console.log('=====>', groupBy);
129-131:⚠️ Potential issueAdd error handling to ProductivityTable.
The ProductivityTable component is rendered without error handling. Consider adding error handling and loading state.
<Container fullWidth={fullWidth} className={cn('flex flex-col gap-8 !px-4 py-6 w-full')}> - <ProductivityTable /> + <ProductivityTable + isLoading={isLoading} + error={error} + data={monthData} + /> </Container>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx(1 hunks)apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: deploy
🔇 Additional comments (1)
apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx (1)
19-19: LGTM! Clean imports and type definitions.The imports are well-organized, and the
ProductivityDatainterface is properly defined with all required fields.Also applies to: 21-26
Innocent-Akim
added
feature
UI/UX
WEB
#3263
#3264
#3262
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
New Features
ProductivityTablecomponent to display productivity data in a structured table format.ProductivityChartwith day labels for enhanced clarity of productivity metrics.Refactor