import { mdiChartBar } from '@mdi/js'; import Head from 'next/head'; import React, { ReactElement, useState } from 'react'; import CardBox from '../components/CardBox'; import LayoutAuthenticated from '../layouts/Authenticated'; import SectionMain from '../components/SectionMain'; import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton'; import { getPageTitle } from '../config'; import FormField from '../components/FormField'; import BaseButton from '../components/BaseButton'; import axios from 'axios'; const ReportsPage = () => { const [reportData, setReportData] = useState(null); const [loading, setLoading] = useState(false); const [filters, setFilters] = useState({ startDate: '', endDate: '', employeeId: '' }); const fetchReport = async () => { setLoading(true); try { const response = await axios.post('/reports', filters); setReportData(response.data); } catch (error) { console.error('Failed to fetch report:', error); } finally { setLoading(false); } }; return ( <> {getPageTitle('Payroll Reports')} {''}
setFilters({...filters, startDate: e.target.value})} className="px-3 py-2 border border-gray-300 rounded w-full" /> setFilters({...filters, endDate: e.target.value})} className="px-3 py-2 border border-gray-300 rounded w-full" /> setFilters({...filters, employeeId: e.target.value})} className="px-3 py-2 border border-gray-300 rounded w-full" />
{reportData && ( <>

Summary

Total Gross Pay

${reportData.summary.totalGrossPay.toFixed(2)}

Total Hours

{reportData.summary.totalHours.toFixed(2)}

Total Work Comp

${reportData.summary.totalWorkersComp.toFixed(2)}

Line Items

{reportData.lineItems.map((item: any) => ( ))}
Employee Hours Gross Pay Work Comp Amount Created At
{item.employee?.firstName} {item.employee?.lastName || ''} {item.total_hours} ${item.gross_pay} ${item.workers_comp_amount} {new Date(item.createdAt).toLocaleDateString()}
)} ); }; ReportsPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default ReportsPage;