\n {/* Header */}\n

Manage Students

\n Add, edit, and organize your students\n {selectedClass && ` • Showing ${selectedClass}`}\n

\n \n setShowAddForm(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center space-x-2\"\n >\n ➕\n Add Student\n \n

\n\n {/* Success/Error Messages */}\n {success && (\n

\n ✅\n {success}\n

\n )}\n\n {error && (\n

\n ⚠️\n {error}\n

\n )}\n\n {/* Add/Edit Form */}\n {showAddForm && (\n

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

\n \n ✕\n \n

\n\n

\n \n Student Name *\n \n setFormData(prev => ({ ...prev, name: 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 focus:border-transparent\"\n placeholder=\"Enter student's full name\"\n required\n />\n

\n\n

\n \n Student ID *\n \n setFormData(prev => ({ ...prev, student_id: 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 focus:border-transparent\"\n placeholder=\"e.g., STU001\"\n required\n />\n

\n\n

\n \n Class *\n \n setFormData(prev => ({ ...prev, class: 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 focus:border-transparent\"\n placeholder=\"e.g., Grade 5A, Math 101\"\n required\n />\n

\n\n

\n \n {loading ? (\n

\n ) : (\n {editingStudent ? '💾' : '➕'}\n )}\n {editingStudent ? 'Update Student' : 'Add Student'}\n \n \n \n Cancel\n \n

\n )}\n\n {/* Students List */}\n {filteredStudents.length === 0 ? (\n

👥

No Students Found

\n {selectedClass \n ? `No students found in ${selectedClass}. Add students to this class to get started.`\n : 'No students have been added yet. Click \"Add Student\" to get started.'\n }\n

\n setShowAddForm(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n Add Your First Student\n \n

\n ) : (\n

\n Students ({filteredStudents.length})\n

\n \n

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

{student.name}

\n ID: {student.student_id}\n Class: {student.class}\n Added: {new Date(student.created_at).toLocaleDateString()}\n

\n\n

\n handleEdit(student)}\n className=\"text-blue-600 hover:text-blue-800 transition-colors px-3 py-1 rounded-md hover:bg-blue-50\"\n >\n ✏️ Edit\n \n handleDelete(student)}\n className=\"text-red-600 hover:text-red-800 transition-colors px-3 py-1 rounded-md hover:bg-red-50\"\n >\n 🗑️ Delete\n \n

\n ))}\n

\n )}\n

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