← back to Goodquestion

src/components/market/IncomeProjections.tsx

128 lines

'use client'

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'
import { DollarSign } from 'lucide-react'
import type { IncomeProjection } from '@/types/swot'

interface IncomeProjectionsProps {
  projections: IncomeProjection[]
}

export function IncomeProjections({ projections }: IncomeProjectionsProps) {
  const formatCurrency = (value: number) => {
    if (value >= 1000000) {
      return `$${(value / 1000000).toFixed(1)}M`
    }
    if (value >= 1000) {
      return `$${(value / 1000).toFixed(0)}K`
    }
    return `$${value.toLocaleString()}`
  }

  const chartData = projections.map(p => ({
    year: p.year,
    Optimistic: p.optimistic,
    Realistic: p.realistic,
    Pessimistic: p.pessimistic,
  }))

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <DollarSign className="h-5 w-5" />
          Income Projections
        </CardTitle>
        <CardDescription>
          Projected annual revenue based on market analysis
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={350}>
          <LineChart data={chartData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="year" />
            <YAxis tickFormatter={formatCurrency} />
            <Tooltip
              formatter={(value: any) => formatCurrency(value)}
              contentStyle={{ backgroundColor: 'white', border: '1px solid #ccc' }}
            />
            <Legend />
            <Line
              type="monotone"
              dataKey="Optimistic"
              stroke="#22c55e"
              strokeWidth={2}
              dot={{ fill: '#22c55e', r: 4 }}
            />
            <Line
              type="monotone"
              dataKey="Realistic"
              stroke="#3b82f6"
              strokeWidth={3}
              dot={{ fill: '#3b82f6', r: 5 }}
            />
            <Line
              type="monotone"
              dataKey="Pessimistic"
              stroke="#ef4444"
              strokeWidth={2}
              dot={{ fill: '#ef4444', r: 4 }}
            />
          </LineChart>
        </ResponsiveContainer>

        {/* Projection Details */}
        <div className="space-y-4 mt-6">
          {projections.map((projection, index) => (
            <div key={index} className="border rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <div className="font-semibold text-lg">Year {projection.year}</div>
                <div className="text-sm text-muted-foreground">
                  Confidence: {projection.confidence}%
                </div>
              </div>
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <div className="text-xs text-green-600 font-medium mb-1">
                    Optimistic
                  </div>
                  <div className="text-xl font-bold text-green-700">
                    {formatCurrency(projection.optimistic)}
                  </div>
                </div>
                <div>
                  <div className="text-xs text-blue-600 font-medium mb-1">
                    Realistic
                  </div>
                  <div className="text-xl font-bold text-blue-700">
                    {formatCurrency(projection.realistic)}
                  </div>
                </div>
                <div>
                  <div className="text-xs text-red-600 font-medium mb-1">
                    Pessimistic
                  </div>
                  <div className="text-xl font-bold text-red-700">
                    {formatCurrency(projection.pessimistic)}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}