work pls

Author: luedu1103

src/components/AdminDashboard.tsx

@@ -2,13 +2,17 @@ import React, { useState, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import axios from 'axios';
+import '../index.css';
 
 const AdminDashboard: React.FC = () => {
   const [ads, setAds] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true); // State for loading spinner
+  const [error, setError] = useState<string | null>(null); // State for error handling
 
   useEffect(() => {
     const fetchAds = async () => {
       try {
+        setLoading(true); // Start loading
         const token = localStorage.getItem('token');
         const response = await axios.get('https://api.contigosanmarcos.com/panel/notifications', {
           headers: {
@@ -19,17 +23,24 @@ const AdminDashboard: React.FC = () => {
           setAds(response.data);
         } else {
           console.error('Unexpected data format:', response.data);
+          setError('Unexpected data format received from the server.');
         }
       } catch (error) {
         console.error('Error fetching ads:', error);
-        alert('Para gestionar los banners inicia sesión primero');
+        setError('Error fetching ads. Please log in to manage the banners.');
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchAds();
   }, []);
 
   const handleDelete = async (index: number) => {
+    if (!window.confirm('Are you sure you want to delete this ad?')) {
+      return;
+    }
+
     const adToDelete = ads[index];
     const response = await fetch(`https://api.contigosanmarcos.com/panel/notifications/${adToDelete.id}`, {
       method: 'DELETE',
@@ -48,10 +59,15 @@ const AdminDashboard: React.FC = () => {
 
   return (
     <div className="admin-dashboard">
-      <div className="ad-list">
-        {ads.length > 0 ? (
-          ads.map((ad, index) =>
-              <div key={index} className={`ad ad-item ${ad.ad_type}`}>
+      {loading ? (
+        <p>Loading ads...</p> // Display loading message
+      ) : error ? (
+        <p className="error-message">{error}</p> // Display error message if any
+      ) : (
+        <div className="ad-list">
+          {ads.length > 0 ? (
+            ads.map((ad, index) => (
+              <div key={ad.id} className={`ad ad-item ${ad.ad_type}`}>
                 {ad.ad_type === 'banner' ? (
                   <div className="ad-banner">
                     {ad.image_url && <img src={ad.image_url} alt={ad.ad_title} />}
@@ -73,16 +89,21 @@ const AdminDashboard: React.FC = () => {
                   </div>
                 )}
                 <div className="ad-controls">
-                  <button className="icon-button delete-button" onClick={() => handleDelete(index)} style={{ color: 'red' }}>
-                    <FontAwesomeIcon icon={faTrashAlt} /> 
+                  <button
+                    className="icon-button delete-button"
+                    onClick={() => handleDelete(index)}
+                    style={{ color: 'red' }}
+                  >
+                    <FontAwesomeIcon icon={faTrashAlt} />
                   </button>
                 </div>
               </div>
-          )
-        ) : (
-          <p>No ads available.</p>
-        )}
-      </div>
+            ))
+          ) : (
+            <p>No ads available.</p>
+          )}
+        </div>
+      )}
     </div>
   );
 };

src/index.css

@@ -18,6 +18,10 @@ h2 {
   color: #f8f6f6;
 }
 
+.white-text {
+  color: white;
+}
+
 form, .dashboard-container {
   width: 100%;
   background-color: rgb(0, 0, 0);