function MainComponent() { const [currentMonth, setCurrentMonth] = useState(new Date()); const [attendanceRecords, setAttendanceRecords] = useState({}); const [students] = useState([ { id: 1, name: "Ali Yılmaz", class: "10-A" }, { id: 2, name: "Ayşe Demir", class: "10-A" }, { id: 3, name: "Mehmet Kaya", class: "10-A" } ]); const getDaysInMonth = (date)=>{ const year = date.getFullYear(); const month = date.getMonth(); const days = new Date(year, month + 1, 0).getDate(); return Array.from({ length: days }, (_, i)=>new Date(year, month, i + 1)); }; const markAttendance = (studentId, date)=>{ const dateStr = date.toISOString().split("T")[0]; setAttendanceRecords((prev)=>({ ...prev, [studentId]: { ...prev[studentId], [dateStr]: !prev[studentId]?.[dateStr] } })); }; const getAbsenceCount = (studentId)=>{ if (!attendanceRecords[studentId]) return 0; return Object.values(attendanceRecords[studentId]).filter(Boolean).length; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 md:p-8", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto font-bold text-[#1a365d] mb-8", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Devam Takip Sistemi"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-8", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() - 1))), className: "text-[#1a365d] hover:bg-gray-100 p-2 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, currentMonth.toLocaleDateString("tr-TR", { month: "long", year: "numeric" })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() + 1))), className: "text-[#1a365d] hover:bg-gray-100 p-2 rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b text-left font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }, "Öğrenci"), getDaysInMonth(currentMonth).map((date)=>/*#__PURE__*/ React.createElement("th", { key: date, className: "p-2 border-b text-center w-10", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, date.getDate())), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b text-center", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, "Toplam"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, students.map((student)=>/*#__PURE__*/ React.createElement("tr", { key: student.id, __source: { fileName: "", lineNumber: 87, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 25 }, __self: this }, student.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 91, columnNumber: 25 }, __self: this }, student.class))), getDaysInMonth(currentMonth).map((date)=>{ const dateStr = date.toISOString().split("T")[0]; const isAbsent = attendanceRecords[student.id]?.[dateStr]; return /*#__PURE__*/ React.createElement("td", { key: date, className: "p-2 border-b text-center", __source: { fileName: "", lineNumber: 100, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>markAttendance(student.id, date), className: `w-6 h-6 rounded-full ${isAbsent ? "bg-red-500" : "bg-green-500"}`, __source: { fileName: "", lineNumber: 101, columnNumber: 27 }, __self: this })); }), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b text-center font-bold", __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, getAbsenceCount(student.id)))))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-bold text-[#1a365d] mb-4", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Devamsızlık Özeti"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, students.map((student)=>{ const absenceCount = getAbsenceCount(student.id); return /*#__PURE__*/ React.createElement("div", { key: student.id, className: "flex items-center justify-between border-b pb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }, student.name), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, student.class)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 136, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2.5 w-32 bg-gray-200 rounded-full mr-4", __source: { fileName: "", lineNumber: 137, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2.5 bg-[#1a365d] rounded-full", style: { width: `${absenceCount / 30 * 100}%` }, __source: { fileName: "", lineNumber: 138, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, absenceCount, " gün"))); }))))); }

Öğrenci	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	Toplam
Ali Yılmaz 10-A																																0
Ayşe Demir 10-A																																0
Mehmet Kaya 10-A																																0

Devam Takip Sistemi

Temmuz 2025

Devamsızlık Özeti