feat(dashboard): Improve metric drawer layout with header and goal progress #266
Conversation
…ogress - Move title, badges, and close button to drawer header - Reduce drawer height from 90vh to 70vh - Add goal progress bars to metric cards (visible when closed) - Show time remaining and period dates in card header
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@drifter089 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 25 minutes and 23 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)
📝 WalkthroughWalkthroughThis PR refactors dashboard metric UI components by enhancing the metric card header with platform badges and status indicators, expanding the metric chart with time-based progress visualization and goal-related fields, and simplifying the metric drawer by removing header controls and platform-specific logic. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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
🧹 Nitpick comments (1)
src/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsx (1)
42-42: Consider removing the underscore prefix for forwarded props.The
_errornaming convention typically signals an intentionally unused parameter. However, this prop is forwarded to theDashboardMetricDrawerchild component (line 316), so it's not actually unused. The underscore prefix may cause confusion about whether the prop is needed.Alternative: keep the original name
- error: _error, + error,
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsx
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use the tRPC dual API pattern: for server components, directly call tRPC server API (10x faster); for client components, use React hooks with TanStack Query
Use inline type imports with @trivago/prettier-plugin-sort-imports for consistent import orderingUse TypeScript 5.9 with strict type checking for all frontend and backend code
Files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
src/app/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Three-stage metrics transformation pipeline: Stage 1 (API → DataPoints via DataIngestionTransformer), Stage 2 (DataPoints → ChartConfig via ChartTransformer), Stage 3 (ChartConfig → UI via DashboardMetricChart with Recharts)
Files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
src/app/dashboard/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Consolidate dashboard metric card duplication: add readOnly mode to dashboard-metric-card.tsx instead of maintaining separate public-dashboard-metric-card.tsx component
Files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
src/**/*.tsx
📄 CodeRabbit inference engine (GEMINI.md)
Prefer Server Components for initial data fetching; use Client Components ('use client') only for interactivity
Files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
src/**/*/*.tsx
📄 CodeRabbit inference engine (GEMINI.md)
Client Components must use
import { api } from '@/trpc/react'for standard HTTP/Hooks wrapper
Files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
**/*.tsx
📄 CodeRabbit inference engine (GEMINI.md)
Use Tailwind CSS 4 for styling with shadcn/ui and Radix UI primitive components
Files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/dashboard/**/*.tsx : Consolidate dashboard metric card duplication: add readOnly mode to dashboard-metric-card.tsx instead of maintaining separate public-dashboard-metric-card.tsx component
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/dashboard/**/*.{ts,tsx} : Three-stage metrics transformation pipeline: Stage 1 (API → DataPoints via DataIngestionTransformer), Stage 2 (DataPoints → ChartConfig via ChartTransformer), Stage 3 (ChartConfig → UI via DashboardMetricChart with Recharts)
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/metric/_components/**/*.tsx : Use MetricDialogBase from base/ for shared metric dialog functionality to reduce duplication across provider-specific dialogs
📚 Learning: 2025-12-20T16:32:46.829Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/dashboard/**/*.tsx : Consolidate dashboard metric card duplication: add readOnly mode to dashboard-metric-card.tsx instead of maintaining separate public-dashboard-metric-card.tsx component
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
📚 Learning: 2025-12-20T16:32:46.829Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/dashboard/**/*.{ts,tsx} : Three-stage metrics transformation pipeline: Stage 1 (API → DataPoints via DataIngestionTransformer), Stage 2 (DataPoints → ChartConfig via ChartTransformer), Stage 3 (ChartConfig → UI via DashboardMetricChart with Recharts)
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
📚 Learning: 2025-12-20T16:32:46.829Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/metric/_components/**/*.tsx : Use MetricDialogBase from base/ for shared metric dialog functionality to reduce duplication across provider-specific dialogs
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
📚 Learning: 2025-12-20T16:32:46.829Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/metric/_components/**/*.tsx : Consider factory pattern for metric dialogs to reduce the 5 nearly identical wrapper components (currently duplicated across providers)
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
📚 Learning: 2025-12-20T16:32:46.829Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/metric/_components/**/*.tsx : Metric dialogs should follow the pattern: [Provider]MetricDialog.tsx (dialog wrapper) + [Provider]MetricContent.tsx (form content) and be registered in src/app/metric/_components/index.ts
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
📚 Learning: 2025-12-20T16:32:46.829Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to src/app/teams/[teamId]/**/*.tsx : Consolidate role node duplication: extract shared RoleNodeTemplate from role-node.tsx and public-role-node.tsx with isEditable prop instead of maintaining separate components
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsx
📚 Learning: 2025-12-20T16:32:46.829Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-20T16:32:46.829Z
Learning: Applies to **/*canvas*.{ts,tsx} : Use React Flow primitives (BaseNode, BaseHandle, ZoomSlider) from src/components/react-flow/ for consistent canvas styling
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
📚 Learning: 2025-12-20T22:12:00.576Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-20T22:12:00.576Z
Learning: The Metrics Pipeline processes data through 3 stages: DataIngestionTransformer (Raw API → MetricDataPoint), ChartTransformer (MetricDataPoint → Chart Config), and Visualization (Chart Config → Recharts UI)
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsx
📚 Learning: 2025-12-20T22:12:00.576Z
Learnt from: CR
Repo: drifter089/orgOS PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-20T22:12:00.576Z
Learning: Applies to src/app/teams/[teamId]/**/*.tsx : React Flow nodes must store minimal data (e.g., just `roleId`); fetch full Role data from TanStack Query cache in the Node component to keep canvas and sidebars in sync
Applied to files:
src/app/dashboard/[teamId]/_components/dashboard-metric-drawer.tsxsrc/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx
🧬 Code graph analysis (2)
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsx (6)
src/lib/platform-config.ts (1)
getPlatformConfig(94-103)src/components/ui/drawer.tsx (4)
DrawerContent(131-131)DrawerHeader(132-132)DrawerTitle(134-134)DrawerClose(130-130)src/components/ui/tooltip.tsx (3)
Tooltip(62-62)TooltipTrigger(62-62)TooltipContent(62-62)src/components/ui/badge.tsx (1)
Badge(51-51)src/lib/utils.ts (1)
cn(4-6)src/components/ui/button.tsx (1)
Button(62-62)
src/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (10)
src/app/dashboard/[teamId]/_components/dashboard-metric-card.tsx (4)
69-71: LGTM!The conditional platform configuration retrieval is clean and uses proper optional chaining.
244-244: Drawer height reduction aligns with PR objectives.The reduction from 90vh to 70vh accommodates the new dedicated header layout described in the PR summary.
289-303: LGTM! Check-in button correctly gated for manual metrics.The conditional rendering ensures only manual metrics (non-integration) can receive manual data entry, which is the correct behavior. The tooltip provides helpful context.
268-275: The platform badge color application is correct and requires no changes.The color classes in
platformConfigare static strings hardcoded inPLATFORM_CONFIG, not dynamically generated at runtime. Tailwind CSS 4's PostCSS plugin automatically discovers these static class strings during the build process. Thecn()function withtailwind-mergecorrectly merges the background and text color classes. No safelist configuration is needed.Likely an incorrect or invalid review comment.
src/app/dashboard/[teamId]/_components/dashboard-metric-chart.tsx (6)
60-72: LGTM! Time formatting logic is sound.The function correctly handles different cadences and uses defensive coding with
Math.max(0, ...)to prevent negative time displays.
125-130: LGTM! Time elapsed calculation is correct.The percentage calculation correctly computes the elapsed portion of the goal period.
660-665: LGTM! Goal target display is clear and well-positioned.The right-aligned target value with the red Target icon provides good visual contrast with the current value.
668-715: Review goal progress color thresholds and UI density.The goal progress visualization includes:
- Color thresholds: Green (≥100%), primary (≥70%), amber (<70%) at lines 676-680
- Small text size:
text-[10px]with multiple progress indicators, icons, and labels- Two progress bars: Goal progress and time elapsed shown simultaneously
Consider:
- Are the 70% and 100% thresholds documented or configurable? They seem reasonable but may need adjustment based on user feedback.
- The UI packs significant information (two progress bars, percentages, time remaining, date range) into a small space. Verify this remains readable across different screen sizes and zoom levels.
These thresholds and spacing should be tested for usability. If you'd like, I can help identify similar threshold patterns in the codebase to ensure consistency.
707-714: LGTM! Date range display uses consistent formatting.The date range visualization with date-fns provides a clear indication of the goal period.
717-722: LGTM! "No goal set" indicator is clear and appropriately styled.The amber warning with AlertTriangle icon provides a non-critical but noticeable indicator for metrics without goals.
Summary
Improves the metric drawer UI by moving the title and close button to a proper header, reducing drawer height, and adding goal progress information directly to metric cards.
Key Changes
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.