Update AdminPage and Organizations components for improved tab manage…#486
Update AdminPage and Organizations components for improved tab manage…#486
Conversation
…ment and formatting - Changed the default active tab in AdminPage from "users" to "organizations" for better user experience. - Consolidated and streamlined JSX formatting in Organizations component for enhanced readability. - Introduced a new utility function, parseUtcTimestamp, for converting UTC timestamps to local time. - Improved consistency in the handling of subscription status and event counts across components.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. WalkthroughThe updates include stylistic and formatting refinements in admin UI components and backend API handlers, with the addition of a Changes
Sequence Diagram(s)sequenceDiagram
participant AdminUI
participant BackendAPI
participant SubscriptionService
participant Database
participant StripeAPI
AdminUI->>BackendAPI: Request organizations/sites data
BackendAPI->>Database: Query organizations/sites ordered by createdAt desc
BackendAPI->>SubscriptionService: getOrganizationSubscriptions(organizations)
SubscriptionService->>StripeAPI: Fetch active subscriptions by customer IDs (paginated)
StripeAPI-->>SubscriptionService: Return subscription data
SubscriptionService-->>BackendAPI: Return mapped subscription data
BackendAPI-->>AdminUI: Return enriched organizations/sites data with subscriptions and event counts
AdminUI->>parseUtcTimestamp: Parse createdAt timestamps (organizations)
Estimated code review effort3 (~45 minutes) Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
- Added support for tracking events over the last 30 days in the admin site data. - Introduced subscription details in the admin site and organization responses, improving visibility into user plans. - Refactored event count retrieval to streamline data fetching from Clickhouse for both 24-hour and 30-day periods. - Updated the Sites component to display new subscription and event count information, enhancing the admin interface.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
client/src/app/admin/components/sites/Sites.tsx (2)
9-9: Unused import detected.The
parseUtcTimestampimport is not used in this file. Consider removing it or implementing its usage for consistent date handling.-import { parseUtcTimestamp } from "@/lib/dateTimeUtils";
44-44: Use optional chaining for better readability.The static analysis tool correctly identifies that optional chaining would be more concise and readable.
- (site.organizationOwnerEmail && site.organizationOwnerEmail.toLowerCase().includes(lowerSearchQuery)) + site.organizationOwnerEmail?.toLowerCase().includes(lowerSearchQuery)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
client/src/app/admin/components/organizations/Organizations.tsx(16 hunks)client/src/app/admin/components/sites/Sites.tsx(8 hunks)client/src/app/admin/page.tsx(2 hunks)client/src/lib/dateTimeUtils.ts(1 hunks)server/src/api/admin/getAdminOrganizations.ts(9 hunks)server/src/api/admin/getAdminSites.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
{client,server}/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (3)
client/src/app/admin/components/sites/Sites.tsx (2)
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Applies to client/**/*.{tsx} : Client: Use React functional components with minimal useEffect and inline functions
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Frontend: Use Next.js, Tailwind CSS, Shadcn UI, Tanstack Query, Zustand, Luxon, and Nivo
server/src/api/admin/getAdminOrganizations.ts (1)
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Backend: Use Fastify, Drizzle ORM (Postgres), and ClickHouse
client/src/app/admin/components/organizations/Organizations.tsx (3)
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Applies to client/**/*.{tsx} : Client: Use React functional components with minimal useEffect and inline functions
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Applies to {client,server}/**/*.{ts,tsx} : Group imports by external, then internal, and sort alphabetically within groups
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Frontend: Use Next.js, Tailwind CSS, Shadcn UI, Tanstack Query, Zustand, Luxon, and Nivo
🧬 Code Graph Analysis (3)
server/src/api/admin/getAdminSites.ts (3)
server/src/lib/auth-utils.ts (1)
getIsUserAdmin(26-36)server/src/db/postgres/postgres.ts (1)
db(20-20)server/src/db/postgres/schema.ts (1)
sites(48-77)
client/src/app/admin/components/sites/Sites.tsx (3)
client/src/app/admin/components/shared/SortableHeader.tsx (1)
SortableHeader(13-36)client/src/components/Favicon.tsx (1)
Favicon(4-32)client/src/app/admin/components/shared/SearchInput.tsx (1)
SearchInput(13-30)
server/src/api/admin/getAdminOrganizations.ts (2)
server/src/db/postgres/schema.ts (2)
organization(138-152)sites(48-77)client/src/api/admin/getAdminOrganizations.ts (1)
AdminOrganizationData(4-33)
🪛 Biome (1.9.4)
client/src/app/admin/components/sites/Sites.tsx
[error] 44-44: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build Client Images (ubuntu-24.04-arm, linux/arm64)
- GitHub Check: Build Client Images (ubuntu-latest, linux/amd64)
🔇 Additional comments (21)
client/src/lib/dateTimeUtils.ts (1)
213-220: Well-implemented utility function.The
parseUtcTimestampfunction is correctly implemented with proper JSDoc documentation and uses the appropriate Luxon methods for UTC timestamp parsing and local time conversion.client/src/app/admin/page.tsx (3)
12-12: Consistent default tab update.The change from "users" to "organizations" as the default active tab aligns with the PR objectives and is consistently applied.
17-17: Proper defaultValue synchronization.The Tabs component's defaultValue is correctly updated to match the activeTab state.
21-21: Tab order updated to reflect new priority.Moving the users tab after sites reflects the new emphasis on organizations as the primary focus.
server/src/api/admin/getAdminSites.ts (2)
23-25: Improved performance with database-level ordering.Moving the sorting operation from JavaScript to the database query with
orderByis more efficient and aligns with the frontend's emphasis on recent sites.
83-83: Clean formatting improvement.The conditional assignment formatting is more concise while maintaining readability.
client/src/app/admin/components/sites/Sites.tsx (1)
80-82: Improved date handling.Removing the unnecessary
new Date()wrapper simplifies the code sinceformatDistanceToNowcan handle string timestamps directly.client/src/app/admin/components/organizations/Organizations.tsx (4)
10-10: Good import addition for consistent date handling.The
parseUtcTimestampimport is properly added and used in the component.
132-134: Proper timezone-aware date parsing.Using
parseUtcTimestampensures consistent handling of UTC timestamps from the server, converting them to local time for display. This is a significant improvement over directnew Date()usage.
86-86: Clean error handling simplification.The error message extraction is more concise while maintaining type safety.
101-101: Acceptable nested ternary for subscription status.The nested ternary is readable and appropriate for this simple three-way conditional logic.
server/src/api/admin/getAdminOrganizations.ts (10)
8-8: Import consolidation looks good.The consolidation of the import statement into a single line improves readability without affecting functionality.
21-21: Function formatting improvement.The single-line formatting with trailing comma follows TypeScript best practices and improves consistency.
60-60: Function signature formatting is consistent.The single-line function signature aligns with the coding guidelines and improves readability.
112-112: Conditional formatting improvement.The formatting consolidation maintains the same logic while improving readability. The ternary operator correctly handles the case when
allOrgIds.lengthis 0.
144-144: Console warning formatting improvement.The single-line formatting is more concise while maintaining the same functionality.
165-166: Filtering and mapping consolidation looks good.The single-line formatting improves readability while maintaining the same filtering logic for organizations with Stripe customer IDs.
200-205: Object property formatting improvements.The consolidation of multiline property assignments into single lines improves consistency and readability. The logic remains unchanged.
212-212: Pagination logic formatting improvement.The single-line formatting maintains the same array access logic while being more concise.
226-245: Organization mapping consolidation is well-structured.The reformatting of the organization mapping from multiline to a more compact structure improves readability. The logic remains functionally equivalent:
- Proper subscription data retrieval
- Correct fallback handling for missing subscription data
- Appropriate default values for free plans
70-70: Verify frontend handling of organization sortingThe server API for admin organizations now orders by
createdAt(descending) instead ofmonthlyEventCount. A search in theclient/directory didn’t reveal any code that explicitly sorts or assumes sorting bymonthlyEventCount. Please manually confirm:
- The Admin Organizations list in the client UI displays organizations in the correct order (newest first).
- Any related components or tests that may rely on the previous event-count ordering.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
client/src/api/admin/getAdminSites.ts(1 hunks)client/src/app/admin/components/sites/Sites.tsx(8 hunks)server/src/api/admin/getAdminOrganizations.ts(6 hunks)server/src/api/admin/getAdminSites.ts(3 hunks)server/src/services/admin/subscriptionService.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- server/src/api/admin/getAdminSites.ts
🧰 Additional context used
📓 Path-based instructions (1)
{client,server}/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- CLAUDE.md
🧠 Learnings (2)
server/src/api/admin/getAdminOrganizations.ts (1)
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Backend: Use Fastify, Drizzle ORM (Postgres), and ClickHouse
client/src/app/admin/components/sites/Sites.tsx (2)
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Applies to client/**/*.{tsx} : Client: Use React functional components with minimal useEffect and inline functions
Learnt from: CR
PR: rybbit-io/rybbit#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-17T23:25:24.134Z
Learning: Frontend: Use Next.js, Tailwind CSS, Shadcn UI, Tanstack Query, Zustand, Luxon, and Nivo
🧬 Code Graph Analysis (1)
server/src/api/admin/getAdminOrganizations.ts (3)
server/src/db/postgres/schema.ts (2)
organization(138-152)sites(48-77)server/src/services/admin/subscriptionService.ts (1)
getOrganizationSubscriptions(104-146)client/src/api/admin/getAdminOrganizations.ts (1)
AdminOrganizationData(4-33)
🪛 Biome (1.9.4)
client/src/app/admin/components/sites/Sites.tsx
[error] 44-44: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build Client Images (ubuntu-24.04-arm, linux/arm64)
- GitHub Check: Build Client Images (ubuntu-latest, linux/amd64)
🔇 Additional comments (6)
client/src/api/admin/getAdminSites.ts (1)
10-15: LGTM! Interface properly extended for new data fields.The additions to
AdminSiteDatainterface correctly define the new subscription data structure and 30-day event count field, aligning with the backend changes.client/src/app/admin/components/sites/Sites.tsx (2)
80-82: Good simplification!Removing the unnecessary
new Date()wrapper is correct sincerow.getValue("createdAt")already returns a valid date string thatformatDistanceToNowcan parse directly.
98-117: Well-implemented new columns with proper status-based styling.The Events (30d) column correctly formats the count with locale-aware number formatting, and the Subscription column implements appropriate badge styling based on status (active → default, canceled → destructive, others → secondary).
server/src/api/admin/getAdminOrganizations.ts (2)
8-9: Excellent refactoring to centralize subscription logic.The replacement of manual Stripe API pagination with the
getOrganizationSubscriptionsservice improves code maintainability and reusability. The non-null assertion on line 162 is safe since the service guarantees a value for every organization (either actual subscription data or free plan defaults).Also applies to: 157-174
63-63: Ordering change aligns with improved UX.Changing from
monthlyEventCounttocreatedAtdescending order shows newest organizations first, which is typically more useful for administrators.server/src/services/admin/subscriptionService.ts (1)
1-146: Well-architected subscription service with proper error handling.This new service effectively centralizes subscription data retrieval with several strong implementation details:
- Proper Stripe API pagination with rate limiting (20 req/s)
- Defensive programming with fallback values for missing data
- Consistent error handling that logs but doesn't throw
- Clear separation between fetching raw data and organization mapping
- Appropriate use of TypeScript types and interfaces
The service ensures every organization receives subscription data (either actual or free plan defaults), making it safe for consumers to use non-null assertions.
- Integrated GrowthChart into both Organizations and Sites components to visualize data trends. - Enhanced user interface by providing graphical representation of organization and site data. - Maintained consistent styling and functionality across both components.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…ment and formatting
Summary by CodeRabbit
New Features
Style
Refactor