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 [messages, setMessages] = useState([]); const [inputText, setInputText] = useState(""); const [isTyping, setIsTyping] = useState(false); const chatboxRef = useRef(null); const [selectedSubject, setSelectedSubject] = useState(null); const [subjects, setSubjects] = useState([]); const { data: user } = useUser(); const [streamingMessage, setStreamingMessage] = useState(""); const [promptCount, setPromptCount] = useState(0); const [chatContext, setChatContext] = useState([]); const teacherPrompt = `You are a friendly and patient AI teacher who specializes in adaptive learning. Your role is to: 1. Assess the student's current understanding through questions 2. Break down complex topics into simple steps 3. Provide relevant examples and analogies 4. Encourage active learning through practice questions 5. Offer study tips and memory techniques 6. Maintain an encouraging and supportive tone 7. Adapt explanations based on the student's responses 8. Connect concepts to real-world applications 9. Identify and address misconceptions 10. Celebrate progress and achievements Keep responses concise (max 2-3 paragraphs) and engaging. Use emojis occasionally to maintain a friendly tone.`; const handleSendMessage = async ()=>{ if (!inputText.trim()) return; if (!selectedSubject) { setMessages((prev)=>[ ...prev, { text: "Please select a subject before starting the chat.", sender: "ai" } ]); return; } if (!user?.isPremium) { const storedCount = parseInt(localStorage.getItem("dailyPrompts") || "0"); if (storedCount >= 10) { setMessages((prev)=>[ ...prev, { text: "You've reached your daily limit of 10 messages. Upgrade to Premium for unlimited conversations!", sender: "ai" } ]); return; } localStorage.setItem("dailyPrompts", (storedCount + 1).toString()); setPromptCount(storedCount + 1); } const newMessage = { text: inputText, sender: "user" }; setMessages([ ...messages, newMessage ]); setInputText(""); setIsTyping(true); const updatedContext = [ ...chatContext, { role: "user", content: inputText } ]; setChatContext(updatedContext); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `${teacherPrompt} Current subject: ${selectedSubject}. Previous context: ${JSON.stringify(chatContext)}` }, ...updatedContext.slice(-4) ], stream: true }) }); if (!response.ok) throw new Error("Failed to get response"); handleStreamResponse(response); await fetch("/api/gamification", { method: "POST", body: JSON.stringify({ action: "add_points", points: 5, activityType: "ai_learning", groupId: null }) }); } catch (error) { console.error("Error:", error); setIsTyping(false); setMessages((prev)=>[ ...prev, { text: "Sorry, I'm having trouble responding right now. Please try again.", sender: "ai" } ]); } }; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { text: message, sender: "ai" } ]); setStreamingMessage(""); setIsTyping(false); setChatContext((prev)=>[ ...prev, { role: "assistant", content: message } ]); } }); useEffect(()=>{ if (user?.id) { const fetchSubjects = async ()=>{ const response = await fetch("/api/db/personalisestudyplan", { method: "POST", body: JSON.stringify({ query: "SELECT subjects FROM `study_plans` WHERE `user_id` = ? ORDER BY `created_at` DESC LIMIT 1", values: [ user.id ] }) }); const data = await response.json(); if (data[0]?.subjects) { setSubjects(JSON.parse(data[0].subjects)); } }; fetchSubjects(); const storedCount = localStorage.getItem("dailyPrompts"); const lastPromptDate = localStorage.getItem("lastPromptDate"); const today = new Date().toDateString(); if (lastPromptDate !== today) { localStorage.setItem("lastPromptDate", today); localStorage.setItem("dailyPrompts", "0"); } } const welcomeMessage = { text: "Hi! I'm your friendly Study Buddy teacher. Choose a subject to get started. What would you like to learn today?", sender: "ai" }; setMessages([ welcomeMessage ]); }, [ user ]); useEffect(()=>{ if (chatboxRef.current) { chatboxRef.current.scrollTop = chatboxRef.current.scrollHeight; } }, [ messages, streamingMessage ]); useEffect(()=>{ if (selectedSubject) { const introMessage = { text: `Great! I'll be your teacher for ${selectedSubject}. What would you like to learn about?`, sender: "ai" }; setMessages((prev)=>[ ...prev, introMessage ]); fetch("/api/user-progress", { method: "POST", body: JSON.stringify({ action: "get", subject: selectedSubject }) }).then((r)=>r.json()).then((data)=>{ setChatContext((prev)=>[ ...prev, { role: "system", content: `Student's current progress in ${selectedSubject}: ${JSON.stringify(data)}` } ]); }); } }, [ selectedSubject ]); const navigationLinks = [ { text: "Dashboard", href: "/smart-study-buddy-dashboard-design", icon: "fas fa-compass", tooltip: "View your study overview" }, { text: "Study Plan", href: "/study-plan", icon: "fas fa-calendar-alt", tooltip: "Manage your study schedule" }, { text: "Quiz", href: "/quiz-builder", icon: "fas fa-brain", tooltip: "Test your knowledge" }, { text: "Notes", href: "/notes-summary-generator", icon: "fas fa-book-open", tooltip: "Create and view notes" }, { text: "Progress", href: "/study-progress-tracker", icon: "fas fa-chart-line", tooltip: "Track your learning journey" }, { text: "Chat", href: "/study-buddy-chatbot", icon: "fas fa-comments", tooltip: "Get help from Study Buddy" }, { text: "Groups", href: "/study-groups", icon: "fas fa-users", tooltip: "Join study groups" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 font-poppins", __source: { fileName: "", lineNumber: 238, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent2, { currentPath: "/study-buddy-chatbot", __source: { fileName: "", lineNumber: 239, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "pt-24 pb-16 px-4", __source: { fileName: "", lineNumber: 240, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-4xl", __source: { fileName: "", lineNumber: 241, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-3 mb-6", __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, subjects.map((subject)=>/*#__PURE__*/ React.createElement("button", { key: subject, onClick: ()=>setSelectedSubject(subject), className: `px-4 py-2 rounded-full transition-all ${selectedSubject === subject ? "bg-[#00BFFF] text-white" : "bg-gray-100 text-[#00BFFF] hover:bg-[#00BFFF] hover:text-white"}`, __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, subject))), !user?.isPremium && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this }, 10 - promptCount, " messages remaining today"), /*#__PURE__*/ React.createElement("a", { href: "/premium", className: "text-[#00BFFF] hover:underline", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, "Upgrade to Premium for unlimited messages")), /*#__PURE__*/ React.createElement("div", { ref: chatboxRef, className: "bg-gray-50 rounded-xl p-6 h-[500px] overflow-y-auto mb-6", __source: { fileName: "", lineNumber: 270, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.sender === "user" ? "justify-end" : "justify-start"} items-start`, __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex items-start gap-2 max-w-[80%]`, __source: { fileName: "", lineNumber: 284, columnNumber: 21 }, __self: this }, message.sender === "ai" && /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#00BFFF] flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 286, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-sm", __source: { fileName: "", lineNumber: 287, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `rounded-xl p-4 ${message.sender === "user" ? "bg-[#00BFFF] text-white" : "bg-white border border-gray-200"}`, __source: { fileName: "", lineNumber: 290, columnNumber: 23 }, __self: this }, message.text)))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start items-start", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-2 max-w-[80%]", __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#00BFFF] flex items-center justify-center flex-shrink-0", __source: { fileName: "", lineNumber: 305, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-sm", __source: { fileName: "", lineNumber: 306, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-w-[80%] rounded-xl p-4 bg-white border border-gray-200", __source: { fileName: "", lineNumber: 308, columnNumber: 23 }, __self: this }, streamingMessage, /*#__PURE__*/ React.createElement("span", { className: "inline-block animate-pulse", __source: { fileName: "", lineNumber: 310, columnNumber: 25 }, __self: this }, "▊")))))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputText, onChange: (e)=>setInputText(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSendMessage(), placeholder: "Ask me anything about your studies...", className: "flex-1 px-6 py-4 rounded-xl border-2 border-gray-200 focus:outline-none focus:border-[#00BFFF]", disabled: isTyping, __source: { fileName: "", lineNumber: 318, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, disabled: isTyping, className: "bg-[#00BFFF] text-white px-8 py-4 rounded-xl hover:bg-[#00A6E6] disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this }, isTyping ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 332, columnNumber: 29 }, __self: this }) : "Send")))))); }