Campaign Dashboard - Copy this React, Tailwind Component to your project

Generate un dashboard con el resumen de una campaña esta es la informacion 'use client' import { useCampaign } from "@/hooks/use campaigns" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { CalendarIcon, PhoneIcon, RefreshCcwIcon, UserIcon } from 'lucide react' import { Skeleton } from "@/components/ui/skeleton" import { ErrorFallback } from "@/components/layout/error fallback" interface CampaignSummaryProps { campaignId: number session: string | null } export function CampaignSummary({ campaignId, session }: CampaignSummaryProps) { const { data: campaign, isLoading} = useCampaign(campaignId, session) if (isLoading) return <Loading /> if (!campaign) return <ErrorFallback/> return ( <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> <Card> <CardHeader> <CardTitle>Estado de la Campaña</CardTitle> </CardHeader> <CardContent> <Badge variant={campaign.estado === 'ACTIVO' ? 'default' : 'secondary'}> {campaign.estado} </Badge> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Rango de Fechas</CardTitle> </CardHeader> <CardContent className="space y 2"> <div className="flex items center"> <CalendarIcon className="mr 2 h 4 w 4" /> <span>Inicio: {new Date(campaign.fecha_inicio).toLocaleString()}</span> </div> <div className="flex items center"> <CalendarIcon className="mr 2 h 4 w 4" /> <span>Fin: {new Date(campaign.fecha_fin).toLocaleString()}</span> </div> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Configuración de Llamadas</CardTitle> </CardHeader> <CardContent className="space y 2"> <div className="flex items center"> <PhoneIcon className="mr 2 h 4 w 4" /> <span>Canales: {campaign.canales_llamada}</span> </div> <div className="flex items center"> <RefreshCcwIcon className="mr 2 h 4 w 4" /> <span>Reintentos: {campaign.reintento_contactos}</span> </div> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Información Adicional</CardTitle> </CardHeader> <CardContent className="space y 2"> <div className="flex items center"> <UserIcon className="mr 2 h 4 w 4" /> <span>Cuenta ID: {campaign.cuenta_id}</span> </div> <p>Descripción: {campaign.description}</p> </CardContent> </Card> </div> ) } function Loading() { return ( <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> {[...Array(5)].map((_, i) => ( <Card key={i}> <CardHeader> <Skeleton className="h 4 w [150px]" /> </CardHeader> <CardContent> <Skeleton className="h 4 w [200px]" /> <Skeleton className="h 4 w [180px] mt 2" /> </CardContent> </Card> ))} </div> ) } sin embargo siento que es muy simple.. hazlo mas interactivo y grafico para el usuario por favor