Students

Manage student records and information

\n {\n resetForm();\n setShowModal(true);\n }}\n className=\"px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center\"\n >\n ➕\n Add Student\n \n

\n\n {/* Filters */}\n

\n setSearchTerm(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n setFilterGrade(e.target.value)}\n className=\"px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n >\n \n {grades.map(grade => (\n \n ))}\n \n

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

\n ⚠️\n

{error}

\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n >\n ✕\n \n

\n )}\n\n {/* Students Table */}\n

\n \n \n \n \n \n \n \n \n \n \n \n {filteredStudents.map((student) => (\n \n \n \n \n \n \n \n ))}\n \n

\n Student\n	\n Grade\n	\n Contact\n	\n Status\n	\n Actions\n
\n \n \n \n \n {student.firstName[0]}{student.lastName[0]}\n \n \n \n \n \n {student.firstName} {student.lastName}\n \n {student.email} \n \n \n	\n \n {student.grade}\n \n	\n {student.parentContact}\n	\n \n {student.status}\n \n	\n openEditModal(student)}\n className=\"text-indigo-600 hover:text-indigo-900\"\n >\n Edit\n \n handleDelete(student.id)}\n className=\"text-red-600 hover:text-red-900\"\n >\n Delete\n \n

\n \n {filteredStudents.length === 0 && (\n

No students found

\n )}\n

\n\n {/* Modal */}\n {showModal && (\n

\n {editingStudent ? 'Edit Student' : 'Add New Student'}\n

\n \n

\n \n First Name\n \n setFormData({...formData, firstName: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n \n Last Name\n \n setFormData({...formData, lastName: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n \n

\n \n Email\n \n setFormData({...formData, email: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n \n

\n \n Date of Birth\n \n setFormData({...formData, dateOfBirth: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n \n Grade\n \n setFormData({...formData, grade: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n >\n \n \n \n \n \n \n \n \n \n

\n \n

\n \n Parent Contact\n \n setFormData({...formData, parentContact: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n \n

\n \n Address\n \n setFormData({...formData, address: e.target.value})}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\"\n />\n

\n \n

\n setShowModal(false)}\n className=\"px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors\"\n >\n Cancel\n \n \n {editingStudent ? 'Update' : 'Add'} Student\n \n

\n )}\n

\n );\n}","deleted","label",[169,170,151],"frontend","components","permalink","https://www.val.town/x/Deep_25/untitled-9443/code/frontend/components/StudentList.tsx","extension","actionData","errors"]