import React, { useState, useEffect } from 'react';
function CompassDashboard() {
const [user, setUser] = useState(null);
const [departments, setDepartments] = useState([]);
const [emailStats, setEmailStats] = useState(null);
const [loading, setLoading] = useState(true);
const [token, setToken] = useState(localStorage.getItem('token'));
useEffect(() => {
if (token) {
loadDashboard();
}
}, [token]);
const loadDashboard = async () => {
try {
// Get user profile
const profileResponse = await fetch('/users/profile', {
headers: { 'Authorization': `Bearer ${token}` }
});
const profileData = await profileResponse.json();
setUser(profileData.data);
// Get departments
const deptResponse = await fetch('/departments/list', {
headers: { 'Authorization': `Bearer ${token}` }
});
const deptData = await deptResponse.json();
setDepartments(deptData.data);
// Get email statistics
const statsResponse = await fetch('/email-meter/stats/email-counts/2025-10-01/2025-10-20', {
headers: { 'Authorization': `Bearer ${token}` }
});
const statsData = await statsResponse.json();
setEmailStats(statsData.data);
} catch (error) {
console.error('Failed to load dashboard:', error);
} finally {
setLoading(false);
}
};
if (loading) return <div>Loading dashboard...</div>;
return (
<div className="dashboard">
<h1>Welcome, {user?.name}!</h1>
<div className="user-info">
<p><strong>Email:</strong> {user?.email}</p>
<p><strong>Department:</strong> {user?.department}</p>
<p><strong>Role:</strong> {user?.role}</p>
</div>
<div className="departments">
<h2>Departments ({departments.length})</h2>
<ul>
{departments.map(dept => (
<li key={dept.id}>{dept.name} ({dept.code})</li>
))}
</ul>
</div>
{emailStats && (
<div className="email-stats">
<h2>Email Statistics</h2>
<p><strong>Total Conversations:</strong> {emailStats.conversations.total}</p>
<p><strong>Responded:</strong> {emailStats.conversations.responded}</p>
<p><strong>Average Response Time:</strong> {emailStats.responseTimes.average} minutes</p>
</div>
)}
</div>
);
}
export default CompassDashboard;
