Skip to content

Components

Components are organized by feature in the frontend/src/components/ directory. Each feature has its own subdirectory containing related components.

Component Organization

components/
    auth/               # Authentication-related components
    carbon/             # Carbon profile forms and visualizations
    companies/          # Company CRUD and profile components
    grants/             # Grant cards, search, and detail views
    matches/            # Match results and score displays
    dashboard/          # Dashboard widgets and statistics
    applications/       # Application forms and tracking
    landing/            # Landing page marketing sections
    layout/             # Header, sidebar, footer, navigation
    filters/            # Search filters and facet controls
    ui/                 # shadcn/ui primitive components
    CommandPalette.tsx  # Global command palette (Cmd+K)

Feature Components

Authentication (auth/)

Login and registration forms with OAuth2 password flow support.

  • Login form with email/password
  • Registration form with tenant creation
  • Password reset flow
  • Email verification

Carbon Profile (carbon/)

Forms and visualizations for entering and displaying Scope ½/3 emission data.

  • Scope 1 input forms (natural gas, diesel, company vehicles)
  • Scope 2 input forms (electricity by region, district heating)
  • Scope 3 input forms (optional, by GHG Protocol category)
  • Emission summary cards with tCO2e totals
  • Reduction target settings
  • Certification selection (ISO 14001, SBTi, CDP, B Corp)

Companies (companies/)

Company profile management with CRUD operations.

  • Company list with filtering
  • Company create/edit forms
  • NACE code selection
  • Country selection
  • Employee count and revenue inputs
  • Logo upload

Grants (grants/)

Grant search, filtering, and detail views.

  • Grant search bar with full-text search
  • Filter panels (country, NACE, carbon category, funding range)
  • Grant card (summary view with key details)
  • Grant detail page (full description, eligibility, deadlines)
  • Similar grants recommendations
  • Deadline countdown indicators

Matches (matches/)

Match results display with score breakdowns.

  • Match list with score indicators
  • Score breakdown visualization (rule, semantic, carbon, collaborative, recency)
  • Save/dismiss/restore actions
  • Match statistics dashboard
  • Carbon alignment indicators

Dashboard (dashboard/)

Overview statistics and activity widgets.

  • Stats cards (total grants, matches, applications, companies)
  • Recent activity feed
  • Upcoming deadlines widget
  • Match score distribution chart
  • Quick action buttons

Applications (applications/)

Application tracking with Kanban-style status management.

  • Application list with status filters
  • Application create form (company + grant selection)
  • AI content generation interface
  • Document upload/management
  • Status transitions (draft -> submitted -> approved)

Landing (landing/)

Marketing and informational sections for the public landing page.

  • Hero section with call-to-action
  • Feature highlights
  • How it works flow
  • Pricing information
  • Testimonials

Layout (layout/)

Shared layout components used across the application.

  • Header -- Top navigation bar with user menu
  • Sidebar -- Dashboard navigation with route highlighting
  • Footer -- Site footer with links

Filters (filters/)

Reusable filter and search control components.

  • Country multi-select
  • NACE code search/select
  • Carbon category checkboxes
  • Funding range slider
  • Status filter toggles
  • Sort control

UI Primitives (ui/)

The ui/ directory contains shadcn/ui components built on Radix UI primitives. These are the foundational building blocks used across all feature components:

  • Button, Input, Textarea
  • Card, Badge, Avatar
  • Dialog, Sheet, Popover
  • Select, Checkbox, RadioGroup
  • Table, Tabs, Accordion
  • Toast, Alert, Skeleton
  • DropdownMenu, NavigationMenu
  • Form (with react-hook-form integration)
  • Command (for command palette)

Adding New shadcn/ui Components

cd frontend
npx shadcn-ui@latest add <component-name>

Command Palette

The CommandPalette.tsx component provides a global search and navigation interface, accessible via Cmd+K (macOS) or Ctrl+K (Windows/Linux).

Features:

  • Search across grants, companies, and applications
  • Quick navigation to any page
  • Keyboard shortcut hints
  • Recent items

Component Guidelines

Functional Components

All components are functional components with hooks:

interface GrantCardProps {
  grant: Grant;
  onSave?: (id: string) => void;
  variant?: "compact" | "full";
}

export function GrantCard({ grant, onSave, variant = "compact" }: GrantCardProps) {
  // Component logic
}

Data Fetching

Components use React Query hooks from lib/api/hooks/ for data fetching:

import { useGrants, useGrantSearch } from "@/lib/api/hooks";

export function GrantList() {
  const { data, isLoading, error } = useGrants({ page: 1, per_page: 20 });

  if (isLoading) return <Skeleton />;
  if (error) return <Alert variant="destructive">{error.message}</Alert>;

  return (
    <div className="grid gap-4">
      {data?.items.map((grant) => (
        <GrantCard key={grant.id} grant={grant} />
      ))}
    </div>
  );
}

Styling

Components use Tailwind CSS utility classes. The cn() utility from lib/utils.ts merges class names:

import { cn } from "@/lib/utils";

<div className={cn(
  "rounded-lg border p-4",
  isActive && "border-primary bg-primary/5",
  className,
)} />