Main Components

This section provides usage guidelines for the primary UI components used across the Indian Startup Funding Tracker. These components are designed with a "neo-brutalist" aesthetic, utilizing thick borders and high-contrast elements.

DealCard

The DealCard component provides a concise summary of a specific funding transaction. It is typically used in grids to provide a high-level overview before a user navigates to the full deal details.

Props

Usage

The component expects a deal object where the amount is an integer representing value in Lakhs (e.g., 100 = 1 Crore).

import { DealCard } from "@/components/deal-card";

const dealData = {
  id: "123",
  company: "TechFlow",
  amount: 500, // ₹5 Crore
  stage: "Series A",
  sectors: ["SaaS", "Fintech"],
  investors: ["Accel", "Tiger Global"],
  date: "2024-03-15",
  location: "Bengaluru"
};

export default function MyComponent() {
  return (
    <div className="max-w-md">
      <DealCard deal={dealData} />
    </div>
  );
}

AnalyticsDashboard

The AnalyticsDashboard is a high-level client component that processes raw funding data and renders a suite of visualizations using recharts. It handles data aggregation for monthly trends, sector distribution, and investor rankings internally.

Usage

This component does not require props; it automatically consumes and processes data from @/data/funding-data.

import { AnalyticsDashboard } from "@/components/analytics-dashboard";

export default function AnalyticsPage() {
  return (
    <section>
      <h2>Funding Insights</h2>
      <AnalyticsDashboard />
    </section>
  );
}

Key Features:

Monetary Normalization: Automatically converts Lakhs to Crores/Billions for chart readability.
Responsive Containers: Charts scale to fit the parent container's width.
Disclosed vs. Undisclosed Logic: Specifically filters out deals with 0 amount for monetary charts while including them for count-based charts.

FilterPanel

The FilterPanel is a complex state-driven component used to narrow down results in the exploration interface. It supports multi-select checkboxes, dropdowns, and range sliders.

Props

Usage

The FilterPanel is intended to be used alongside a state-managed list (like DealsList).

import { FilterPanel } from "@/components/filter-panel";
import { useState } from "react";

export function ExploreView() {
  const [selectedSectors, setSelectedSectors] = useState<string[]>([]);
  const [fundingRange, setFundingRange] = useState<[number, number]>([0, 10000]);

  return (
    <FilterPanel 
      sectors={["Fintech", "Healthtech", "Edtech"]}
      selectedSectors={selectedSectors}
      setSelectedSectors={setSelectedSectors}
      fundingRange={fundingRange}
      setFundingRange={setFundingRange}
      // ... include other required filter props
    />
  );
}

HeroStats

The HeroStats component provides an immediate snapshot of the entire dataset. It calculates and displays key performance indicators (KPIs) such as total funding, total deal count, and the most active industry.

Usage

This is a self-contained component that calculates metrics directly from the data source. It is best placed at the top of the landing page.

import { HeroStats } from "@/components/hero-stats";

export default function HomePage() {
  return (
    <main>
      <HeroStats />
      {/* Rest of the homepage content */}
    </main>
  );
}

Displayed Metrics:

Total Disclosed Funding: Sum of all deals where the amount is > 0.
Total Deals: Absolute count of entries, including undisclosed amounts.
Most Active Sector: The sector appearing most frequently across all deals.
Largest Deal: The single highest disclosed funding amount in the dataset.