import { useEffect, useMemo, useCallback } from 'react'; import { RefreshCw } from 'lucide-react'; import { type DateRange } from '@/services/dashboard.service'; import { useAuth, hasManagementAccess } from '@/contexts/AuthContext'; // Custom Hooks import { useDashboardFilters } from './hooks/useDashboardFilters'; import { useDashboardPagination } from './hooks/useDashboardPagination'; import { useDashboardData } from './hooks/useDashboardData'; import { useDashboardExports } from './hooks/useDashboardExports'; // Components import { DashboardHero } from './components/DashboardHero'; import { DashboardFiltersBar } from './components/DashboardFiltersBar'; import { AdminKPICards } from './components/sections/AdminKPICards'; import { UserKPICards } from './components/sections/UserKPICards'; import { CriticalAlertsSection } from './components/sections/CriticalAlertsSection'; import { RecentActivitySection } from './components/sections/RecentActivitySection'; import { AdminAnalyticsSection } from './components/sections/AdminAnalyticsSection'; import { UserMetricsSection } from './components/sections/UserMetricsSection'; import { PriorityDistributionReport } from './components/sections/PriorityDistributionReport'; import { TATBreachReport } from './components/sections/TATBreachReport'; import { UpcomingDeadlinesSection } from './components/sections/UpcomingDeadlinesSection'; import { AIRemarkUtilizationReport } from './components/sections/AIRemarkUtilizationReport'; import { ApproverPerformanceReport } from './components/sections/ApproverPerformanceReport'; // Utils import { buildFilterUrl, getQuickActions } from './utils/dashboardNavigation'; import { getBreachedRequests, getUpcomingDeadlinesNotBreached } from './utils/dashboardCalculations'; interface DashboardProps { onNavigate?: (page: string) => void; onNewRequest?: () => void; } export function Dashboard({ onNavigate, onNewRequest }: DashboardProps) { const { user } = useAuth(); // Determine user role const isAdmin = useMemo(() => hasManagementAccess(user), [user]); // Filters const filters = useDashboardFilters(); const { dateRange, customStartDate, customEndDate, showCustomDatePicker, handleDateRangeChange, handleApplyCustomDate, resetCustomDates, setCustomStartDate, setCustomEndDate, setShowCustomDatePicker } = filters; // Pagination const pagination = useDashboardPagination(); const { activity: activityPagination, critical: criticalPagination, deadlines: deadlinesPagination, approver: approverPagination, updateActivityPagination, updateCriticalPagination, updateDeadlinesPagination, updateApproverPagination, handleActivityPageChange, handleCriticalPageChange, handleDeadlinesPageChange, handleApproverPageChange, } = pagination; // Data fetching const dashboardData = useDashboardData({ isAdmin, dateRange, customStartDate, customEndDate, onPaginationUpdate: { activity: updateActivityPagination, critical: updateCriticalPagination, deadlines: updateDeadlinesPagination, approver: updateApproverPagination, }, }); const { kpis, recentActivity, criticalRequests, departmentStats, priorityDistribution, upcomingDeadlines, aiRemarkUtilization, approverPerformance, loading, refreshing, fetchDashboardData, fetchRecentActivities, fetchCriticalRequests, fetchUpcomingDeadlines, fetchApproverPerformance, } = dashboardData; // Exports const exports = useDashboardExports(); const { exportingDeptStats, exportingApproverPerformance, handleExportDepartmentStats, handleExportApproverPerformance } = exports; // Calculated values const breachedRequests = useMemo(() => getBreachedRequests(criticalRequests), [criticalRequests]); const upcomingDeadlinesNotBreached = useMemo(() => getUpcomingDeadlinesNotBreached(upcomingDeadlines), [upcomingDeadlines]); // Handlers const handleRefresh = useCallback(() => { if (dateRange === 'custom' && customStartDate && customEndDate) { fetchDashboardData(true); } else { fetchDashboardData(true); } }, [dateRange, customStartDate, customEndDate, fetchDashboardData]); const handleApplyCustomDateWrapper = useCallback(() => { handleApplyCustomDate(() => { if (customStartDate && customEndDate) { fetchDashboardData(false); } }); }, [customStartDate, customEndDate, handleApplyCustomDate, fetchDashboardData]); const handleActivityPageChangeWrapper = useCallback((newPage: number) => { handleActivityPageChange(newPage, fetchRecentActivities); }, [handleActivityPageChange, fetchRecentActivities]); const handleCriticalPageChangeWrapper = useCallback((newPage: number) => { handleCriticalPageChange(newPage, fetchCriticalRequests); }, [handleCriticalPageChange, fetchCriticalRequests]); const handleDeadlinesPageChangeWrapper = useCallback((newPage: number) => { handleDeadlinesPageChange(newPage, fetchUpcomingDeadlines); }, [handleDeadlinesPageChange, fetchUpcomingDeadlines]); const handleApproverPageChangeWrapper = useCallback((newPage: number) => { handleApproverPageChange(newPage, () => fetchApproverPerformance(newPage)); }, [handleApproverPageChange, fetchApproverPerformance]); useEffect(() => { if (dateRange === 'custom') { // Don't auto-fetch for custom dates until user applies them if (customStartDate && customEndDate) { fetchDashboardData(false); } } else { fetchDashboardData(false); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [dateRange, customStartDate, customEndDate]); // Quick actions const quickActions = useMemo(() => getQuickActions(isAdmin, onNewRequest, onNavigate), [isAdmin, onNewRequest, onNavigate]); // KPI click handler const handleKPIClick = useCallback((filters: { status?: string; priority?: string; slaCompliance?: string; department?: string; dateRange?: DateRange; startDate?: Date; endDate?: Date; targetPage?: 'requests' | 'open-requests' | 'my-requests'; }) => { const url = buildFilterUrl(filters); onNavigate?.(url); }, [onNavigate]); if (loading) { return (
Loading dashboard...