← back to Goodquestion

src/components/action-plan/ActionPlan.tsx

167 lines

'use client'

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import {
  CheckCircle2,
  Circle,
  Clock,
  DollarSign,
  AlertCircle,
} from 'lucide-react'
import type { ActionItem } from '@/types/swot'

interface ActionPlanProps {
  actionItems: ActionItem[]
}

export function ActionPlan({ actionItems }: ActionPlanProps) {
  const getPriorityColor = (priority: ActionItem['priority']) => {
    switch (priority) {
      case 'critical':
        return 'destructive'
      case 'high':
        return 'warning'
      case 'medium':
        return 'secondary'
      case 'low':
        return 'outline'
    }
  }

  const getCategoryIcon = (category: ActionItem['category']) => {
    const iconClass = 'h-5 w-5'
    switch (category) {
      case 'domain':
        return <Circle className={iconClass} />
      case 'infrastructure':
        return <Circle className={iconClass} />
      case 'marketing':
        return <Circle className={iconClass} />
      case 'research':
        return <Circle className={iconClass} />
      case 'development':
        return <Circle className={iconClass} />
    }
  }

  const getStatusIcon = (status: ActionItem['status']) => {
    switch (status) {
      case 'completed':
        return <CheckCircle2 className="h-5 w-5 text-green-600" />
      case 'in-progress':
        return <Clock className="h-5 w-5 text-blue-600" />
      case 'not-started':
        return <Circle className="h-5 w-5 text-gray-400" />
    }
  }

  const groupedItems = actionItems.reduce((acc, item) => {
    if (!acc[item.category]) {
      acc[item.category] = []
    }
    acc[item.category].push(item)
    return acc
  }, {} as Record<string, ActionItem[]>)

  const categoryNames: Record<ActionItem['category'], string> = {
    domain: 'Domain & Hosting',
    infrastructure: 'Infrastructure Setup',
    marketing: 'Marketing & Advertising',
    research: 'Market Research',
    development: 'Development',
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Next Steps & Action Plan</CardTitle>
        <CardDescription>
          Recommended actions to launch your business
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {Object.entries(groupedItems).map(([category, items]) => (
            <div key={category}>
              <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                {getCategoryIcon(category as ActionItem['category'])}
                {categoryNames[category as ActionItem['category']]}
              </h3>
              <div className="space-y-3">
                {items.map(item => (
                  <div
                    key={item.id}
                    className="border rounded-lg p-4 hover:shadow-md transition-shadow"
                  >
                    <div className="flex items-start justify-between mb-2">
                      <div className="flex items-start gap-3 flex-1">
                        {getStatusIcon(item.status)}
                        <div className="flex-1">
                          <h4 className="font-semibold">{item.title}</h4>
                          <p className="text-sm text-muted-foreground mt-1">
                            {item.description}
                          </p>
                        </div>
                      </div>
                      <Badge variant={getPriorityColor(item.priority)}>
                        {item.priority}
                      </Badge>
                    </div>

                    <div className="flex items-center gap-4 mt-3 text-sm">
                      {item.estimatedCost && (
                        <div className="flex items-center gap-1 text-muted-foreground">
                          <DollarSign className="h-4 w-4" />
                          <span>${item.estimatedCost.toLocaleString()}</span>
                        </div>
                      )}
                      {item.estimatedTime && (
                        <div className="flex items-center gap-1 text-muted-foreground">
                          <Clock className="h-4 w-4" />
                          <span>{item.estimatedTime}</span>
                        </div>
                      )}
                    </div>

                    {item.dependencies && item.dependencies.length > 0 && (
                      <div className="mt-3 flex items-start gap-2">
                        <AlertCircle className="h-4 w-4 text-orange-500 mt-0.5" />
                        <div className="text-xs text-muted-foreground">
                          <strong>Dependencies:</strong> Requires completion of other tasks
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Summary Stats */}
        <div className="grid grid-cols-3 gap-4 mt-6 p-4 bg-muted/50 rounded-lg">
          <div className="text-center">
            <div className="text-2xl font-bold text-green-600">
              {actionItems.filter(i => i.status === 'completed').length}
            </div>
            <div className="text-xs text-muted-foreground">Completed</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-blue-600">
              {actionItems.filter(i => i.status === 'in-progress').length}
            </div>
            <div className="text-xs text-muted-foreground">In Progress</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-gray-600">
              {actionItems.filter(i => i.status === 'not-started').length}
            </div>
            <div className="text-xs text-muted-foreground">Not Started</div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}