import * as icon from '@mdi/js'; import Head from 'next/head' import React, { useState, useEffect, useMemo } from 'react' import axios from 'axios'; import type { ReactElement } from 'react' import LayoutAuthenticated from '../layouts/Authenticated' import SectionMain from '../components/SectionMain' import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton' import CardBox from '../components/CardBox' import BaseButton from '../components/BaseButton' import { getPageTitle } from '../config' import { useAppSelector } from '../stores/hooks'; import PTOStats from '../components/PTOStats' import moment from 'moment' import Link from 'next/link' import StaffOffList from '../components/StaffOffList' import Search from '../components/Search' import { mdiPlusBox, mdiHospitalBox, mdiAlertDecagram } from '@mdi/js' import CardBoxModal from '../components/CardBoxModal' const Dashboard = () => { const { currentUser } = useAppSelector((state) => state.auth) const [selectedYear, setSelectedYear] = useState(new Date().getFullYear()) const [summary, setSummary] = useState(null) const [approvals, setApprovals] = useState([]) const [loading, setLoading] = useState(true) const [greeting, setGreeting] = useState('Hello') const [isReviewModalActive, setIsReviewModalActive] = useState(false) const [selectedTask, setSelectedTask] = useState(null) const canSeeApprovals = useMemo(() => { return currentUser?.app_role_permissions?.some(p => p.name === 'READ_APPROVAL_TASKS') || currentUser?.custom_permissions?.some(p => p.name === 'READ_APPROVAL_TASKS'); }, [currentUser]); const fetchDashboardData = async () => { setLoading(true) try { // Fetch PTO Summary for selected year const summaryRes = await axios.get(`/yearly_leave_summaries`, { params: { filter: JSON.stringify({ userId: currentUser?.id, calendar_year: selectedYear }) } }) setSummary(summaryRes.data.rows[0] || null) // Fetch Pending Approvals if authorized if (canSeeApprovals) { const approvalsRes = await axios.get(`/approval_tasks`, { params: { filter: JSON.stringify({ state: 'open' }) } }) setApprovals(approvalsRes.data.rows) } } catch (error) { console.error('Error fetching dashboard data:', error) } finally { setLoading(false) } } useEffect(() => { if (currentUser) { fetchDashboardData() } }, [currentUser, selectedYear, canSeeApprovals]) useEffect(() => { const hour = new Date().getHours() if (hour < 12) setGreeting('Good morning') else if (hour < 18) setGreeting('Good afternoon') else setGreeting('Good evening') }, []) const handleApprove = async (taskId) => { if (!taskId) return; try { await axios.put(`/approval_tasks/${taskId}/approve`); // Refresh data fetchDashboardData(); if (isReviewModalActive) setIsReviewModalActive(false); } catch (error) { console.error('Error approving task:', error); alert('Failed to approve task'); } }; const handleReject = async (taskId) => { if (!taskId) return; try { await axios.put(`/approval_tasks/${taskId}/reject`); // Refresh data fetchDashboardData(); if (isReviewModalActive) setIsReviewModalActive(false); } catch (error) { console.error('Error rejecting task:', error); alert('Failed to reject task'); } }; const handleReview = (task) => { setSelectedTask(task); setIsReviewModalActive(true); }; const years = [selectedYear - 1, selectedYear, selectedYear + 1, selectedYear + 2] return ( <> {getPageTitle('Home')}
Year:
{/* PTO Summary Stats */} {/* Action Buttons */}

Submit a standard PTO request.

Report a sick day or medical leave.

Log unplanned absence.
{/* Action Items (Approvals) - Full Width - Only show if user has permissions */} {canSeeApprovals && (

Action Items (Pending Approvals)

View All
{approvals.length > 0 ? ( approvals.map((task) => ( )) ) : ( )}
Requester Type Dates Actions
{task.time_off_request?.requester?.firstName} {task.time_off_request?.requester?.lastName} {task.time_off_request?.leave_type?.replace(/_/g, ' ')} {moment(task.time_off_request?.starts_at).format('MMM D')} - {moment(task.time_off_request?.ends_at).format('MMM D')} handleReview(task)} /> handleApprove(task.id)} /> handleReject(task.id)} />
No pending approvals
)} {/* Staff Off This Week - Full Width */} {currentUser && } handleApprove(selectedTask?.id)} onDecline={() => handleReject(selectedTask?.id)} onCancel={() => setIsReviewModalActive(false)} buttonColor="success" buttonLabel="Approve" declineButtonLabel="Decline" declineButtonColor="danger" > {selectedTask && (
Requester:
{selectedTask.time_off_request?.requester?.firstName} {selectedTask.time_off_request?.requester?.lastName}
Leave Type:
{selectedTask.time_off_request?.leave_type?.replace(/_/g, ' ')}
Period:
{moment(selectedTask.time_off_request?.starts_at).format('YYYY-MM-DD')} to {moment(selectedTask.time_off_request?.ends_at).format('YYYY-MM-DD')}
Total Days:
{selectedTask.time_off_request?.days}
{selectedTask.time_off_request?.reason && (
Reason:
{`"${selectedTask.time_off_request.reason}"`}
)}
)} ) } Dashboard.getLayout = function getLayout(page: ReactElement) { return {page} } export default Dashboard;