\n );\n }\n\n return (\n

\n {/* Header */}\n

📅 Session Scheduler

\n Manage your learning sessions, schedule new meetings, and track your progress.\n

\n\n {/* Quick Stats */}\n

📅

{upcomingSessions.length}

Upcoming

✅

\n {sessions.filter(s => s.status === 'completed').length}\n

Completed

🎯

{matches.length}

Ready to Schedule

⏱️

\n {Math.round(sessions.filter(s => s.status === 'completed')\n .reduce((total, s) => total + (s.duration_minutes || 60), 0) / 60)}h\n

Total Hours

\n\n {/* Tabs */}\n

\n {[\n { id: 'upcoming', name: 'Upcoming Sessions', count: upcomingSessions.length },\n { id: 'all', name: 'All Sessions', count: sessions.length },\n { id: 'matches', name: 'Ready to Schedule', count: matches.length }\n ].map((tab) => (\n setActiveTab(tab.id as any)}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === tab.id\n ? 'border-purple-500 text-purple-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.name} ({tab.count})\n \n ))}\n

\n\n

\n {/* Upcoming Sessions */}\n {activeTab === 'upcoming' && (\n

\n {upcomingSessions.length === 0 ? (\n

📅

No upcoming sessions

Schedule your first session to get started!

\n setActiveTab('matches')}\n className=\"px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors\"\n >\n View Available Matches\n \n

\n ) : (\n upcomingSessions.map((session) => (\n

{session.skill_name}

\n \n {session.learner_id === user.id ? 'Learning' : 'Teaching'}\n \n

📅 {formatDateTime(session.scheduled_at)}

⏱️ {session.duration_minutes} minutes

👤 With: {session.learner_id === user.id ? session.teacher_name : session.learner_name}

\n {session.meeting_link && (\n

🔗 Join Meeting

\n )}\n {session.notes &&

📝 {session.notes}

}\n

\n updateSessionStatus(session.id, 'completed')}\n className=\"px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700 transition-colors\"\n >\n Mark Complete\n \n updateSessionStatus(session.id, 'cancelled')}\n className=\"px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700 transition-colors\"\n >\n Cancel\n \n

\n ))\n )}\n

\n )}\n\n {/* All Sessions */}\n {activeTab === 'all' && (\n

\n {sessions.length === 0 ? (\n

📚

No sessions yet

Your learning journey starts here!

\n ) : (\n sessions.map((session) => (\n

{session.skill_name}

\n \n {session.learner_id === user.id ? 'Learning' : 'Teaching'}\n \n \n {session.status}\n \n

📅 {formatDateTime(session.scheduled_at)}

⏱️ {session.duration_minutes} minutes

👤 With: {session.learner_id === user.id ? session.teacher_name : session.learner_name}

\n {session.notes &&

📝 {session.notes}

}\n

\n {session.status === 'completed' && (\n

\n {session.learner_id === user.id && session.teacher_rating && (\n

Teacher: ⭐ {session.teacher_rating}/5

\n )}\n {session.teacher_id === user.id && session.learner_rating && (\n

Learner: ⭐ {session.learner_rating}/5

\n )}\n

\n ))\n )}\n

\n )}\n\n {/* Available Matches */}\n {activeTab === 'matches' && (\n

\n {matches.length === 0 ? (\n

🎯

No accepted matches

Find new matches to schedule sessions!

\n window.location.hash = '#matcher'}\n className=\"px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors\"\n >\n Find Matches\n \n

\n ) : (\n matches.map((match) => (\n

{match.skill_name}

\n \n {match.compatibility_score}% match\n \n

👤 {match.learner_id === user.id ? 'Teacher' : 'Learner'}: {match.learner_id === user.id ? match.teacher_name : match.learner_name}

🤖 AI Analysis: {match.ai_reasoning}

\n {\n setSelectedMatch(match);\n setShowScheduleModal(true);\n }}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors\"\n >\n Schedule Session\n \n

\n ))\n )}\n

\n )}\n

\n\n {/* Schedule Session Modal */}\n {showScheduleModal && selectedMatch && (\n

Schedule Session

{selectedMatch.skill_name}

\n With: {selectedMatch.learner_id === user.id ? selectedMatch.teacher_name : selectedMatch.learner_name}\n

\n Date & Time\n setScheduleForm({ ...scheduleForm, scheduled_at: e.target.value })}\n min={getMinDateTime()}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n required\n />\n

\n Duration\n setScheduleForm({ ...scheduleForm, duration_minutes: parseInt(e.target.value) })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n >\n \n \n \n \n \n

\n Notes (Optional)\n setScheduleForm({ ...scheduleForm, notes: e.target.value })}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent\"\n placeholder=\"Any specific topics or goals for this session...\"\n />\n

\n \n Schedule Session\n \n {\n setShowScheduleModal(false);\n setSelectedMatch(null);\n }}\n className=\"flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors\"\n >\n Cancel\n \n

\n )}\n

\n );\n}","deleted","label",[168,169,150],"frontend","components","permalink","https://www.val.town/x/Cess/skillswapapappforcommunityskillexchange/code/frontend/components/Scheduler.tsx","extension","actionData","errors"]