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

Quiero-que-actues-como-un-experto-UX/IU-respecto-a-la-elaboracion-de-dashboards-interactivos,-bien-estructurados-y-que-transmitan-de-forma-grafica-bien-clara-la-informacion-tengo-este-componente-"use-client";-import-React-from-"react";-import-{-useCampaignMetrics,-useCallDistribution,-useCampaignEmotions-}-from-"@/hooks/use-campaigns";-interface-CampaignAnaliticsProps-{-campaignId:-number;-session:-string;-}-export-function-CampaignAnalitics({-campaignId,-session-}:-CampaignAnaliticsProps)-{-const-{-data:-metrics,-isLoading:-metricsLoading,-error:-metricsError-}-=-useCampaignMetrics(campaignId,-session);-const-{-data:-callDistribution,-isLoading:-callDistributionLoading,-error:-callDistributionError-}-=-useCallDistribution(campaignId,-session);-const-{-data:-emotions,-isLoading:-emotionsLoading,-error:-emotionsError-}-=-useCampaignEmotions(campaignId,-session);-console.log(metrics,-callDistribution,-emotions);-return-(-<div-className="space-y-4">-<h1-className="text-xl-font-bold">Analíticas-de-la-Campaña</h1>-{/*-Mostrar-estado-de-carga-o-errores-*/}-{metricsLoading-&&-<p>Cargando-métricas...</p>}-{metricsError-&&-<p>Error-al-cargar-métricas:-{metricsError.message}</p>}-{callDistributionLoading-&&-<p>Cargando-distribución-de-llamadas...</p>}-{callDistributionError-&&-<p>Error-al-cargar-distribución-de-llamadas:-{callDistributionError.message}</p>}-{emotionsLoading-&&-<p>Cargando-emociones...</p>}-{emotionsError-&&-<p>Error-al-cargar-emociones:-{emotionsError.message}</p>}-{/*-Datos-cargados-*/}-{!metricsLoading-&&-metrics-&&-<p>Métricas-cargadas,-revisa-la-consola.</p>}-{!callDistributionLoading-&&-callDistribution-&&-<p>Distribución-de-llamadas-cargada,-revisa-la-consola.</p>}-{!emotionsLoading-&&-emotions-&&-<p>Emociones-cargadas,-revisa-la-consola.</p>}-</div>-);-}-de-momento-solo-tengo-eso..-era-para-probar-estos-son-los-3-objetos-que-me-retorna-mi-API-con-esta-informacion-elabora-un-dashboard-bien-estructurado,-interactivo.-{-"calls_answered_percentage":-35.29,-"average_call_duration":-"00:01:03",-"longest_call_duration":-"00:01:20",-"shortest_call_duration":-"00:00:50",-"total_calls_answered":-6,-"total_calls":-17,-"objective_completed":-35.29-}{-"main_states":-{-"EFFECTIVE":-{-"count":-6,-"percentage":-35.29-},-"FAILED":-{-"count":-9,-"percentage":-52.94-},-"NO_ANSWER":-{-"count":-2,-"percentage":-11.76-}-},-"detailed_states":-{-"PENDIENTE":-{-"count":-5,-"percentage":-29.41-},-"FUERA_DE_SERVICIO":-{-"count":-4,-"percentage":-23.53-},-"CONTESTADA":-{-"count":-6,-"percentage":-35.29-},-"NO_CONTESTADA":-{-"count":-2,-"percentage":-11.76-}-},-"total_calls":-17-}{-"campaign_id":-22,-"total_conversations":-6,-"emotions_distribution":-{-"surprise":-1,-"neutral":-13,-"confusion":-4,-"joy":-1,-"sadness":-1-},-"average_confidence":-{-"surprise":-0.8,-"neutral":-0.7958333333333334,-"confusion":-0.8125,-"joy":-0.8,-"sadness":-0.6-},-"example_messages":-{-"surprise":-[-"Ah-cabrón."-],-"neutral":-[-"Halo.",-"Claro,-cuéntame-de-ella.",-"Tengo-una.",-"Aló.",-"Alo."-],-"confusion":-[-"¿Sí,-por-favor,-explícame-cuál-es-la-diferencia-entre-el-interés-compuesto-y-simple-y-cómo-se-relaciona-con-el-sistema-alemán?",-"Que-abrir-una-cuenta-bancaria-o-acercarme-de-manera-física.",-"Perdón,-estoy-confundido-que-tarjeta.",-"¿Cuánto-de-cupo-tengo?"-],-"joy":-[-"Pero-es-que-estaba-con-el-interés-que-tenías-entradas.-Muchas-gracias."-],-"sadness":-[-"Tímido."-]-},-"timestamp":-"2024-12-19T18:25:38.668427"-}