Refactor to use Tailwind

src/pages/Dashboard.jsx

@@ -16,31 +16,31 @@ const Dashboard = () => {
   };
 
   return (
-    <div className="dashboard-container">
-      <h1 className="dashboard-title">Visão Geral</h1>
+    <div className="max-w-3xl mx-auto p-5">
+      <h1 className="text-2xl font-bold mb-5">Visão Geral</h1>
 
       {/* Cards com informações resumidas */}
-      <div className="dashboard-summary">
-        <div className="card">
+      <div className="flex flex-wrap gap-4 mb-6">
+        <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
           <h3>Status do Sistema</h3>
           <p>{mockDashboardData.status}</p>
         </div>
-        <div className="card">
+        <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
           <h3>Consumo de Energia</h3>
           <p>{mockDashboardData.energyConsumed} kWh</p>
         </div>
-        <div className="card">
+        <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
           <h3>Tempo de Carregamento</h3>
           <p>{mockDashboardData.chargingTime} minutos</p>
         </div>
       </div>
 
       {/* Indicadores de falhas ou alertas */}
-      <div className="alerts">
-        <h2>Alertas</h2>
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold mb-2">Alertas</h2>
         <ul>
           {mockDashboardData.alerts.map((alert, index) => (
-            <li key={index} className="alert-item">
+            <li key={index} className="p-2 bg-red-500 text-white rounded mb-2">
               <span>⚠️ {alert}</span>
             </li>
           ))}
@@ -48,24 +48,24 @@ const Dashboard = () => {
       </div>
 
       {/* Tabela de Carregadores */}
-      <div className="chargers-table">
-        <h2>Carregadores</h2>
-        <table>
+      <div>
+        <h2 className="text-xl font-semibold mb-2">Carregadores</h2>
+        <table className="min-w-full border border-gray-300 text-left">
           <thead>
             <tr>
-              <th>ID</th>
-              <th>Status</th>
-              <th>Corrente (A)</th>
-              <th>Potência (W)</th>
+              <th className="border-b p-2">ID</th>
+              <th className="border-b p-2">Status</th>
+              <th className="border-b p-2">Corrente (A)</th>
+              <th className="border-b p-2">Potência (W)</th>
             </tr>
           </thead>
           <tbody>
             {mockDashboardData.chargers.map((charger) => (
               <tr key={charger.id}>
-                <td>{charger.id}</td>
-                <td>{charger.status}</td>
-                <td>{charger.current}</td>
-                <td>{charger.power}</td>
+                <td className="border-b p-2">{charger.id}</td>
+                <td className="border-b p-2">{charger.status}</td>
+                <td className="border-b p-2">{charger.current}</td>
+                <td className="border-b p-2">{charger.power}</td>
               </tr>
             ))}
           </tbody>