salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Desktop
2025-11-12 21:55:35 +05:00
parent 408b12b607
commit 94fbc196f3
7 changed files with 977 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/src/pages/Planner/Dashboard.tsx
View File

@@ -27,6 +27,7 @@ import {
} from "../../services/api";
import { useSiteStore } from "../../store/siteStore";
import { useSectorStore } from "../../store/sectorStore";
import SectorSelector from "../../components/common/SectorSelector";
interface DashboardStats {
keywords: {
@@ -184,15 +185,14 @@ export default function PlannerDashboard() {
// 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]);
// Calculate percentages
const keywordMappingPct = useMemo(() => {
@@ -227,13 +227,45 @@ export default function PlannerDashboard() {
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.keywords.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.keywords.byStatus).reduce((a, b) => a + b, 0);
return total.toString();
}
}
}
}
}
}
@@ -365,17 +397,23 @@ export default function PlannerDashboard() {
);
}
if (!stats) {
if (!stats && !loading) {
return (
<>
<PageMeta title="Planner Dashboard - IGNY8" description="Content planning 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,
@@ -430,20 +468,49 @@ export default function PlannerDashboard() {
<PageMeta title="Planner Dashboard - IGNY8" description="Content planning 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">Planner 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 */}