Display user feedback in the admin panel & other minor improvements - #595
Conversation
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe admin system adds revenue, billing, bot-block, and feedback capabilities; richer project and organisation details; comparison analytics and activation funnels; sortable tables; shared chart components; and expanded loader, route, type, and UI wiring. ChangesAdmin analytics and operations
Estimated code review effort: 5 (Critical) | ~120 minutes Sequence Diagram(s)sequenceDiagram
participant AdminPage
participant AdminRoute
participant AdminController
participant AdminService
participant DataStores
AdminPage->>AdminRoute: Request tab and query parameters
AdminRoute->>AdminController: Fetch admin tab data
AdminController->>AdminService: Load analytics, details, billing, or feedback
AdminService->>DataStores: Query MySQL, ClickHouse, Redis, or Paddle
DataStores-->>AdminService: Aggregated admin data
AdminService-->>AdminController: Typed response payload
AdminController-->>AdminRoute: JSON response
AdminRoute-->>AdminPage: Loader data for the selected tab
Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/app/pages/Admin/OverviewTab.tsx`:
- Around line 263-285: Update the growth MetricCards in Admin
OverviewTab—Signups, Projects created, Organisations created, and Events
processed—to use goodChangeDirection='up' so positive count changes are treated
as favorable; leave their values, change calculations, and valueMapper settings
unchanged.
In `@web/app/pages/Admin/ProjectsTab.tsx`:
- Around line 513-540: Update the rank cell in the topProjects table so it
derives the traffic rank from the original unsorted topProjects.projects list
rather than the sorted map index. Keep sorting behavior for the other columns
unchanged, and preserve the stable rank when users sort by Project, Owner, or
Created.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: e93e5cc8-d389-4824-8a10-1ac7812a51a6
📒 Files selected for processing (17)
backend/apps/cloud/src/admin/admin.controller.tsbackend/apps/cloud/src/admin/admin.module.tsbackend/apps/cloud/src/admin/admin.service.tsweb/app/pages/Admin/AdminChart.tsxweb/app/pages/Admin/BillingTab.tsxweb/app/pages/Admin/BotBlocksTab.tsxweb/app/pages/Admin/DatabaseTab.tsxweb/app/pages/Admin/FeedbackTab.tsxweb/app/pages/Admin/OrganisationsTab.tsxweb/app/pages/Admin/OverviewTab.tsxweb/app/pages/Admin/ProjectsTab.tsxweb/app/pages/Admin/UsersTab.tsxweb/app/pages/Admin/components.tsxweb/app/pages/Admin/index.tsxweb/app/pages/Admin/types.tsweb/app/routes/admin.tsxweb/app/ui/Select.tsx
| <MetricCard | ||
| label='Signups' | ||
| value={totals.signups.current} | ||
| change={totals.signups.current - totals.signups.previous} | ||
| goodChangeDirection='down' | ||
| valueMapper={countMetricMapper} | ||
| /> | ||
| <MetricCard | ||
| label='Projects created' | ||
| value={totals.projects.current} | ||
| change={totals.projects.current - totals.projects.previous} | ||
| goodChangeDirection='down' | ||
| valueMapper={countMetricMapper} | ||
| /> | ||
| <MetricCard | ||
| label='Organisations created' | ||
| value={totals.organisations.current} | ||
| change={ | ||
| totals.organisations.current - totals.organisations.previous | ||
| } | ||
| goodChangeDirection='down' | ||
| valueMapper={countMetricMapper} | ||
| /> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
motion react MetricCard goodChangeDirection ChangeBadge colour semantics
💡 Result:
In modern React UI development—often using libraries like Framer Motion with component frameworks like shadcn/ui—the semantic coloring and directional logic for metric cards and badges follow established design patterns rather than a single, universal API [1][2][3]. Semantic Colour Semantics and Trends Metric cards typically determine color semantics based on the relationship between the change and the metric's business context [4][5]. - Trend Directionality: A common pattern involves a trendDirection or trend prop (e.g., 'up-good', 'up-bad', 'down-good', 'down-bad') [4]. This allows developers to invert the meaning of 'up' or 'down' based on the metric type (e.g., an increase in 'Revenue' is good, while an increase in 'Churn' or 'Latency' is bad) [5]. - Implementation: Trend indicators are typically rendered via a Badge component that dynamically assigns CSS classes (e.g., Tailwind 'text-green-500' for positive, 'text-red-500' for negative) based on the calculated trend direction [2][6]. Motion and Badges - Motion Integration: When using Motion (Framer Motion), badges are often wrapped in motion.create() or motion.span to enable entrance/exit animations [7][8]. - Direction-Aware Animation: Advanced implementations use AnimatePresence combined with a custom direction prop (e.g., 'forward' or 'back') to trigger coordinate-based animations (like sliding or morphing) [9]. - Accessibility: Best practices dictate that color alone should never convey trend direction [1]. Developers are encouraged to pair semantic colors with icons (e.g., arrows) and screen-reader-accessible labels (aria-hidden icons with sr-only text) to ensure the UI remains perceivable to users with color vision deficiencies [1]. Summary of Common Props While implementations vary by UI library, common prop patterns include [4][5][10]: - trendDirection: 'up-good' | 'up-bad' | 'down-good' | 'down-bad' - invertTrend: boolean (often used to toggle whether 'down' is considered positive) - status: 'ok' | 'warning' | 'critical' (often used for border or background accents)
Citations:
- 1: https://7onic.design/components/metric-card
- 2: https://vercel.com/academy/shadcn-ui/extending-shadcn-ui-with-custom-components
- 3: https://www.shadcn.io/blocks/carousel-stats-metrics
- 4: https://registry.npmjs.org/%40annondeveloper%2Fui-kit
- 5: https://cognivo.pro/components/cg-metric-card
- 6: https://www.shadcn.io/blocks/carousel-analytics-cards
- 7: https://motion.dev/tutorials/react-multi-state-badge
- 8: https://www.freecodecamp.org/news/how-to-build-an-animated-badge-component-with-shadcn-ui/
- 9: https://sinja.io/blog/direction-aware-animations-in-framer-motion
- 10: https://matos-ui.com/docs/components/metric-card
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Tracked files matching OverviewTab and MetricCard:"
git ls-files | rg '(^|/)(OverviewTab\.(tsx|ts|jsx|js)|MetricCard\.(tsx|ts|jsx|js))$|MetricCard$' || true
echo
echo "Search MetricCard definition/usages:"
rg -n "class MetricCard|const MetricCard|function MetricCard|export .*MetricCard|goodChangeDirection|ChangeBadge" -S .Repository: Swetrix/swetrix
Length of output: 4237
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "OverviewTab relevant sections:"
sed -n '70,110p;205,340p' web/app/pages/Admin/OverviewTab.tsx | cat -n
echo
echo "Traffic MetricCards ChangeBadge implementation:"
sed -n '33,107p' web/app/pages/Project/tabs/Traffic/MetricCards.tsx | cat -n
echo
echo "Consistency check: growth metric current values are never negative-like counts"
python3 - <<'PY'
from pathlib import Path
p = Path('web/app/pages/Admin/OverviewTab.tsx')
text = p.read_text()
for label in ['Signups', 'Projects created', 'Organisations created', 'Events']:
import re
m = re.search(rf"label='{re.escape(label)}'.*?goodChangeDirection=([^,\n>]+)|label=\{{'\*?Events")
print(label, m.group(0) if m else 'NOT FOUND')
PYRepository: Swetrix/swetrix
Length of output: 9822
Use goodChangeDirection='up' for growth MetricCards.
Signups, Projects created, Organisations created, and Events processed count increases as growth. With goodChangeDirection='down', a positive delta is shown as slate/no-positive-color, while a decline is shown green (good); these cards should use goodChangeDirection='up' unless the design intentionally requires slate for positive growth.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/app/pages/Admin/OverviewTab.tsx` around lines 263 - 285, Update the
growth MetricCards in Admin OverviewTab—Signups, Projects created, Organisations
created, and Events processed—to use goodChangeDirection='up' so positive count
changes are treated as favorable; leave their values, change calculations, and
valueMapper settings unchanged.
1 participant
Changes
If applicable, please describe what changes were made in this pull request.
Community Edition support
Database migrations
Documentation
Summary by CodeRabbit