AdminDashboard.js

import React, { useState, useEffect } from 'react';

function AdminDashboard({ onLogout }) {
    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch('http://localhost:8000/all-items')
            .then(res => res.json())
            .then(data => setItems(data));
    }, []);

    return (
        <div style={{ background: '#0f2027', minHeight: '100vh', color: '#fff', padding: '40px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '2px solid #4b6cb7', paddingBottom: '20px' }}>
                <h1>Admin Dashboard</h1>
                <button onClick={onLogout} style={{ background: '#e53e3e', color: '#fff', border: 'none', padding: '10px 20px', borderRadius: '5px', cursor: 'pointer' }}>Logout</button>
            </div>

            <div style={{ marginTop: '30px' }}>
                <h2>All Campus Reports</h2>
                {items.map((item, idx) => (
                    <div key={idx} style={{ background: 'rgba(0,0,0,0.5)', padding: '15px', margin: '10px 0', borderRadius: '8px', borderLeft: item.item_type === 'lost' ? '5px solid red' : '5px solid green' }}>
                        <p><b>[{item.item_type.toUpperCase()}]</b> {item.category}</p>
                        <p>Description: {item.description}</p>
                        <p>Location: {item.location}</p>
                        <button style={{ background: '#27ae60', border: 'none', color: '#fff', padding: '5px 10px', borderRadius: '3px', marginRight: '10px' }}>Approve</button>
                        <button style={{ background: '#c0392b', border: 'none', color: '#fff', padding: '5px 10px', borderRadius: '3px' }}>Delete</button>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default AdminDashboard;