refactor: adopt Bulletproof React architecture and reorganize frontend into feature-based modules#433
Merged
Conversation
Introduce a self-contained features/ layer for ai-maker, auditor, dashboard, and home domains with api/, components/, context/, types/, and utils/ sub-directories. - features/ai-maker: React Query hooks, OrganizationContext, bulk-evaluation queries - features/auditor: React Query hooks for assignments and evaluations - features/dashboard/components: shared dashboard UI components - features/home/components: landing-page sections - components/layout/: MainNav, MainFooter, Sidebar, MobileNav - components/common/: Breadcrumbs, Pagination, Loading, SessionGuard, ProfileMenu - lib/: slimmed to third-party wrappers (graphql-client, rest-client, auth) - utils/: pure utility functions extracted from lib/ - stores/: Zustand stores moved from config/store.tsx - providers/: React providers moved from app/providers.tsx - hooks/use-app-session.ts: moved from lib/session.ts - constants/index.ts: route paths, status enums, pagination defaults - types/index.ts: shared domain types Co-authored-by: Cursor <cursoragent@cursor.com>
Update every page, layout, and component in app/ and shared components to import from the new feature-based and shared module paths. - app/[locale]/ pages: import dynamic sections from features/home/ - app/[locale]/dashboard/: import layout components from components/layout/ - app/[locale]/dashboard/ai-maker/: use features/ai-maker/* imports - app/[locale]/dashboard/auditor/: use features/auditor/* imports - components/ProfileMenu, SessionGuard: updated to new lib/auth path - hooks/use-session-error: import logout from lib/auth - lib/api-client, lib/session: updated cross-module references - lib/bulkEvaluation/mapAuditResults: import from features/ai-maker/utils - config/codegen.ts: scan features/** for GraphQL documents - .gitignore: add /generated/ for codegen output Co-authored-by: Cursor <cursoragent@cursor.com>
Set up code quality and Git hook tooling for the project. - .prettierrc.json: formatting rules with @trivago/prettier-plugin-sort-imports and prettier-plugin-tailwindcss - .lintstagedrc.json: run eslint --fix and prettier --write on staged files - .husky/pre-commit: run lint-staged before every commit - .husky/commit-msg: enforce conventional commit format via commitlint - commitlint.config.ts: conventional-commits rule set - package.json: add postinstall (husky), test, and test:coverage scripts Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce testing infrastructure and initial smoke tests. - vitest.config.ts: Vitest config with jsdom environment and path aliases - testing/setup.ts: global test setup (jest-dom matchers, fetch mock) - testing/utils.tsx: custom renderWithProviders() wrapping QueryClient, SessionProvider, and NextIntlClientProvider - utils/index.test.ts: smoke tests for buildUrl, formatDate, formatNumber, truncateText, cn, and getInitials utilities - utils/lifecycle.test.ts: smoke tests for formatLifecycle and lifecycle label/color helpers Co-authored-by: Cursor <cursoragent@cursor.com>
Split the 1,656-line EvaluationDetail.tsx into focused modules with reusability as the first-class concern, fixing existing duplication between EvaluationDetail and AuditResultsList in the process. Shared layers (importable by anything in the codebase): - features/dashboard/types/audit.ts: single source of truth for Audit, TestCase, RiskDistribution, EvaluationDetailProps types - features/dashboard/utils/evaluation.ts: 15+ pure helpers — status guards, formatModuleName, getSeverityTagColors, risk distribution logic - features/dashboard/api/evaluation-queries.ts: all 4 GraphQL strings + re-exports of bulk-eval queries as a single barrel Reusable display components: - EvaluationSummaryCard: pass rate, test counts, risk distribution grid - EvaluationProgressSection: in-progress bar - EvaluationFailedBanner: failure state with error details EvaluationDetail-specific folder: - use-evaluation-detail.ts: all state, fetching, polling, handlers in one hook - EvaluationHeader.tsx: editable name input + status tags + back button - EvaluationActions.tsx: submit / generate report / download buttons - EvaluationDetail.tsx: ~200-line orchestration component - index.ts: barrel export Duplication fixed: - AuditResultsList.tsx: removed local getRiskTagColors and formatModuleDisplayName; now imports from shared utils Backward compatibility: - features/dashboard/components/EvaluationDetail.tsx: shim - app/[locale]/dashboard/components/EvaluationDetail.tsx: shim (all consuming pages need zero changes) Co-authored-by: Cursor <cursoragent@cursor.com>
Delete the two backward-compat shims and point consumer pages straight at the canonical implementation. - Delete app/[locale]/dashboard/components/EvaluationDetail.tsx (shim) - Delete features/dashboard/components/EvaluationDetail.tsx (shim) - Update auditor evaluationId page to import from @/features/dashboard/components/EvaluationDetail - Update ai-maker evaluationId page to import from @/features/dashboard/components/EvaluationDetail - Update features/dashboard/components/index.ts barrel to point at EvaluationDetail/index - Fix UseEvaluationDetailReturn type: add passRate and passRateColor to computed; remove as any cast Co-authored-by: Cursor <cursoragent@cursor.com>
The component breakdown (EvaluationSummaryCard, EvaluationHeader, EvaluationActions, EvaluationProgressSection, EvaluationFailedBanner, use-evaluation-detail sub-hooks) caused layout regressions in the Evaluation Summary section. Reverting to the original single-file implementation until the breakdown can be done without UI side-effects. - Restore features/dashboard/components/EvaluationDetail.tsx (1655 lines) - Delete features/dashboard/components/EvaluationDetail/ folder and all its contents (EvaluationDetail.tsx, EvaluationHeader, EvaluationActions, use-evaluation-detail.ts, index.ts) - Delete standalone EvaluationSummaryCard, EvaluationProgressSection, EvaluationFailedBanner components - Restore AuditResultsList.tsx to its original local helpers - Restore features/dashboard/components/index.ts barrel Consumer pages retain the @/features/dashboard/components/EvaluationDetail import from the previous commit (still resolves correctly). Co-authored-by: Cursor <cursoragent@cursor.com>
…sion" This reverts commit 2de6413.
Co-authored-by: Cursor <cursoragent@cursor.com>
…maryCard Co-authored-by: Cursor <cursoragent@cursor.com>
…oid wrong redirect path Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR restructures the ParakhAI frontend around a Bulletproof React-style architecture to improve maintainability, discoverability, and long-term scalability. The work moves domain logic out of route files and monolithic components into feature modules, shared layers, and focused hooks—without changing product behavior.
Architecture
features/:features/ai-maker— evaluation flows, manual evaluation, org context, and AI-maker API hooksfeatures/auditor— auditor assignments and evaluation APIsfeatures/dashboard— shared dashboard UI (EvaluationDetail, filters, audit views, guards)features/home— landing page sectionscomponents/common— reusable primitives (Pagination, ProgressBar, SessionGuard, RichTextRenderer, etc.)components/layout— MainNav, Sidebar, MainFooter, MobileNavproviders/— app-level providers (React Query, session, tooltip)lib/— GraphQL/REST clients, auth helpersutils/,constants/,types/,stores/— centralized shared utilities and typesKey refactors
EvaluationDetail(~1,600 lines) into composable pieces:EvaluationHeader,EvaluationSummaryCard,EvaluationActions,EvaluationProgressSection, etc.use-audit-data,use-audit-polling,use-audit-actions,use-evaluation-detailfeatures/ai-maker/components/evaluations/features/and shared modulesDeveloper experience
use-evaluations,use-ai-models,use-organizations) to separate data fetching from presentationBug fixes included in this branch
EvaluationHeaderandEvaluationSummaryCardNEXT_PUBLIC_AI_MAKER_URLto prevent incorrect redirect paths