Detailed Component Registry

PlugZero Analytics utilizes a highly modular component architecture. Every UI element is categorized by its Domain Responsibility to prevent code bloat and ensure high reusability.

🏗️ Atomic UI Layer (src/components/ui)

These are our “Base Particles.” They are data-naive and rely purely on props for styling. We use Shadcn UI (Radix UI + Tailwind) as the foundation.

• Layout: card.tsx, resizable.tsx, scroll-area.tsx, separator.tsx, sheet.tsx.
• Forms: button.tsx, input.tsx, select.tsx, checkbox.tsx, radio-group.tsx, switch.tsx, textarea.tsx.
• Feedback: alert.tsx, progress.tsx, sonner.tsx (Toasts), badge.tsx.
• Overlays: dialog.tsx, popover.tsx, tooltip.tsx, dropdown-menu.tsx.
• Navigation: tabs.tsx, command.tsx (the search palette).

📊 Analytics & Reporting (src/components/analytics)

This directory houses our most complex logic. These components handle the “Intelligence” rendering.

The Intelligence Builders

• AnalysisBuilder.tsx: A 60KB+ powerhouse component. It manages the state for complex math queries (Crosstabs, Means, Driver Analysis) and communicates directly with the lib/api/analysis layer.
• VisualizationBuilder.tsx: The UI for selecting chart types, colors, and axis variables.
• ReportBuilder.tsx: A drag-and-drop workspace for combining AI text, charts, and data tables into a single document.

The Renderers

• VisualizationRenderer.tsx: The ultimate wrapper for all charts. It handles empty states, loading skeletons, and error boundaries before rendering a specific chart.
• SimpleBarChart.tsx / SimpleLineChart.tsx: Recharts-based wrappers optimized for the dashboard’s responsive grid.
• HighlightableReport.tsx: Enables the “Anchored Collaboration” feature where users can highlight text to leave comments.

📝 Survey Engine (src/components/surveys)

Everything required to build and deploy research missions.

• SurveyBuilder.tsx: The visual canvas for adding questions and setting logic rules.
• LogicBranchBuilder.tsx: A specialized interface for defining “If/Then” routing within a survey.
• FocusSurveyRenderer.tsx: The high-performance client that respondents use to answer surveys. Optimized for 60fps transitions and mobile layout.
• InterceptsDashboard.tsx: Manages the configuration for on-site website overlays and pop-up surveys.

📂 Data Collection & Projects (src/components/data-collection)

This domain manages the ingestion and organization of raw assets.

• RawFileUploadForm.tsx: Handles multi-file Drag-and-Drop, chunked uploads, and initial header validation.
• WebScraper.tsx: The UI for the automated research crawler. Allows users to enter URLs and see real-time parsing results.
• FileViewer.tsx: A high-performance spreadsheet viewer for browsing raw CSV/Excel data inside the browser.
• CampaignWorkflowEditor.tsx: A visual editor for setting up multi-stage research campaigns.

👥 Teams & Administration (src/components/teams, account)

• TeamManager.tsx: Interfaces for inviting users, revoking tokens, and changing member roles.
• TwoFactorSetup.tsx: The security flow for enabling TOTP authentication.

🛠️ Global Architectural Rules

import { cn } from "@/lib/utils"
 
export interface AnalysisCardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'default' | 'accent'
}
 
export function AnalysisCard({ variant = 'default', className, ...props }: AnalysisCardProps) {
  return (
    <div 
      className={cn(
        "p-6 rounded-xl border border-border bg-card shadow-sm",
        variant === 'accent' && "border-brand-primary/50 bg-brand-primary/5",
        className
      )}
      {...props}
    />
  )
}