Data - Copy this React, Tailwind Component to your project

Okey, pero la data llega en este formato al componente que te pedi hacer import React, { useState, useEffect } from "react"; import { FaChartBar, FaVideo } from "react-icons/fa"; import Swal from "sweetalert2"; import Dashboard from "./Dashboard"; import config from "../../config/config"; function DashboardWrapper({ isCameraSelected, showDashboard, setShowDashboard, }) { const [undetectedChartData, setUndetectedChartData] = useState(null); const [identifiedChartData, setIdentifiedChartData] = useState(null); const [historicalUndetectedChartData, setHistoricalUndetectedChartData] = useState(null); const [historicalIdentifiedChartData, setHistoricalIdentifiedChartData] = useState(null); useEffect(() => { if (showDashboard) { const loadDashboardData = async () => { try { const [ undetectedLogs, identifiedLogs, historicalUndetectedLogs, historicalIdentifiedLogs, ] = await Promise.all([ fetchLogs(`${config.apiUrl}/reports/undetected/daily`), fetchLogs(`${config.apiUrl}/reports/employee/daily`), fetchLogs(`${config.apiUrl}/reports/undetected/historic`), fetchLogs(`${config.apiUrl}/reports/employee/historic`), ]); setUndetectedChartData( formatChartData(undetectedLogs, "Intentos Fallidos de Detección") ); setIdentifiedChartData( formatEmployeeData( identifiedLogs, "Detecciones de Empleados Diario" ) ); setHistoricalUndetectedChartData( formatChartData( historicalUndetectedLogs, "Histórico de Intentos Fallidos" ) ); setHistoricalIdentifiedChartData( formatEmployeeData( historicalIdentifiedLogs, "Histórico de Detecciones de Empleados" ) ); } catch (error) { Swal.fire( "Error", "Error al cargar los datos del dashboard.", "error" ); } }; loadDashboardData(); } }, [showDashboard]); const fetchLogs = async (url) => { const response = await fetch(url); if (!response.ok) { throw new Error(`Error al obtener los datos de ${url}`); } const data = await response.json(); return data.data; }; const formatChartData = (logs, label) => ({ labels: logs.slice(1).map((log) => log[1]), datasets: [ { label, data: logs.slice(1).map((log) => log[0]), borderColor: "rgba(255, 99, 132, 1)", backgroundColor: "rgba(255, 99, 132, 0.2)", fill: true, }, ], }); const formatEmployeeData = (logs, label) => { const employeeCounts = logs.slice(1).reduce((acc, log) => { const name = `${log[0]} ${log[1]}`; acc[name] = (acc[name] || 0) + 1; return acc; }, {}); return { labels: Object.keys(employeeCounts), datasets: [ { label, data: Object.values(employeeCounts), backgroundColor: "rgba(54, 162, 235, 0.2)", borderColor: "rgba(54, 162, 235, 1)", borderWidth: 1, }, ], }; }; const handleDownloadCSV = () => { const downloadCSV = (data, filename) => { const csvContent = "data:text/csv;charset=utf-8," + data.map((e) => e.join(",")).join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", `${filename}.csv`); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; if (undetectedChartData) { downloadCSV( undetectedChartData.datasets[0].data, "Intentos_Fallidos_Diarios" ); } if (historicalUndetectedChartData) { downloadCSV( historicalUndetectedChartData.datasets[0].data, "Historico_Intentos_Fallidos" ); } if (identifiedChartData) { downloadCSV( identifiedChartData.datasets[0].data, "Detecciones_Empleados_Diarias" ); } if (historicalIdentifiedChartData) { downloadCSV( historicalIdentifiedChartData.datasets[0].data, "Historico_Detecciones_Empleados" ); } }; return ( <> {isCameraSelected && ( <button onClick={() => setShowDashboard((prev) => !prev)} className="fixed bottom-6 right-6 px-6 py-3 flex items-center gap-2 bg-[#07143d]/90 hover:bg-[#07143d] text-[#f4f4f8] rounded-full shadow-lg transition-all duration-300 z-50 font-medium" > {showDashboard ? ( <> <FaVideo className="text-xl" /> <span className="hidden sm:inline">Volver al Video</span> </> ) : ( <> <FaChartBar className="text-xl" /> <span className="hidden sm:inline">Ver Reportes</span> </> )} </button> )} {showDashboard && ( <Dashboard undetectedChartData={undetectedChartData} identifiedChartData={identifiedChartData} historicalUndetectedChartData={historicalUndetectedChartData} historicalIdentifiedChartData={historicalIdentifiedChartData} handleDownloadCSV={handleDownloadCSV} /> )} </> ); } export default DashboardWrapper; ademas me gustaria que uses los colores de #07143d;#f4f4f8 y gradientes, como mejorarias ambos componentes