function NewComponent({ isPremium = false, initialSettings = {}, initialMessage = "", initialError = "", onSettingChange, onSave, userLevel = 1 }) { const [settings, setSettings] = useState({ emailNotifications: true, studyReminders: true, weeklyProgress: true, customTheme: userLevel >= 10 ? "default" : null, focusMode: userLevel >= 5 ? false : null, soundEffects: true, darkMode: false, language: "en", timezone: "UTC", studySessionDuration: 25, breakDuration: 5, dailyGoalHours: 2, ...initialSettings }); const [successMessage, setSuccessMessage] = useState(initialMessage); const [error, setError] = useState(initialError); const handleSettingChange = (setting, value)=>{ const newSettings = { ...settings, [setting]: typeof value === "undefined" ? !settings[setting] : value }; setSettings(newSettings); onSettingChange?.(newSettings); }; const handleSave = async ()=>{ try { await onSave?.(settings); setSuccessMessage("Settings updated successfully!"); setTimeout(()=>setSuccessMessage(""), 3000); } catch (err) { setError("Failed to update settings"); setTimeout(()=>setError(""), 3000); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm overflow-hidden", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-xl font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Settings"), !isPremium && /*#__PURE__*/ React.createElement("a", { href: "/premium", className: "bg-[#FFD700] text-gray-900 px-4 py-2 rounded-lg hover:bg-[#FFC700] transition-colors", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-crown mr-2", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }), "Upgrade to Premium")), (successMessage || error) && /*#__PURE__*/ React.createElement("div", { className: `mb-6 p-4 rounded-lg ${successMessage ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, successMessage || error), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Notifications"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, [ { key: "emailNotifications", title: "Email Notifications", description: "Get updates via email" }, { key: "studyReminders", title: "Study Reminders", description: "Daily study reminders" }, { key: "weeklyProgress", title: "Weekly Progress", description: "Weekly study analytics" } ].map((setting)=>/*#__PURE__*/ React.createElement("div", { key: setting.key, className: "flex items-center justify-between p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium", __source: { fileName: "", lineNumber: 104, columnNumber: 21 }, __self: this }, setting.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 105, columnNumber: 21 }, __self: this }, setting.description)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSettingChange(setting.key), className: `w-12 h-6 rounded-full transition-colors ${settings[setting.key] ? "bg-[#00BFFF]" : "bg-gray-300"}`, __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-4 h-4 bg-white rounded-full transform transition-transform ${settings[setting.key] ? "translate-x-7" : "translate-x-1"}`, __source: { fileName: "", lineNumber: 115, columnNumber: 21 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Study Preferences"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, "Study Session Duration (minutes)"), /*#__PURE__*/ React.createElement("select", { value: settings.studySessionDuration, onChange: (e)=>handleSettingChange("studySessionDuration", parseInt(e.target.value)), className: "w-full p-2 rounded-lg border-2 border-gray-200 focus:border-[#00BFFF] outline-none", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, [ 15, 25, 30, 45, 60 ].map((duration)=>/*#__PURE__*/ React.createElement("option", { key: duration, value: duration, __source: { fileName: "", lineNumber: 149, columnNumber: 23 }, __self: this }, duration, " minutes")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 157, columnNumber: 19 }, __self: this }, "Daily Study Goal"), /*#__PURE__*/ React.createElement("select", { value: settings.dailyGoalHours, onChange: (e)=>handleSettingChange("dailyGoalHours", parseInt(e.target.value)), className: "w-full p-2 rounded-lg border-2 border-gray-200 focus:border-[#00BFFF] outline-none", __source: { fileName: "", lineNumber: 160, columnNumber: 19 }, __self: this }, [ 1, 2, 3, 4, 5, 6, 7, 8 ].map((hours)=>/*#__PURE__*/ React.createElement("option", { key: hours, value: hours, __source: { fileName: "", lineNumber: 171, columnNumber: 23 }, __self: this }, hours, " hours"))))))), isPremium && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, "Premium Features"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, [ { key: "customTheme", title: "Custom Theme", description: "Personalize your experience", minLevel: 10 }, { key: "focusMode", title: "Focus Mode", description: "Minimize distractions", minLevel: 5 }, { key: "darkMode", title: "Dark Mode", description: "Enable dark theme" } ].map((setting)=>/*#__PURE__*/ React.createElement("div", { key: setting.key, className: "flex items-center justify-between p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 206, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium", __source: { fileName: "", lineNumber: 211, columnNumber: 23 }, __self: this }, setting.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 212, columnNumber: 23 }, __self: this }, setting.description), setting.minLevel && userLevel < setting.minLevel && /*#__PURE__*/ React.createElement("p", { className: "text-xs text-[#00BFFF]", __source: { fileName: "", lineNumber: 216, columnNumber: 25 }, __self: this }, "Unlocks at level ", setting.minLevel)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSettingChange(setting.key), disabled: setting.minLevel && userLevel < setting.minLevel, className: `w-12 h-6 rounded-full transition-colors ${settings[setting.key] ? "bg-[#00BFFF]" : "bg-gray-300"} ${setting.minLevel && userLevel < setting.minLevel ? "opacity-50 cursor-not-allowed" : ""}`, __source: { fileName: "", lineNumber: 221, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-4 h-4 bg-white rounded-full transform transition-transform ${settings[setting.key] ? "translate-x-7" : "translate-x-1"}`, __source: { fileName: "", lineNumber: 234, columnNumber: 23 }, __self: this }))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 249, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSave, className: "w-full bg-[#00BFFF] text-white px-6 py-3 rounded-lg hover:bg-[#00A6E6] transition-colors", __source: { fileName: "", lineNumber: 250, columnNumber: 11 }, __self: this }, "Save Settings")))); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 264, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 265, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 9 }, __self: this }, "Free User Settings"), /*#__PURE__*/ React.createElement(NewComponent, { isPremium: false, userLevel: 1, onSettingChange: console.log, onSave: async ()=>new Promise((resolve)=>setTimeout(resolve, 1000)), __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 277, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, "Premium User Settings"), /*#__PURE__*/ React.createElement(NewComponent, { isPremium: true, userLevel: 15, onSettingChange: console.log, onSave: async ()=>new Promise((resolve)=>setTimeout(resolve, 1000)), __source: { fileName: "", lineNumber: 279, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 289, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 290, columnNumber: 9 }, __self: this }, "With Success Message"), /*#__PURE__*/ React.createElement(NewComponent, { isPremium: true, userLevel: 15, initialMessage: "Settings updated successfully!", __source: { fileName: "", lineNumber: 291, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 298, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 299, columnNumber: 9 }, __self: this }, "With Error Message"), /*#__PURE__*/ React.createElement(NewComponent, { isPremium: true, userLevel: 15, initialError: "Failed to update settings", __source: { fileName: "", lineNumber: 300, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 307, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 308, columnNumber: 9 }, __self: this }, "Low Level User"), /*#__PURE__*/ React.createElement(NewComponent, { isPremium: true, userLevel: 3, onSettingChange: console.log, onSave: async ()=>new Promise((resolve)=>setTimeout(resolve, 1000)), __source: { fileName: "", lineNumber: 309, columnNumber: 9 }, __self: this }))); } function NewComponent2({ title = "", subject = "", difficulty = "easy", questionsCount = 0, completionRate = 0, lastAttemptDate = null, averageScore = 0, timeEstimate = 0, isPremium = false, onClick = ()=>{}, className = "" }) { const difficultyColors = { easy: "bg-green-100 text-green-800", medium: "bg-yellow-100 text-yellow-800", hard: "bg-red-100 text-red-800" }; return /*#__PURE__*/ React.createElement("div", { onClick: onClick, className: `inline-block bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer transform hover:scale-[1.02] ${className}`, __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-xl font-bold mb-1", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, subject)), /*#__PURE__*/ React.createElement("div", { className: `px-3 py-1 rounded-full text-sm ${difficultyColors[difficulty]}`, __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, difficulty)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-3 rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 mb-1", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Questions"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, questionsCount)), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-3 rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 mb-1", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Avg. Score"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, averageScore, "%"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Completion Rate"), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, completionRate, "%")), /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-100 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#00BFFF] rounded-full transition-all duration-300", style: { width: `${completionRate}%` }, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-sm text-gray-500", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-2", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), timeEstimate, " min"), lastAttemptDate && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Last attempt: ", new Date(lastAttemptDate).toLocaleDateString())), isPremium && /*#__PURE__*/ React.createElement("div", { className: "mt-4 pt-4 border-t border-gray-100 flex items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-crown text-[#FFD700] mr-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Premium Quiz")))); } function NewComponent2Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8 bg-gray-50", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Basic Quiz Card"), /*#__PURE__*/ React.createElement(NewComponent2, { title: "Mathematics Fundamentals", subject: "Mathematics", difficulty: "easy", questionsCount: 10, completionRate: 75, averageScore: 85, timeEstimate: 20, lastAttemptDate: "2024-01-15", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "Premium Quiz Card"), /*#__PURE__*/ React.createElement(NewComponent2, { title: "Advanced Calculus", subject: "Mathematics", difficulty: "hard", questionsCount: 20, completionRate: 60, averageScore: 72, timeEstimate: 45, lastAttemptDate: "2024-01-20", isPremium: true, __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "New Quiz (No Attempts)"), /*#__PURE__*/ React.createElement(NewComponent2, { title: "Chemistry Basics", subject: "Chemistry", difficulty: "medium", questionsCount: 15, completionRate: 0, averageScore: 0, timeEstimate: 30, __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, "Grid Layout Example"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent2, { title: "Physics Mechanics", subject: "Physics", difficulty: "medium", questionsCount: 12, completionRate: 85, averageScore: 90, timeEstimate: 25, lastAttemptDate: "2024-01-18", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent2, { title: "Biology Genetics", subject: "Biology", difficulty: "hard", questionsCount: 18, completionRate: 45, averageScore: 68, timeEstimate: 40, lastAttemptDate: "2024-01-19", isPremium: true, __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent2, { title: "English Literature", subject: "English", difficulty: "easy", questionsCount: 8, completionRate: 100, averageScore: 95, timeEstimate: 15, lastAttemptDate: "2024-01-21", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this })))); } function CalendarComponent({ calendarView = "month", setCalendarView, selectedDate = new Date(), setSelectedDate, selectedWeek = 0, setSelectedWeek, studyPlan = { daily_tasks: [] }, draggedTask = null, handleRescheduleTask = ()=>{}, setTasks = ()=>{} }) { const getDaysInMonth = (date)=>{ const year = date.getFullYear(); const month = date.getMonth(); const firstDay = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0); const daysInMonth = lastDay.getDate(); const startingDay = firstDay.getDay(); return { daysInMonth, startingDay }; }; const { daysInMonth, startingDay } = getDaysInMonth(selectedDate); const days = Array.from({ length: 42 }, (_, i)=>{ const dayNumber = i - startingDay + 1; if (dayNumber > 0 && dayNumber <= daysInMonth) { return new Date(selectedDate.getFullYear(), selectedDate.getMonth(), dayNumber); } return null; }); const getWeekDays = (date)=>{ const week = []; const current = new Date(date); current.setDate(current.getDate() - current.getDay()); for(let i = 0; i < 7; i++){ week.push(new Date(current)); current.setDate(current.getDate() + 1); } return week; }; const weekDays = getWeekDays(selectedDate); weekDays[0].setDate(weekDays[0].getDate() + selectedWeek * 7); const getTasksForDate = (date)=>{ return studyPlan.daily_tasks.filter((task)=>new Date(task.start_time).toDateString() === date.toDateString()); }; const navigateMonth = (direction)=>{ const newDate = new Date(selectedDate); newDate.setMonth(newDate.getMonth() + direction); setSelectedDate(newDate); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 shadow-sm", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-xl font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, selectedDate.toLocaleDateString("en-US", { month: "long", year: "numeric" })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateMonth(-1), className: "p-2 hover:bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigateMonth(1), className: "p-2 hover:bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCalendarView("month"), className: `px-4 py-2 rounded-lg transition-colors ${calendarView === "month" ? "bg-[#00BFFF] text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Month"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCalendarView("week"), className: `px-4 py-2 rounded-lg transition-colors ${calendarView === "week" ? "bg-[#00BFFF] text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Week"))), calendarView === "month" ? /*#__PURE__*/ React.createElement("div", { className: "select-none", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ].map((day)=>/*#__PURE__*/ React.createElement("div", { key: day, className: "text-center text-gray-500 font-medium py-2", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, day))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-7 gap-2", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, days.map((date, index)=>{ if (!date) return /*#__PURE__*/ React.createElement("div", { key: index, className: "aspect-square", __source: { fileName: "", lineNumber: 126, columnNumber: 33 }, __self: this }); const isToday = date.toDateString() === new Date().toDateString(); const isSelected = date.toDateString() === selectedDate.toDateString(); const tasks = getTasksForDate(date); return /*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>{ setSelectedDate(date); if (tasks.length) setTasks(tasks); }, onDragOver: (e)=>e.preventDefault(), onDrop: (e)=>{ e.preventDefault(); if (draggedTask) handleRescheduleTask(draggedTask.id, date); }, className: `aspect-square p-2 rounded-lg cursor-pointer relative transition-all ${isSelected ? "bg-[#00BFFF] text-white" : "hover:bg-gray-50"} ${isToday ? "ring-2 ring-[#00BFFF]" : ""} `, __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }, date.getDate()), tasks.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-1 right-1 w-5 h-5 bg-[#8A2BE2] rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 152, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs text-white", __source: { fileName: "", lineNumber: 153, columnNumber: 23 }, __self: this }, tasks.length))); }))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, weekDays.map((date, index)=>{ const tasks = getTasksForDate(date); const isToday = date.toDateString() === new Date().toDateString(); const isSelected = date.toDateString() === selectedDate.toDateString(); return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 rounded-lg transition-all ${isSelected ? "bg-[#00BFFF] bg-opacity-10" : "hover:bg-gray-50"} ${isToday ? "ring-2 ring-[#00BFFF]" : ""}`, __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, date.toLocaleDateString("en-US", { weekday: "short" })), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 180, columnNumber: 19 }, __self: this }, date.toLocaleDateString("en-US", { month: "short", day: "numeric" }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "text-sm p-2 rounded-lg bg-[#00BFFF] bg-opacity-5 hover:bg-opacity-10 transition-colors", __source: { fileName: "", lineNumber: 189, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 193, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 194, columnNumber: 25 }, __self: this }, task.subject), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 195, columnNumber: 25 }, __self: this }, new Date(task.start_time).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }))))))); }))); } function CalendarComponentStory() { const [calendarView, setCalendarView] = React.useState("month"); const [selectedDate, setSelectedDate] = React.useState(new Date()); const [selectedWeek, setSelectedWeek] = React.useState(0); const mockStudyPlan = { daily_tasks: [ { id: 1, subject: "Mathematics", start_time: "2024-01-15T09:00:00" }, { id: 2, subject: "Physics", start_time: "2024-01-15T11:00:00" }, { id: 3, subject: "Chemistry", start_time: "2024-01-20T14:00:00" }, { id: 4, subject: "Biology", start_time: "2024-01-25T10:00:00" } ] }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 232, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 233, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 234, columnNumber: 9 }, __self: this }, "Month View"), /*#__PURE__*/ React.createElement(CalendarComponent, { calendarView: "month", setCalendarView: setCalendarView, selectedDate: selectedDate, setSelectedDate: setSelectedDate, selectedWeek: selectedWeek, setSelectedWeek: setSelectedWeek, studyPlan: mockStudyPlan, __source: { fileName: "", lineNumber: 235, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 246, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }, "Week View"), /*#__PURE__*/ React.createElement(CalendarComponent, { calendarView: "week", setCalendarView: setCalendarView, selectedDate: selectedDate, setSelectedDate: setSelectedDate, selectedWeek: selectedWeek, setSelectedWeek: setSelectedWeek, studyPlan: mockStudyPlan, __source: { fileName: "", lineNumber: 248, columnNumber: 9 }, __self: this }))); } function GamificationStatus1({ points = 0, level = 1, levelProgress = 0, badges = [], streak = 0, onLevelUp = ()=>{} }) { const [showLevelUp, setShowLevelUp] = useState(false); const [showReward, setShowReward] = useState(false); const [particles, setParticles] = useState([]); const levelCap = 500; const prevLevel = useRef(level); const prevPoints = useRef(points); const levelDetails = { title: level >= 40 ? "Legend" : level >= 30 ? "Master" : level >= 20 ? "Expert" : level >= 10 ? "Advanced" : "Beginner", nextMilestone: Math.ceil(level / 10) * 10, rewards: { 10: { icon: "fas fa-scroll", name: "Advanced Study Tips", description: "Unlock advanced study techniques" }, 20: { icon: "fas fa-brain", name: "Expert Analysis", description: "Access to expert analysis tools" }, 30: { icon: "fas fa-crown", name: "Master Benefits", description: "Exclusive master-level content" }, 40: { icon: "fas fa-star", name: "Legend Status", description: "Legendary perks and features" } } }; const createParticle = useCallback(()=>{ const colors = [ "#00BFFF", "#8A2BE2", "#FFD700", "#FF4500" ]; const angle = Math.random() * Math.PI * 2; const velocity = Math.random() * 4 + 2; return { id: Math.random(), x: 50, y: 50, size: Math.random() * 6 + 2, color: colors[Math.floor(Math.random() * colors.length)], velocity: { x: Math.cos(angle) * velocity, y: Math.sin(angle) * velocity }, rotation: Math.random() * 360, opacity: 1 }; }, []); useEffect(()=>{ if (points > prevPoints.current) { const pointsDiff = points - prevPoints.current; const particleCount = Math.min(Math.floor(pointsDiff / 10), 20); const newParticles = Array.from({ length: particleCount }, createParticle); setParticles((prev)=>[ ...prev, ...newParticles ]); const animationFrame = requestAnimationFrame(function animate() { setParticles((prevParticles)=>prevParticles.map((p)=>({ ...p, x: p.x + p.velocity.x, y: p.y + p.velocity.y, opacity: p.opacity - 0.02, rotation: p.rotation + 2 })).filter((p)=>p.opacity > 0)); if (particles.length > 0) { requestAnimationFrame(animate); } }); return ()=>cancelAnimationFrame(animationFrame); } prevPoints.current = points; }, [ points, createParticle ]); useEffect(()=>{ if (level > prevLevel.current) { setShowLevelUp(true); const newParticles = Array.from({ length: 50 }, createParticle); setParticles(newParticles); const levelUpSound = new Audio("/level-up.mp3"); levelUpSound.play().catch(()=>{}); setTimeout(()=>{ setShowLevelUp(false); setParticles([]); }, 3000); if (levelDetails.rewards[level]) { setShowReward(true); setTimeout(()=>setShowReward(false), 4000); } onLevelUp(level); } prevLevel.current = level; }, [ level, createParticle, onLevelUp ]); return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 relative overflow-hidden", __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, particles.map((particle)=>/*#__PURE__*/ React.createElement("div", { key: particle.id, className: "absolute w-2 h-2 rounded-full particle", style: { left: `${particle.x}%`, top: `${particle.y}%`, width: `${particle.size}px`, height: `${particle.size}px`, backgroundColor: particle.color, opacity: particle.opacity, transform: `rotate(${particle.rotation}deg)`, boxShadow: `0 0 ${particle.size * 2}px ${particle.color}` }, __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this })), showLevelUp && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 rounded-xl", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-white transform scale-up-center", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-level-up-alt text-6xl mb-4 animate-bounce", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-2", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Level Up!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, "You've reached Level ", level), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-center space-x-2", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, Array.from({ length: 5 }).map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-3 h-3 rounded-full bg-white animate-ping-stagger", style: { animationDelay: `${i * 0.2}s` }, __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }))))), showReward && levelDetails.rewards[level] && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black bg-opacity-50 rounded-xl", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg transform scale-up-center", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${levelDetails.rewards[level].icon} text-4xl text-[#8A2BE2] mb-4`, __source: { fileName: "", lineNumber: 169, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, levelDetails.rewards[level].name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, levelDetails.rewards[level].description))), /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-6", __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, "Current Points"), /*#__PURE__*/ React.createElement("p", { className: "font-montserrat text-2xl font-bold text-[#00BFFF] hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, points)), /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-3xl text-[#FFD700] animate-pulse", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-2", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-montserrat font-bold", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, "Level ", level), /*#__PURE__*/ React.createElement("div", { className: "ml-2 bg-[#8A2BE2] text-white text-xs px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, levelDetails.title)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, levelProgress, "/", levelCap, " XP"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#8A2BE2]", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, level < 40 && `Next rank at level ${levelDetails.nextMilestone}`))), /*#__PURE__*/ React.createElement("div", { className: "relative w-full bg-gray-200 rounded-full h-3 overflow-hidden", __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full bg-[#8A2BE2] rounded-full transition-all duration-1000 ease-out", style: { width: `${levelProgress / levelCap * 100}%` }, __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-white opacity-20 animate-shimmer", __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full w-full", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, Array.from({ length: 5 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute h-full w-px bg-white opacity-30", style: { left: `${(index + 1) * 20}%` }, __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-1 text-xs text-gray-400", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("span", { key: index, __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, levelCap / 5 * index)))), badges.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 238, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat font-bold", __source: { fileName: "", lineNumber: 240, columnNumber: 15 }, __self: this }, "Recent Badges"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#00BFFF]", __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, badges.length, " earned")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, badges.map((badge, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "group flex items-center bg-gray-50 hover:bg-[#00BFFF] hover:text-white rounded-full px-3 py-1 transition-all duration-300 cursor-pointer", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${badge.icon} text-[#00BFFF] group-hover:text-white mr-2 transform group-hover:scale-110 transition-transform duration-300`, __source: { fileName: "", lineNumber: 251, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 254, columnNumber: 19 }, __self: this }, badge.name))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between pt-2", __source: { fileName: "", lineNumber: 261, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 262, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 263, columnNumber: 13 }, __self: this }, "Current Streak"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-montserrat text-xl font-bold", __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, streak), /*#__PURE__*/ React.createElement("p", { className: "ml-1 text-sm text-gray-500", __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, "days"))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 269, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire text-2xl text-[#FF4500] animate-flicker", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }), streak >= 7 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-2 -right-2 bg-[#00BFFF] text-white text-xs px-2 py-1 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 272, columnNumber: 15 }, __self: this }, "🔥")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 280, columnNumber: 7 }, __self: this }, ` @keyframes scale-up-center { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes float-particle { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) rotate(360deg); opacity: 0; } } @keyframes ping-stagger { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } .particle { position: absolute; pointer-events: none; transition: all 0.05s linear; will-change: transform, opacity; } `)); } function GamificationStatus({ points = 0, level = 1, levelProgress = 0, badges = [], streak = 0, onLevelUp = ()=>{}, variant = "default" }) { const [showLevelUp, setShowLevelUp] = useState(false); const [showReward, setShowReward] = useState(false); const [particles, setParticles] = useState([]); const levelCap = 500; const prevLevel = useRef(level); const prevPoints = useRef(points); const levelDetails = { title: level >= 40 ? "Legend" : level >= 30 ? "Master" : level >= 20 ? "Expert" : level >= 10 ? "Advanced" : "Beginner", nextMilestone: Math.ceil(level / 10) * 10, rewards: { 10: { icon: "fas fa-scroll", name: "Advanced Study Tips", description: "Unlock advanced study techniques" }, 20: { icon: "fas fa-brain", name: "Expert Analysis", description: "Access to expert analysis tools" }, 30: { icon: "fas fa-crown", name: "Master Benefits", description: "Exclusive master-level content" }, 40: { icon: "fas fa-star", name: "Legend Status", description: "Legendary perks and features" } } }; const createParticle = useCallback(()=>{ const colors = [ "#00BFFF", "#8A2BE2", "#FFD700", "#FF4500" ]; const angle = Math.random() * Math.PI * 2; const velocity = Math.random() * 4 + 2; return { id: Math.random(), x: 50, y: 50, size: Math.random() * 6 + 2, color: colors[Math.floor(Math.random() * colors.length)], velocity: { x: Math.cos(angle) * velocity, y: Math.sin(angle) * velocity }, rotation: Math.random() * 360, opacity: 1 }; }, []); useEffect(()=>{ if (points > prevPoints.current) { const pointsDiff = points - prevPoints.current; const particleCount = Math.min(Math.floor(pointsDiff / 10), 20); const newParticles = Array.from({ length: particleCount }, createParticle); setParticles((prev)=>[ ...prev, ...newParticles ]); const animationFrame = requestAnimationFrame(function animate() { setParticles((prevParticles)=>prevParticles.map((p)=>({ ...p, x: p.x + p.velocity.x, y: p.y + p.velocity.y, opacity: p.opacity - 0.02, rotation: p.rotation + 2 })).filter((p)=>p.opacity > 0)); if (particles.length > 0) { requestAnimationFrame(animate); } }); return ()=>cancelAnimationFrame(animationFrame); } prevPoints.current = points; }, [ points, createParticle ]); useEffect(()=>{ if (level > prevLevel.current) { setShowLevelUp(true); const newParticles = Array.from({ length: 50 }, createParticle); setParticles(newParticles); const levelUpSound = new Audio("/level-up.mp3"); levelUpSound.play().catch(()=>{}); setTimeout(()=>{ setShowLevelUp(false); setParticles([]); }, 3000); if (levelDetails.rewards[level]) { setShowReward(true); setTimeout(()=>setShowReward(false), 4000); } onLevelUp(level); } prevLevel.current = level; }, [ level, createParticle, onLevelUp ]); const variants = { default: "bg-white", compact: "bg-gray-50", minimal: "bg-transparent" }; return /*#__PURE__*/ React.createElement("div", { className: `${variants[variant]} rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 relative overflow-hidden`, __source: { fileName: "", lineNumber: 447, columnNumber: 5 }, __self: this }, particles.map((particle)=>/*#__PURE__*/ React.createElement("div", { key: particle.id, className: "absolute w-2 h-2 rounded-full particle", style: { left: `${particle.x}%`, top: `${particle.y}%`, width: `${particle.size}px`, height: `${particle.size}px`, backgroundColor: particle.color, opacity: particle.opacity, transform: `rotate(${particle.rotation}deg)`, boxShadow: `0 0 ${particle.size * 2}px ${particle.color}` }, __source: { fileName: "", lineNumber: 451, columnNumber: 9 }, __self: this })), showLevelUp && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 rounded-xl", __source: { fileName: "", lineNumber: 468, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-white transform scale-up-center", __source: { fileName: "", lineNumber: 469, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-level-up-alt text-6xl mb-4 animate-bounce", __source: { fileName: "", lineNumber: 470, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-2", __source: { fileName: "", lineNumber: 471, columnNumber: 13 }, __self: this }, "Level Up!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 472, columnNumber: 13 }, __self: this }, "You've reached Level ", level), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-center space-x-2", __source: { fileName: "", lineNumber: 473, columnNumber: 13 }, __self: this }, Array.from({ length: 5 }).map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-3 h-3 rounded-full bg-white animate-ping-stagger", style: { animationDelay: `${i * 0.2}s` }, __source: { fileName: "", lineNumber: 475, columnNumber: 17 }, __self: this }))))), showReward && levelDetails.rewards[level] && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black bg-opacity-50 rounded-xl", __source: { fileName: "", lineNumber: 487, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg transform scale-up-center", __source: { fileName: "", lineNumber: 488, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${levelDetails.rewards[level].icon} text-4xl text-[#8A2BE2] mb-4`, __source: { fileName: "", lineNumber: 489, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 492, columnNumber: 13 }, __self: this }, levelDetails.rewards[level].name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 495, columnNumber: 13 }, __self: this }, levelDetails.rewards[level].description))), /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-6", __source: { fileName: "", lineNumber: 502, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 503, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 504, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 505, columnNumber: 13 }, __self: this }, "Current Points"), /*#__PURE__*/ React.createElement("p", { className: "font-montserrat text-2xl font-bold text-[#00BFFF] hover:scale-105 transition-transform duration-300", __source: { fileName: "", lineNumber: 506, columnNumber: 13 }, __self: this }, points)), /*#__PURE__*/ React.createElement("i", { className: "fas fa-star text-3xl text-[#FFD700] animate-pulse", __source: { fileName: "", lineNumber: 510, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 513, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-2", __source: { fileName: "", lineNumber: 514, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 515, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-montserrat font-bold", __source: { fileName: "", lineNumber: 516, columnNumber: 15 }, __self: this }, "Level ", level), /*#__PURE__*/ React.createElement("div", { className: "ml-2 bg-[#8A2BE2] text-white text-xs px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 517, columnNumber: 15 }, __self: this }, levelDetails.title)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-end", __source: { fileName: "", lineNumber: 521, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 522, columnNumber: 15 }, __self: this }, levelProgress, "/", levelCap, " XP"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#8A2BE2]", __source: { fileName: "", lineNumber: 525, columnNumber: 15 }, __self: this }, level < 40 && `Next rank at level ${levelDetails.nextMilestone}`))), /*#__PURE__*/ React.createElement("div", { className: "relative w-full bg-gray-200 rounded-full h-3 overflow-hidden", __source: { fileName: "", lineNumber: 532, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full bg-[#8A2BE2] rounded-full transition-all duration-1000 ease-out", style: { width: `${levelProgress / levelCap * 100}%` }, __source: { fileName: "", lineNumber: 533, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-white opacity-20 animate-shimmer", __source: { fileName: "", lineNumber: 537, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full w-full", __source: { fileName: "", lineNumber: 539, columnNumber: 13 }, __self: this }, Array.from({ length: 5 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute h-full w-px bg-white opacity-30", style: { left: `${(index + 1) * 20}%` }, __source: { fileName: "", lineNumber: 541, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-1 text-xs text-gray-400", __source: { fileName: "", lineNumber: 550, columnNumber: 11 }, __self: this }, Array.from({ length: 6 }).map((_, index)=>/*#__PURE__*/ React.createElement("span", { key: index, __source: { fileName: "", lineNumber: 552, columnNumber: 15 }, __self: this }, levelCap / 5 * index)))), badges.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 558, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 559, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat font-bold", __source: { fileName: "", lineNumber: 560, columnNumber: 15 }, __self: this }, "Recent Badges"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#00BFFF]", __source: { fileName: "", lineNumber: 561, columnNumber: 15 }, __self: this }, badges.length, " earned")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 565, columnNumber: 13 }, __self: this }, badges.map((badge, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "group flex items-center bg-gray-50 hover:bg-[#00BFFF] hover:text-white rounded-full px-3 py-1 transition-all duration-300 cursor-pointer", __source: { fileName: "", lineNumber: 567, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${badge.icon} text-[#00BFFF] group-hover:text-white mr-2 transform group-hover:scale-110 transition-transform duration-300`, __source: { fileName: "", lineNumber: 571, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 574, columnNumber: 19 }, __self: this }, badge.name))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between pt-2", __source: { fileName: "", lineNumber: 581, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 582, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 583, columnNumber: 13 }, __self: this }, "Current Streak"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 584, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-montserrat text-xl font-bold", __source: { fileName: "", lineNumber: 585, columnNumber: 15 }, __self: this }, streak), /*#__PURE__*/ React.createElement("p", { className: "ml-1 text-sm text-gray-500", __source: { fileName: "", lineNumber: 586, columnNumber: 15 }, __self: this }, "days"))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 589, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fire text-2xl text-[#FF4500] animate-flicker", __source: { fileName: "", lineNumber: 590, columnNumber: 13 }, __self: this }), streak >= 7 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-2 -right-2 bg-[#00BFFF] text-white text-xs px-2 py-1 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 592, columnNumber: 15 }, __self: this }, "🔥")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 600, columnNumber: 7 }, __self: this }, ` @keyframes scale-up-center { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes float-particle { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) rotate(360deg); opacity: 0; } } @keyframes ping-stagger { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } .particle { position: absolute; pointer-events: none; transition: all 0.05s linear; will-change: transform, opacity; } `)); } function GamificationStatus1Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8", __source: { fileName: "", lineNumber: 634, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 635, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 636, columnNumber: 9 }, __self: this }, "Default State"), /*#__PURE__*/ React.createElement(GamificationStatus, { __source: { fileName: "", lineNumber: 637, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 640, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 641, columnNumber: 9 }, __self: this }, "Advanced Level with Badges"), /*#__PURE__*/ React.createElement(GamificationStatus, { points: 2500, level: 15, levelProgress: 300, badges: [ { icon: "fas fa-trophy", name: "Quick Learner" }, { icon: "fas fa-star", name: "Perfect Score" }, { icon: "fas fa-medal", name: "Top Student" } ], streak: 10, variant: "default", __source: { fileName: "", lineNumber: 642, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 656, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 657, columnNumber: 9 }, __self: this }, "Compact View"), /*#__PURE__*/ React.createElement(GamificationStatus, { points: 5000, level: 25, levelProgress: 400, badges: [ { icon: "fas fa-crown", name: "Master Scholar" }, { icon: "fas fa-certificate", name: "Expert" } ], streak: 20, variant: "compact", __source: { fileName: "", lineNumber: 658, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 671, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 672, columnNumber: 9 }, __self: this }, "Minimal View"), /*#__PURE__*/ React.createElement(GamificationStatus, { points: 7500, level: 35, levelProgress: 450, badges: [ { icon: "fas fa-crown", name: "Master Scholar" }, { icon: "fas fa-certificate", name: "Expert" }, { icon: "fas fa-award", name: "Champion" } ], streak: 30, variant: "minimal", __source: { fileName: "", lineNumber: 673, columnNumber: 9 }, __self: this }))); } function NewComponent2({ message, sender = "user", timestamp = new Date(), avatar, userName = "" }) { return /*#__PURE__*/ React.createElement("div", { className: `flex items-start gap-3 ${sender === "user" ? "flex-row-reverse" : "flex-row"}`, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${sender === "user" ? "bg-[#00BFFF]" : "bg-[#8A2BE2]"}`, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, avatar ? /*#__PURE__*/ React.createElement("img", { src: avatar, alt: `${sender}'s avatar`, className: "w-full h-full rounded-full object-cover", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "text-white font-bold text-sm", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, userName ? userName[0].toUpperCase() : sender === "user" ? "U" : "A")), /*#__PURE__*/ React.createElement("div", { className: `relative max-w-[70%] ${sender === "user" ? "bg-[#00BFFF] text-white" : "bg-white border border-gray-100 text-gray-800"} rounded-xl p-4 shadow-sm`, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, userName && /*#__PURE__*/ React.createElement("p", { className: "font-medium text-sm mb-1 opacity-90", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, userName), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, message), /*#__PURE__*/ React.createElement("span", { className: `text-xs mt-1 block ${sender === "user" ? "text-white opacity-70" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, timestamp instanceof Date ? timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : timestamp))); } function NewComponent2Story() { const now = new Date(); const fiveMinutesAgo = new Date(now.getTime() - 5 * 60000); const tenMinutesAgo = new Date(now.getTime() - 10 * 60000); return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8 bg-gray-50 min-h-screen", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "User Message Examples"), /*#__PURE__*/ React.createElement(NewComponent2, { message: "Hi! How can I improve my study routine?", sender: "user", timestamp: tenMinutesAgo, userName: "John Doe", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent2, { message: "I recommend breaking your study sessions into 25-minute focused intervals with 5-minute breaks. This is called the Pomodoro Technique.", sender: "ai", timestamp: fiveMinutesAgo, userName: "Study Buddy", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent2, { message: "That sounds like a great idea! I'll try that.", sender: "user", timestamp: now, userName: "John Doe", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-xl font-bold mt-12 mb-6", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "With Avatar Examples"), /*#__PURE__*/ React.createElement(NewComponent2, { message: "Here's my progress on the math assignment!", sender: "user", timestamp: now, avatar: "https://ucarecdn.com/ede10d5f-e49c-42a4-a6ac-2a5538bf1b6b/-/format/auto/", userName: "Sarah Wilson", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent2, { message: "Great work! You're making excellent progress. Let's focus on the advanced topics next.", sender: "ai", timestamp: now, avatar: "https://ucarecdn.com/ede10d5f-e49c-42a4-a6ac-2a5538bf1b6b/-/format/auto/", userName: "Math Tutor", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }))); } function StudyGroupCard({ name = "", description = "", subject = "", members = [], progress = 0, totalTasks = 0, completedTasks = 0, activeMembers = [], lastActive = new Date(), onClick = ()=>{}, className = "", variant = "default" }) { const completionPercentage = completedTasks / totalTasks * 100 || 0; const isActive = activeMembers.length > 0; const variants = { default: "p-6", compact: "p-4", minimal: "p-4 bg-gray-50" }; return /*#__PURE__*/ React.createElement("div", { onClick: onClick, className: `bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer ${variants[variant]} ${className}`, __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-xl font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, name), variant !== "minimal" && /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, description)), /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${isActive ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, isActive ? "Active Now" : "Inactive")), variant !== "minimal" && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Subject"), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, subject)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, progress, "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-100 rounded-full h-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#00BFFF] h-2 rounded-full transition-all duration-300", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Tasks Completed"), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, completedTasks, "/", totalTasks)), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-100 rounded-full h-2", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#8A2BE2] h-2 rounded-full transition-all duration-300", style: { width: `${completionPercentage}%` }, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }))), variant !== "minimal" && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-montserrat font-bold text-sm mb-3", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Members (", members.length, ")"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, members.map((member, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center space-x-2 bg-gray-50 px-3 py-1 rounded-full", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full ${activeMembers.includes(member.id) ? "bg-green-500" : "bg-gray-300"}`, __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, member.name))))), variant !== "compact" && /*#__PURE__*/ React.createElement("div", { className: "mt-4 pt-4 border-t border-gray-100", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Last active: ", new Date(lastActive).toLocaleDateString()))); } function StudyGroupCardStory() { const sampleMembers = [ { id: 1, name: "John Doe" }, { id: 2, name: "Jane Smith" }, { id: 3, name: "Bob Johnson" }, { id: 4, name: "Alice Brown" } ]; const groups = [ { name: "Physics Study Group", description: "Advanced Physics Concepts & Problem Solving", subject: "Physics", members: sampleMembers, progress: 75, totalTasks: 20, completedTasks: 15, activeMembers: [ 1, 2 ], lastActive: new Date() }, { name: "Math Club", description: "Calculus and Linear Algebra Study Group", subject: "Mathematics", members: sampleMembers.slice(0, 2), progress: 30, totalTasks: 10, completedTasks: 3, activeMembers: [], lastActive: new Date(Date.now() - 86400000) }, { name: "Chemistry Group", description: "Organic Chemistry Discussion", subject: "Chemistry", members: [], progress: 0, totalTasks: 0, completedTasks: 0, activeMembers: [], lastActive: new Date() } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-50 min-h-screen", __source: { fileName: "", lineNumber: 154, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-12", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "Default Variant"), /*#__PURE__*/ React.createElement(StudyGroupCard, { ...groups[0], onClick: ()=>console.log("Clicked default"), __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, "Compact Variant"), /*#__PURE__*/ React.createElement(StudyGroupCard, { ...groups[1], variant: "compact", onClick: ()=>console.log("Clicked compact"), __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 177, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, "Minimal Variant"), /*#__PURE__*/ React.createElement(StudyGroupCard, { ...groups[2], variant: "minimal", onClick: ()=>console.log("Clicked minimal"), __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, "Grid Layout Example"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, groups.map((group, index)=>/*#__PURE__*/ React.createElement(StudyGroupCard, { key: index, ...group, variant: "compact", onClick: ()=>console.log(`Clicked group ${index + 1}`), __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this })))))); } function MainComponent() { const { data: user } = useUser(); const [loading, setLoading] = useState(true); const [weeklyStats, setWeeklyStats] = useState({ tasksCompleted: 0, hoursStudied: 0, streakDays: 0, lastStudyDate: null, completionRate: 0, focusScore: 0, consistencyScore: 0, retentionRate: 0, understandingScore: 0, improvementRate: 0, studyEfficiency: 0, topicMastery: 0 }); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [gamification, setGamification] = useState({ points: 0, level: 1, nextLevelPoints: 100, progress: 0, totalAchievements: 0, rank: 0, skillPoints: {}, masteryBadges: [] }); const [achievements, setAchievements] = useState([]); const [leaderboard, setLeaderboard] = useState([]); const [dailyTaskData, setDailyTaskData] = useState([]); const [subjectProgress, setSubjectProgress] = useState([]); const [weakAreas, setWeakAreas] = useState([]); const [learningPatterns, setLearningPatterns] = useState({ peakHours: [], preferredDuration: 0, mostProductiveDay: "", subjectDifficulty: {}, studyHabits: [], improvementRate: 0, consistencyScore: 0, focusMetrics: {}, retentionTrends: [], understandingLevels: {}, topicConnections: [], learningVelocity: 0 }); const [personalizedRecommendations, setPersonalizedRecommendations] = useState([]); const [performanceAnalytics, setPerformanceAnalytics] = useState({ overallProgress: 0, learningEfficiency: 0, knowledgeRetention: 0, studyConsistency: 0, topicMastery: {}, improvementTrends: [], strengthWeaknessPairs: [], learningPathOptimization: [] }); const badges = [ { name: "Early Bird", icon: "fas fa-sun", earned: true, progress: 100 }, { name: "Night Owl", icon: "fas fa-moon", earned: true, progress: 100 }, { name: "Perfectionist", icon: "fas fa-star", earned: false, progress: 75 }, { name: "Speed Reader", icon: "fas fa-bolt", earned: true, progress: 100 }, { name: "Quiz Master", icon: "fas fa-crown", earned: false, progress: 80 }, { name: "Study Streak", icon: "fas fa-fire", earned: true, progress: 100 }, { name: "Subject Expert", icon: "fas fa-graduation-cap", earned: false, progress: 60 }, { name: "Time Manager", icon: "fas fa-clock", earned: false, progress: 90 }, { name: "Knowledge Retainer", icon: "fas fa-brain", earned: false, progress: 85 }, { name: "Focus Master", icon: "fas fa-bullseye", earned: true, progress: 100 }, { name: "Improvement King", icon: "fas fa-chart-line", earned: false, progress: 70 }, { name: "Topic Connector", icon: "fas fa-network-wired", earned: false, progress: 65 } ]; const [streamingMessage, setStreamingMessage] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setStreamingMessage(""); } }); useEffect(()=>{ const fetchStats = async ()=>{ const response = await fetch("/api/db/study-stats", { method: "POST", body: JSON.stringify({ query: ` SELECT COUNT(*) as tasks, SUM(duration) as hours, MAX(created_at) as last_study, COUNT(DISTINCT DATE(created_at)) as streak FROM study_sessions WHERE user_id = ? AND created_at >= DATE_SUB(NOW(), INTERVAL ${user?.isPremium ? "30" : "7"} DAY) `, values: [ user?.id ] }) }); const data = await response.json(); setWeeklyStats({ tasksCompleted: data[0]?.tasks || 0, hoursStudied: Math.round((data[0]?.hours || 0) / 60), streakDays: data[0]?.streak || 0, lastStudyDate: data[0]?.last_study }); }; const fetchGamification = async ()=>{ const response = await fetch("/api/db/gamification", { method: "POST", body: JSON.stringify({ query: ` SELECT points, level, next_level_points FROM user_progress p WHERE user_id = ? `, values: [ user?.id ] }) }); const data = await response.json(); if (data[0]) { setGamification({ points: data[0].points, level: data[0].level, nextLevelPoints: data[0].next_level_points, progress: data[0].points / data[0].next_level_points * 100 }); } }; const fetchLeaderboard = async ()=>{ const response = await fetch("/api/db/gamification", { method: "POST", body: JSON.stringify({ query: ` SELECT u.user_id, u.points, u.level, COUNT(a.id) as achievements FROM user_progress u LEFT JOIN user_achievements a ON u.user_id = a.user_id GROUP BY u.user_id ORDER BY u.points DESC LIMIT 5 `, values: [] }) }); const data = await response.json(); setLeaderboard(data); }; const fetchAchievements = async ()=>{ const response = await fetch("/api/db/gamification", { method: "POST", body: JSON.stringify({ query: ` SELECT a.*, ua.progress, ua.unlocked_at FROM achievements a LEFT JOIN user_achievements ua ON a.id = ua.achievement_id AND ua.user_id = ? ORDER BY ua.unlocked_at DESC `, values: [ user?.id ] }) }); const data = await response.json(); setAchievements(data); }; const fetchLearningPatterns = async ()=>{ const response = await fetch("/api/db/study-stats", { method: "POST", body: JSON.stringify({ query: ` SELECT HOUR(created_at) as hour, DAYNAME(created_at) as day, AVG(duration) as avg_duration, AVG(focus_score) as avg_focus, COUNT(*) as session_count FROM study_sessions WHERE user_id = ? GROUP BY HOUR(created_at), DAYNAME(created_at) ORDER BY session_count DESC `, values: [ user?.id ] }) }); const data = await response.json(); const peakHours = data.filter((d)=>d.avg_focus > 7).map((d)=>d.hour).slice(0, 3); const mostProductiveDay = data.reduce((acc, curr)=>acc.session_count > curr.session_count ? acc : curr).day; setLearningPatterns((prev)=>({ ...prev, peakHours, mostProductiveDay, preferredDuration: Math.round(data.reduce((acc, curr)=>acc + curr.avg_duration, 0) / data.length), studyHabits: data.map((d)=>({ hour: d.hour, day: d.day, focusScore: Math.round(d.avg_focus), sessionCount: d.session_count })) })); }; const fetchPersonalizedRecommendations = async ()=>{ const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "Generate personalized study recommendations based on learning patterns and weak areas." }, { role: "user", content: JSON.stringify({ weakAreas, learningPatterns, subjectProgress }) } ] }) }); const data = await response.json(); setPersonalizedRecommendations(JSON.parse(data.choices[0].message.content)); }; if (user?.id) { setLoading(true); Promise.all([ fetchStats(), fetchGamification(), user?.isPremium && fetchLeaderboard(), user?.isPremium && fetchAchievements(), user?.isPremium && fetchLearningPatterns(), user?.isPremium && fetchPersonalizedRecommendations() ]).finally(()=>{ setLoading(false); }); } }, [ user ]); useEffect(()=>{ if (user?.id) { fetch("/api/db/study-stats", { method: "POST", body: JSON.stringify({ query: ` WITH StudyMetrics AS ( SELECT DATE(created_at) as day, COUNT(*) as tasks, AVG(duration) as avg_duration, SUM(CASE WHEN completed = 1 THEN 1 ELSE 0 END) as completed_tasks, AVG(focus_score) as avg_focus, COUNT(DISTINCT subject) as unique_subjects, SUM(duration) as total_duration, MAX(score) as max_score, MIN(score) as min_score, AVG(understanding_score) as understanding, AVG(retention_score) as retention, AVG(efficiency_score) as efficiency FROM study_sessions WHERE user_id = ? GROUP BY DATE(created_at) ), LearningProgress AS ( SELECT subject, topic, AVG(score) as topic_mastery, COUNT(*) as practice_count, MAX(created_at) as last_practice, AVG(confidence_score) as confidence, AVG(speed_score) as speed FROM practice_results WHERE user_id = ? GROUP BY subject, topic ) SELECT sm.*, lp.topic_mastery, lp.confidence, lp.speed FROM StudyMetrics sm LEFT JOIN LearningProgress lp ON DATE(sm.day) = DATE(lp.last_practice) ORDER BY sm.day DESC LIMIT ${user?.isPremium ? "30" : "7"} `, values: [ user?.id, user?.id ] }) }).then((res)=>res.json()).then((data)=>{ setDailyTaskData(data.map((d)=>({ day: new Date(d.day).toLocaleDateString("en-US", { weekday: "short" }), tasks: d.tasks, avgDuration: Math.round(d.avg_duration), completionRate: Math.round(d.completed_tasks / d.tasks * 100), focusScore: Math.round(d.avg_focus), uniqueSubjects: d.unique_subjects, totalDuration: Math.round(d.total_duration), maxScore: d.max_score, minScore: d.min_score, understanding: Math.round(d.understanding), retention: Math.round(d.retention), efficiency: Math.round(d.efficiency), topicMastery: Math.round(d.topic_mastery), confidence: Math.round(d.confidence), speed: Math.round(d.speed) }))); setPerformanceAnalytics({ overallProgress: Math.round(data.reduce((acc, d)=>acc + d.topic_mastery, 0) / data.length), learningEfficiency: Math.round(data.reduce((acc, d)=>acc + d.efficiency, 0) / data.length), knowledgeRetention: Math.round(data.reduce((acc, d)=>acc + d.retention, 0) / data.length), studyConsistency: Math.round(data.reduce((acc, d)=>acc + d.efficiency, 0) / data.length), topicMastery: data.reduce((acc, d)=>{ if (d.subject) { acc[d.subject] = Math.round(d.topic_mastery); } return acc; }, {}), improvementTrends: data.map((d)=>({ date: d.day, score: d.topic_mastery })), strengthWeaknessPairs: data.reduce((acc, d)=>{ if (d.subject) { acc.push({ subject: d.subject, strength: d.confidence > 75, score: d.confidence }); } return acc; }, []), learningPathOptimization: data.filter((d)=>d.efficiency < 70).map((d)=>({ topic: d.subject, efficiency: d.efficiency, recommendation: "Need more practice" })) }); }); fetch("/api/db/study-stats", { method: "POST", body: JSON.stringify({ query: ` WITH SubjectAnalytics AS ( SELECT subject, AVG(score) as progress, COUNT(*) as attempts, MAX(score) as highest_score, MIN(score) as lowest_score, AVG(duration) as avg_duration, AVG(understanding_score) as comprehension, AVG(retention_score) as retention, AVG(confidence_score) as confidence FROM quiz_results WHERE user_id = ? GROUP BY subject ) SELECT sa.*, COUNT(DISTINCT t.topic) as topics_covered, AVG(t.difficulty_score) as topic_difficulty FROM SubjectAnalytics sa LEFT JOIN topic_progress t ON sa.subject = t.subject AND t.user_id = ? GROUP BY sa.subject LIMIT ${user?.isPremium ? "10" : "3"} `, values: [ user?.id, user?.id ] }) }).then((res)=>res.json()).then((data)=>{ setSubjectProgress(data.map((d)=>({ subject: d.subject, progress: Math.round(d.progress), attempts: d.attempts, highestScore: d.highest_score, lowestScore: d.lowest_score, avgDuration: Math.round(d.avg_duration), comprehension: Math.round(d.comprehension), retention: Math.round(d.retention), confidence: Math.round(d.confidence), topicsCovered: d.topics_covered, difficulty: Math.round(d.topic_difficulty) }))); }); if (user?.isPremium) { fetch("/api/db/study-stats", { method: "POST", body: JSON.stringify({ query: ` WITH WeakTopics AS ( SELECT subject, topic, AVG(score) as avg_score, COUNT(*) as attempts, MAX(created_at) as last_attempt, AVG(understanding_score) as comprehension, AVG(retention_score) as retention, AVG(confidence_score) as confidence FROM quiz_results WHERE user_id = ? AND score < 70 GROUP BY subject, topic ) SELECT w.*, r.recommended_actions, r.study_resources FROM WeakTopics w LEFT JOIN topic_recommendations r ON w.subject = r.subject AND w.topic = r.topic ORDER BY w.avg_score ASC LIMIT 5 `, values: [ user?.id ] }) }).then((res)=>res.json()).then((data)=>{ setWeakAreas(data.map((d)=>({ subject: d.subject, topic: d.topic, score: Math.round(d.avg_score), attempts: d.attempts, lastAttempt: new Date(d.last_attempt), comprehension: Math.round(d.comprehension), retention: Math.round(d.retention), confidence: Math.round(d.confidence), recommendations: d.recommended_actions, resources: d.study_resources }))); }); } } }, [ user ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 font-poppins", __source: { fileName: "", lineNumber: 508, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent2, { currentPath: "/study-progress-tracker", __source: { fileName: "", lineNumber: 509, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "pt-24 pb-16 px-4", __source: { fileName: "", lineNumber: 510, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-6xl", __source: { fileName: "", lineNumber: 511, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 512, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:col-span-2 space-y-8", __source: { fileName: "", lineNumber: 513, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 shadow-sm", __source: { fileName: "", lineNumber: 514, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 515, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 516, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-montserrat text-3xl font-bold mb-2", __source: { fileName: "", lineNumber: 517, columnNumber: 21 }, __self: this }, "Study Progress"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 520, columnNumber: 21 }, __self: this }, "Track your learning journey")), !user?.isPremium && /*#__PURE__*/ React.createElement("a", { href: "/premium", className: "bg-[#FFD700] text-gray-900 px-4 py-2 rounded-lg hover:bg-[#FFC700] transition-colors", __source: { fileName: "", lineNumber: 523, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-crown mr-2", __source: { fileName: "", lineNumber: 527, columnNumber: 23 }, __self: this }), "Upgrade")), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-32", __source: { fileName: "", lineNumber: 533, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-[#00BFFF]", __source: { fileName: "", lineNumber: 534, columnNumber: 21 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 537, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement(GamificationStatus, { points: gamification.points, level: gamification.level, levelProgress: gamification.progress, badges: achievements, streak: weeklyStats.streakDays, __source: { fileName: "", lineNumber: 538, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 546, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-[#00BFFF] to-[#8A2BE2] p-1 rounded-xl", __source: { fileName: "", lineNumber: 547, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg h-full", __source: { fileName: "", lineNumber: 548, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 549, columnNumber: 27 }, __self: this }, "Learning Analytics"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 552, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 553, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 554, columnNumber: 31 }, __self: this }, "Knowledge Retention"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 557, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-24 h-2 bg-gray-100 rounded-full mr-2", __source: { fileName: "", lineNumber: 558, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#00BFFF] rounded-full", style: { width: `${performanceAnalytics.knowledgeRetention}%` }, __source: { fileName: "", lineNumber: 559, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 566, columnNumber: 33 }, __self: this }, performanceAnalytics.knowledgeRetention, "%"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 571, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 572, columnNumber: 31 }, __self: this }, "Learning Efficiency"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 575, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-24 h-2 bg-gray-100 rounded-full mr-2", __source: { fileName: "", lineNumber: 576, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#8A2BE2] rounded-full", style: { width: `${performanceAnalytics.learningEfficiency}%` }, __source: { fileName: "", lineNumber: 577, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 584, columnNumber: 33 }, __self: this }, performanceAnalytics.learningEfficiency, "%"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 589, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 590, columnNumber: 31 }, __self: this }, "Study Consistency"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 593, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-24 h-2 bg-gray-100 rounded-full mr-2", __source: { fileName: "", lineNumber: 594, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-[#00BFFF] rounded-full", style: { width: `${performanceAnalytics.studyConsistency}%` }, __source: { fileName: "", lineNumber: 595, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 602, columnNumber: 33 }, __self: this }, performanceAnalytics.studyConsistency, "%")))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-[#8A2BE2] to-[#00BFFF] p-1 rounded-xl", __source: { fileName: "", lineNumber: 611, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg h-full", __source: { fileName: "", lineNumber: 612, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 613, columnNumber: 27 }, __self: this }, "Subject Mastery"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 616, columnNumber: 27 }, __self: this }, subjectProgress.map((subject, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative", __source: { fileName: "", lineNumber: 618, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-1", __source: { fileName: "", lineNumber: 619, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 620, columnNumber: 35 }, __self: this }, subject.subject), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 623, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 624, columnNumber: 37 }, __self: this }, "Comprehension: ", subject.comprehension, "%"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 627, columnNumber: 37 }, __self: this }, "Retention: ", subject.retention, "%"))), /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-gray-100 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 632, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full rounded-full transition-all duration-500", style: { width: `${subject.progress}%`, background: `linear-gradient(to right, #00BFFF ${subject.confidence}%, #8A2BE2)` }, __source: { fileName: "", lineNumber: 633, columnNumber: 35 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-1 flex justify-between text-xs text-gray-500", __source: { fileName: "", lineNumber: 641, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 642, columnNumber: 35 }, __self: this }, subject.topicsCovered, " topics covered"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 645, columnNumber: 35 }, __self: this }, "Difficulty: ", subject.difficulty, "/10")))))))), user?.isPremium && weakAreas.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 rounded-xl p-6", __source: { fileName: "", lineNumber: 657, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-montserrat text-lg font-bold mb-4 text-red-800", __source: { fileName: "", lineNumber: 658, columnNumber: 25 }, __self: this }, "Learning Gaps"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 661, columnNumber: 25 }, __self: this }, weakAreas.map((area, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 663, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 667, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 668, columnNumber: 33 }, __self: this }, area.subject, " - ", area.topic), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 671, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 672, columnNumber: 35 }, __self: this }, "Score: ", area.score, "%"), /*#__PURE__*/ React.createElement("span", { className: "text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 675, columnNumber: 35 }, __self: this }, "Confidence: ", area.confidence, "%"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 680, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm", __source: { fileName: "", lineNumber: 681, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 682, columnNumber: 35 }, __self: this }, "Comprehension"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 685, columnNumber: 35 }, __self: this }, area.comprehension, "%")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm", __source: { fileName: "", lineNumber: 687, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 688, columnNumber: 35 }, __self: this }, "Retention"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 691, columnNumber: 35 }, __self: this }, area.retention, "%"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 pt-4 border-t border-gray-100", __source: { fileName: "", lineNumber: 694, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 695, columnNumber: 33 }, __self: this }, "Recommended Actions:"), /*#__PURE__*/ React.createElement("ul", { className: "text-sm text-gray-600 space-y-1", __source: { fileName: "", lineNumber: 698, columnNumber: 33 }, __self: this }, area.recommendations?.map((rec, i)=>/*#__PURE__*/ React.createElement("li", { key: i, className: "flex items-center", __source: { fileName: "", lineNumber: 700, columnNumber: 37 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-500 mr-2", __source: { fileName: "", lineNumber: 701, columnNumber: 39 }, __self: this }), rec))))))))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 716, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 shadow-sm", __source: { fileName: "", lineNumber: 717, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-montserrat text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 718, columnNumber: 17 }, __self: this }, "Quick Stats"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 721, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 722, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "

Study Progress

Quick Stats

Unlock More Features