of PRs reviewed

Design a modern, clean B2B SaaS web interface for a platform that uses AI to review Pull Requests (PRs) from GitHub, GitLab, and Bitbucket. The platform helps companies automate PR review based on predefined rules and offers feedback, approval suggestions, and analytics.

The app will be built using Next.js 14 and shadcn/ui components with Tailwind CSS. Use a layout and styling approach similar to Linear, Vercel, or GitHub — sleek, minimal, and developer-oriented.

🌐 Key Requirements

1. Sidebar Navigation Layout

   • Company logo or switcher at the top
   • Menu items:
     • Dashboard
     • Projects
     • Pull Request History
     • Reports
     • Settings

2. Top Navigation Bar

   • User avatar with dropdown (profile, logout)
   • Notifications icon
   • “New Project” button
   • Search bar or filter (optional)

📁 Projects Page

• Grid or table showing all projects the user has access to
• Each project card should show:
  • Project name
  • Repository platform (GitHub, GitLab, Bitbucket icons)
  • Number of PRs reviewed
  • Average score
  • Button: “View Details”

📂 Project Detail Page

• Header with project name and repo info

• Section to manually input or paste a PR URL to start a review

  • "Start Review" button

• Upon submission, display a loading/processing screen with progress animation and explanation:

  • e.g. “Analyzing code quality, checking rule violations… This may take a few minutes.”

• Once the review is ready:

  • Display result: Approve / Reject
  • Violations with rule-based explanations
  • Suggestions for improvement
  • Score out of 100
  • PR Author(s), date, and commit count

📈 Reports Page

• Charts and visualizations:
  • PR approval/rejection trends over time
  • Top contributors
  • Most common rule violations
• Filters:
  • By project
  • By date range
  • By PR outcome (approved/rejected)

🧾 Pull Request History Page

• Table view listing historical PR reviews

  • Columns: PR title, project, score, status (approved/rejected), author, date

• Allow filtering by:

  • Project
  • Author
  • Status
  • Date

• Option to toggle:

  • View company-wide PRs
  • View project-specific PRs

👤 Profile Page (for logged-in user)

• Stats for the user:
  • Number of PRs opened
  • Number of PRs approved / rejected
  • Average review score
  • Recent activity log
• Option to manage profile settings (name, email, notification preferences)

⚙️ Settings Page

• Company-wide and user-specific settings
  • Rule configuration
  • Notification preferences
  • Repository integrations
  • Access roles / permissions

🎨 Design Notes

• Use shadcn/ui components like Card, Tabs, Progress, Table, Dialog, and Toast
• Ensure mobile responsiveness and a fluid grid layout
• Use Lucide icons
• Use meaningful empty states (e.g., “No PRs yet — start by pasting a PR link”)
• Provide subtle animations or transitions for loading states (e.g., AI is processing the PR...)

Design a modern, responsive, and developer-centric SaaS web application interface for a platform that uses AI to review GitHub, GitLab, and Bitbucket pull requests. The platform helps companies enforce code quality via custom rule sets and provides actionable feedback per PR.

The app is built using Next.js 14 and shadcn/ui. The design should be clean and professional, inspired by platforms like Linear, Vercel, and GitHub. Use a modern aesthetic with smooth spacing, well-balanced typography, and subtle shadows.

🌙 Design Mode

• Create both light mode and dark mode
• Default to dark mode for a developer-friendly experience
• Use Tailwind's dark class strategy
• Ensure good contrast and accessibility

📌 Pages and Components to Design

1. Sidebar Layout with Top Navigation

• Persistent sidebar with:
  • Logo or company switcher
  • Navigation:
    • Dashboard
    • Projects
    • Pull Request History
    • Reports
    • Rule Sets
    • Settings
• Topbar with:
  • Search
  • Notifications
  • User avatar menu (Profile, Logout)

2. Projects Page

• Grid or list of user-accessible projects
• Each project card includes:
  • Project name
  • Repo provider (icon)
  • Average PR score
  • Number of PRs
  • Action: View Details

3. Project Detail Page

• Overview section:
  • Repo details
  • Average PR score
  • Contributors (avatars or names)
• Action panel:
  • Input field to start a PR review by pasting a PR URL
  • Button: “Start Review”
• Include a loading overlay or animation while analysis runs (AI might take 1-3 minutes)
• After review, show:
  • PR Score
  • Violated rules (with inline explanations)
  • Suggestions
  • Approve/Reject Recommendation

4. Pull Request History Page

• Table or filterable list of past PRs
• Columns:
  • PR Title
  • Project
  • Author
  • Score
  • Status (Approved / Rejected / Needs Fix)
  • Date
• Toggle to view history by:
  • Company-wide
  • Per project

5. Reports Page

• Charts and graphs showing:
  • Review trends over time
  • Approval rates
  • Top violated rules
  • Team PR volume per user

6. Rule Sets Management

• Separate pages for:
  • Global (Company-wide) Rules
  • Project-specific Rules
• Allow adding/editing/removing rules dynamically
• Rules can include:
  • Linting checks
  • Test coverage thresholds
  • Naming conventions
• Include toggles, dropdowns, text areas for creating rules
• Validation should be clear

7. User Profile Page

• Stats for current user:
  • PRs submitted
  • Approvals
  • Rejections
  • Average score
• Option to edit basic profile info

💡 Design Notes / Suggestions

• Use modular cards, tabs, and toast notifications where relevant
• Use skeleton loaders or animated placeholders during PR analysis
• Maintain consistent padding and visual hierarchy across pages
• Consider Dialog or Drawer components (from shadcn/ui) for in-page modals and quick rule edits
• Use Lucide icons for a clean and consistent visual language

📦 Components to highlight with shadcn/ui:

• <Card>, <Tabs>, <Skeleton>, <Toast>, <Dialog>, <Avatar>, <Progress>, <Badge>, <Button>, <Input>, <Textarea>