// school-mis-app: React + Firebase (Free MIS) // Features: Login, Roles, Attendance, Timetable, Behavior Points

import React, { useState, useEffect } from 'react'; import { initializeApp } from 'firebase/app'; import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut } from 'firebase/auth'; import { getFirestore, doc, setDoc, getDoc, collection, addDoc, getDocs } from 'firebase/firestore';

const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID" };

const app = initializeApp(firebaseConfig); const auth = getAuth(); const db = getFirestore(app);

function App() { const [user, setUser] = useState(null); const [role, setRole] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [attendance, setAttendance] = useState([]); const [behavior, setBehavior] = useState([]); const [timetable, setTimetable] = useState([]);

useEffect(() => { onAuthStateChanged(auth, async (u) => { if (u) { setUser(u); const docRef = doc(db, 'users', u.uid); const docSnap = await getDoc(docRef); setRole(docSnap.exists() ? docSnap.data().role : ''); loadData(u.uid); } else { setUser(null); setRole(''); } }); }, []);

const loadData = async (uid) => { const attSnap = await getDocs(collection(db, 'attendance')); setAttendance(attSnap.docs.map(doc => doc.data())); const behSnap = await getDocs(collection(db, 'behavior')); setBehavior(behSnap.docs.map(doc => doc.data())); const ttSnap = await getDocs(collection(db, 'timetable')); setTimetable(ttSnap.docs.map(doc => doc.data())); };

const register = async () => { const userCred = await createUserWithEmailAndPassword(auth, email, password); await setDoc(doc(db, 'users', userCred.user.uid), { role: 'student' }); };

const login = async () => { await signInWithEmailAndPassword(auth, email, password); };

const logout = () => signOut(auth);

const markAttendance = async () => { await addDoc(collection(db, 'attendance'), { uid: user.uid, date: new Date().toISOString() }); };

const addBehaviorPoint = async () => { await addDoc(collection(db, 'behavior'), { uid: user.uid, points: 1, date: new Date().toISOString() }); };

const addTimetableEntry = async () => { await addDoc(collection(db, 'timetable'), { uid: user.uid, subject: 'Math', time: '9:00 AM' }); };

if (!user) { return ( <div className="p-4 max-w-md mx-auto"> <h1 className="text-xl font-bold mb-2">Login / Register</h1> <input className="border p-2 w-full mb-2" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} /> <input className="border p-2 w-full mb-2" type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} /> <button onClick={login} className="bg-blue-500 text-white p-2 w-full">Login</button> <button onClick={register} className="bg-green-500 text-white p-2 w-full mt-2">Register</button> </div> ); }

return ( <div className="p-4 max-w-xl mx-auto"> <h1 className="text-xl font-bold mb-4">Welcome, {user.email} ({role})</h1> <button onClick={logout} className="bg-red-500 text-white p-2 mb-4">Logout</button>

  {role === 'teacher' && (
    <div className="mb-4">
      <button onClick={markAttendance} className="bg-blue-500 text-white p-2 mr-2">Mark Attendance</button>
      <button onClick={addBehaviorPoint} className="bg-yellow-500 text-white p-2 mr-2">Add Behavior Point</button>
      <button onClick={addTimetableEntry} className="bg-purple-500 text-white p-2">Add Timetable Entry</button>
    </div>
  )}

  <h2 className="text-lg font-semibold mt-4">Attendance Records</h2>
  <ul className="list-disc ml-4">
    {attendance.map((att, i) => <li key={i}>{att.date}</li>)}
  </ul>

  <h2 className="text-lg font-semibold mt-4">Behavior Points</h2>
  <ul className="list-disc ml-4">
    {behavior.map((b, i) => <li key={i}>{b.date} - {b.points} point(s)</li>)}
  </ul>

  <h2 className="text-lg font-semibold mt-4">Timetable</h2>
  <ul className="list-disc ml-4">
    {timetable.map((t, i) => <li key={i}>{t.subject} at {t.time}</li>)}
  </ul>
</div>

); }

export default App;