Welcome, {mockStudentData.name}

Overall Attendance

{mockStudentData.overallAttendance}%

Subjects Performance

{mockStudentData.subjects.map((subject, index) => (

{subject.name} {subject.grade}

))}

); const TeacherDashboard = () => { const [editing, setEditing] = useState(false); const [currentStudent, setCurrentStudent] = useState(mockStudentData); const handleRemarkChange = (index, value) => { const updatedSubjects = [...currentStudent.subjects]; updatedSubjects[index] = { ...updatedSubjects[index], remarks: value }; setCurrentStudent({ ...currentStudent, subjects: updatedSubjects }); }; return (

Teacher Dashboard

Student Management

{currentStudent.subjects.map((subject, index) => ( ))}

Subject	Grade	Attendance	Remarks
{subject.name}	{editing ? ( ) : ( subject.grade )}	{editing ? ( ) : ( `${subject.attendance}%` )}	{editing ? ( handleRemarkChange(index, e.target.value)} className="border rounded px-2 py-1 w-full" placeholder="Add remarks..." /> ) : ( subject.remarks \|\| "No remarks" )}

); }; const ParentDashboard = () => { const [comment, setComment] = useState(""); return (

Parent Dashboard

Student Performance

{mockStudentData.subjects.map((subject, index) => (

{subject.name} {subject.grade}

Attendance: {subject.attendance}%

))}

Add Feedback

setComment(e.target.value)}
            className="w-full border rounded p-2 mb-4"
            rows="4"
            placeholder="Enter your feedback here..."
          />
          <button
            onClick={() => {
              alert("Feedback submitted!");
              setComment("");
            }}
            className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
          >
            Submit Feedback
          </button>
        </div>
      </div>
    </div>
  );
};

const Login = () => {
  const [redirectToDashboard, setRedirectToDashboard] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [role, setRole] = useState("student");
  const [error, setError] = useState("");

const handleSubmit = (e) => {
    e.preventDefault();
    const user = predefinedUsers.find(
      (u) => u.email === email && u.password === password && u.role === role
    );

if (user) {
      setError("");
      setRedirectToDashboard(true);
      localStorage.setItem("user", JSON.stringify(user));
    } else {
      setError("Invalid credentials. Please try again.");
    }
  };

if (redirectToDashboard) {
    return (
      <div className="min-h-screen bg-gray-100">
        <div className="bg-white shadow">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center py-4">
              <h1 className="text-2xl font-bold text-gray-900">Student Report Management</h1>
              <button
                onClick={() => {
                  localStorage.removeItem("user");
                  setRedirectToDashboard(false);
                }}
                className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
              >
                Logout
              </button>
            </div>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          {role === "student" && <StudentDashboard />}
          {role === "teacher" && <TeacherDashboard />}
          {role === "parent" && <ParentDashboard />}
        </div>
      </div>
    );
  }

const getRoleIcon = () => {
    switch (role) {
      case "student":
        return <FaUserGraduate className="text-blue-500 text-xl" />;
      case "teacher":
        return <FaChalkboardTeacher className="text-green-500 text-xl" />;
      case "parent":
        return <FaUserFriends className="text-purple-500 text-xl" />;
      default:
        return null;
    }
  };

return( 
    <>
    <div className="min-h-screen bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-lg">
        <div>
          <div className="flex justify-center">{getRoleIcon()}</div>
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Student Report Management
          </h2>
          <p className="mt-2 text-center text-sm text-gray-600">
            Sign in to access your dashboard
          </p>
        </div>

<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
          <div className="rounded-md shadow-sm space-y-4">
            <div>
              <label htmlFor="role" className="sr-only">
                Select Role
              </label>
              <div className="relative">
                <select
                  id="role"
                  value={role}
                  onChange={(e) => setRole(e.target.value)}
                  className="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                >
                  <option value="student">Student</option>
                  <option value="teacher">Teacher</option>
                  <option value="parent">Parent</option>
                </select>
              </div>
            </div>

<div>
              <label htmlFor="email" className="sr-only">
                Email address
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <MdEmail className="text-gray-400" />
                </div>
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="appearance-none relative block w-full pl-10 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                  placeholder="Email address"
                />
              </div>
            </div>

<div>
              <label htmlFor="password" className="sr-only">
                Password
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <RiLockPasswordFill className="text-gray-400" />
                </div>
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="appearance-none relative block w-full pl-10 px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                  placeholder="Password"
                />
              </div>
            </div>
          </div>

{error && (
            <div className="rounded-md bg-red-50 p-4">
              <div className="flex">
                <div className="flex-shrink-0">
                  <svg
                    className="h-5 w-5 text-red-400"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fillRule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
                <div className="ml-3">
                  <p className="text-sm font-medium text-red-800">{error}</p>
                </div>
              </div>
            </div>
          )}

<div>
            <button
              type="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
            >
              Sign in
            </button>
          </div>
        </form>
      </div>
    </div>
  );

export default Login;
    
   
    </>

)
}

export default App

find error and rectify it</article></body></html>

Add Remarks for Subjects

About

Tags

Share