fixes
This commit is contained in:
@@ -26,6 +26,7 @@ import {
|
||||
} from "../../services/api";
|
||||
import { useSiteStore } from "../../store/siteStore";
|
||||
import { useSectorStore } from "../../store/sectorStore";
|
||||
import SectorSelector from "../../components/common/SectorSelector";
|
||||
|
||||
interface WriterStats {
|
||||
tasks: {
|
||||
@@ -226,15 +227,14 @@ export default function WriterDashboard() {
|
||||
|
||||
// Initial load and periodic refresh
|
||||
useEffect(() => {
|
||||
if (!activeSector?.id) return;
|
||||
|
||||
// Allow loading for all sectors (when activeSector is null) or specific sector
|
||||
fetchDashboardData();
|
||||
|
||||
// Refresh every 30 seconds
|
||||
const interval = setInterval(fetchDashboardData, 30000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [activeSector?.id]);
|
||||
}, [activeSector?.id, activeSite?.id]);
|
||||
|
||||
// Chart data for tasks by status
|
||||
const tasksStatusChart = useMemo(() => {
|
||||
@@ -253,13 +253,45 @@ export default function WriterDashboard() {
|
||||
fontFamily: 'Outfit'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (val: number) => `${Math.round(val)}%`
|
||||
enabled: false // Disable labels on pie slices
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '65%'
|
||||
size: '70%',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: '#374151',
|
||||
fontFamily: 'Outfit'
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontSize: '20px',
|
||||
fontWeight: 700,
|
||||
color: '#465FFF',
|
||||
fontFamily: 'Outfit',
|
||||
formatter: (val: string) => {
|
||||
const total = Object.values(stats.tasks.byStatus).reduce((a, b) => a + b, 0);
|
||||
return total > 0 ? total.toString() : '0';
|
||||
}
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
color: '#6B7280',
|
||||
fontFamily: 'Outfit',
|
||||
formatter: () => {
|
||||
const total = Object.values(stats.tasks.byStatus).reduce((a, b) => a + b, 0);
|
||||
return total.toString();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -435,17 +467,23 @@ export default function WriterDashboard() {
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) {
|
||||
if (!stats && !loading) {
|
||||
return (
|
||||
<>
|
||||
<PageMeta title="Writer Dashboard - IGNY8" description="Content creation overview" />
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-600 dark:text-gray-400">No data available. Please select a sector.</p>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{activeSector ? 'No data available for the selected sector.' : 'No data available. Select a sector or wait for data to load.'}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) {
|
||||
return null; // Still loading
|
||||
}
|
||||
|
||||
const workflowSteps = [
|
||||
{
|
||||
number: 1,
|
||||
@@ -509,20 +547,49 @@ export default function WriterDashboard() {
|
||||
<PageMeta title="Writer Dashboard - IGNY8" description="Content creation overview" />
|
||||
|
||||
<div className="space-y-5 sm:space-y-6">
|
||||
{/* Header with last updated */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
{/* Header with site/sector info and controls */}
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Writer Dashboard</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
||||
Last updated: {lastUpdated.toLocaleTimeString()}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Last updated: {lastUpdated.toLocaleTimeString()}
|
||||
</p>
|
||||
{activeSite && (
|
||||
<>
|
||||
<span className="text-sm text-gray-400 dark:text-gray-600">•</span>
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Site: <span className="text-brand-600 dark:text-brand-400">{activeSite.name}</span>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{activeSector && (
|
||||
<>
|
||||
<span className="text-sm text-gray-400 dark:text-gray-600">•</span>
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Sector: <span className="text-brand-600 dark:text-brand-400">{activeSector.name}</span>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{!activeSector && (
|
||||
<>
|
||||
<span className="text-sm text-gray-400 dark:text-gray-600">•</span>
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
Sector: <span className="text-brand-600 dark:text-brand-400">All Sectors</span>
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<SectorSelector />
|
||||
<button
|
||||
onClick={fetchDashboardData}
|
||||
className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchDashboardData}
|
||||
className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Hero Section - Key Metric */}
|
||||
|
||||
Reference in New Issue
Block a user