\n {/* Header */}\n

Attendance Reports

\n \n {/* Report Configuration */}\n

\n Report Type\n setReportType(e.target.value as 'daily' | 'range' | 'student')}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n\n {reportType === 'daily' ? (\n

\n Date\n setSelectedDate(e.target.value)}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n ) : (\n <>\n

\n Start Date\n setStartDate(e.target.value)}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n End Date\n setEndDate(e.target.value)}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n )}\n\n

\n Class Filter\n setSelectedClass(e.target.value)}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {classes.map(className => (\n \n ))}\n \n

\n\n {reportType === 'student' && (\n

\n Student\n setSelectedStudent(e.target.value)}\n className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {(selectedClass ? students.filter(s => s.class === selectedClass) : students).map(student => (\n \n ))}\n \n

\n )}\n

\n\n

\n \n {loading ? (\n

\n ) : (\n 📊\n )}\n Generate Report\n \n\n {(reportData.length > 0 || summaryData.length > 0) && (\n \n 📥\n Export CSV\n \n )}\n

\n\n {/* Error Message */}\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n\n {/* Loading State */}\n {loading && (\n

Generating report...

\n )}\n\n {/* Summary Report (for range reports) */}\n {!loading && reportType === 'range' && summaryData.length > 0 && (\n

\n Attendance Summary ({formatDisplayDate(startDate)} - {formatDisplayDate(endDate)})\n

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {summaryData.map((row) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

Student	Class	Total Days	Present	Absent	Late	Rate
\n {row.student_name}\n	\n {row.student_class}\n	\n {row.total_days}\n	\n {row.present_days}\n	\n {row.absent_days}\n	\n {row.late_days}\n	\n \n = 90 ? 'text-green-600' : row.attendance_rate >= 75 ? 'text-yellow-600' : 'text-red-600'}`}>\n {row.attendance_rate}%\n \n \n = 90 ? 'bg-green-500' : row.attendance_rate >= 75 ? 'bg-yellow-500' : 'bg-red-500'}`}\n style={{ width: `${row.attendance_rate}%` }}\n > \n \n \n

\n )}\n\n {/* Detailed Report */}\n {!loading && reportData.length > 0 && (reportType === 'daily' || reportType === 'student') && (\n

\n {reportType === 'daily' \n ? `Daily Attendance - ${formatDisplayDate(selectedDate)}`\n : `Student Attendance History`\n }\n

\n \n

\n {reportData.map((record, index) => (\n

{record.student_name}

\n Class: {record.student_class}\n {reportType === 'student' && Date: {formatDisplayDate(record.date)}}\n

\n\n

\n \n {record.status === 'present' && '✅'}\n {record.status === 'absent' && '❌'}\n {record.status === 'late' && '⏰'}\n {record.status}\n \n

\n\n {record.notes && (\n

\n Notes: {record.notes}\n

\n )}\n

\n ))}\n

\n )}\n\n {/* No Data State */}\n {!loading && reportData.length === 0 && summaryData.length === 0 && (\n

📊

No Data Found

\n No attendance records found for the selected criteria. Try adjusting your filters or date range.\n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/mental/Att/code/frontend/components/Reports.tsx","extension","actionData","errors"]