← back to Sdcc Awards

cypressaward/frontend/components/home/featured-cases.tsx

147 lines

'use client'

import { useEffect, useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Calendar, DollarSign, MapPin, ArrowRight, AlertCircle, Scale } from 'lucide-react'
import Link from 'next/link'
import { supabase } from '@/lib/supabase'

interface Case {
  id: number
  title: string
  court: string
  date_filed: string
  docket_number: string
  summary: string
  url: string
  source: string
}

export function FeaturedCases() {
  const [cases, setCases] = useState<Case[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchCases()
  }, [])

  async function fetchCases() {
    try {
      const { data, error } = await supabase
        .from('scraped_cases')
        .select('*')
        .or('title.ilike.%cy pres%,title.ilike.%cypres%,summary.ilike.%cy pres%,summary.ilike.%cypres%,title.ilike.%class action%,summary.ilike.%settlement%,summary.ilike.%unclaimed funds%')
        .order('created_at', { ascending: false })
        .limit(3)

      if (error) throw error
      setCases(data || [])
    } catch (error) {
      console.error('Error fetching cases:', error)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="animate-pulse space-y-4">
        {[1, 2, 3].map(i => (
          <div key={i} className="h-48 bg-gray-200 rounded-lg"></div>
        ))}
      </div>
    )
  }

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold">Featured Current Cases</h2>
        <Link href="/cases">
          <Button variant="outline" size="sm">
            View All Cases
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </Link>
      </div>

      <div className="space-y-4">
        {cases?.map((case_item) => (
          <Card key={case_item.id} className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <div className="flex justify-between items-start">
                <div className="flex-1">
                  <CardTitle className="text-lg">{case_item.title}</CardTitle>
                  <CardDescription className="mt-1">
                    <span className="flex items-center gap-4 text-sm">
                      <span className="flex items-center">
                        <MapPin className="h-3 w-3 mr-1" />
                        {case_item.court}
                      </span>
                      <span className="flex items-center">
                        <Calendar className="h-3 w-3 mr-1" />
                        Filed {new Date(case_item.date_filed).toLocaleDateString()}
                      </span>
                    </span>
                  </CardDescription>
                </div>
                <Badge className="bg-blue-100 text-blue-800">
                  {case_item.source}
                </Badge>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                <div className="flex flex-wrap gap-2">
                  <Badge variant="secondary" className="bg-purple-100 text-purple-800">
                    <Scale className="h-3 w-3 mr-1" />
                    {case_item.docket_number}
                  </Badge>
                </div>

                {case_item.summary && (
                  <div className="bg-blue-50 p-3 rounded-md">
                    <p className="text-sm text-blue-900 line-clamp-3">
                      {case_item.summary}
                    </p>
                  </div>
                )}

                <div className="flex gap-2">
                  <Link href="/cases" className="flex-1">
                    <Button className="w-full" size="sm" variant="outline">
                      View All Cases
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </Link>
                  {case_item.url && (
                    <a 
                      href={case_item.url} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="flex-1"
                    >
                      <Button className="w-full" size="sm">
                        View Original
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Button>
                    </a>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
        <p className="text-sm text-yellow-800">
          <strong>Live Data:</strong> These are real court cases from our database, including Supreme Court 
          decisions, student loan bankruptcy cases, and cy pres settlements. Updated hourly.
        </p>
      </div>
    </div>
  )
}