import React, { useState, useEffect, useRef } from "react" import { callAI } from "call-ai" import { ImgGen } from "use-vibes" import { useFireproof } from "use-fireproof" export default function BusinessStudyHub() { const { database, useLiveQuery, useDocument } = useFireproof("lander-business-study") const [isLoggedIn, setIsLoggedIn] = useState(false) const [userProfile, setUserProfile] = useState(null) const [currentSection, setCurrentSection] = useState("study") // study, university-info const [currentTopic, setCurrentTopic] = useState("") const [studyMode, setStudyMode] = useState("explore") const [isGenerating, setIsGenerating] = useState(false) const [audioPlaying, setAudioPlaying] = useState(false) const [selectedChapter, setSelectedChapter] = useState("") const [universityQuery, setUniversityQuery] = useState("") const [universityResponse, setUniversityResponse] = useState("") const audioRef = useRef(null) // Get all study materials and user profiles const { docs: flashcards } = useLiveQuery('type', { key: 'flashcard' }) const { docs: explanations } = useLiveQuery('type', { key: 'explanation' }) const { docs: concepts } = useLiveQuery('type', { key: 'concept' }) const { docs: profiles } = useLiveQuery('type', { key: 'user-profile' }) // Check if user is already logged in useEffect(() => { if (profiles.length > 0) { setUserProfile(profiles[0]) setIsLoggedIn(true) } }, [profiles]) const chapters = [ "Understanding Economic Systems and Business", "Economics: The Framework for Business", "Competing in the Global Marketplace", "Forms of Business Ownership", "Entrepreneurship: Starting and Managing Your Own Business", "Management and Leadership in Today's Organizations", "Designing Organizational Structures", "Managing Human Resources and Labor Relations", "Motivating Employees", "Achieving World-Class Operations Management", "Creating Products and Pricing Strategies to Meet Customers' Needs", "Distributing and Promoting Products and Services", "Using Technology to Manage Information", "Using Financial Information and Accounting", "Financing the Enterprise", "Understanding Money and Financial Institutions" ] const landerInfo = { supportOffices: { "Academic Success Center": { location: "Carnie Smith Building, Room 106", hours: "Monday-Friday: 8:00 AM - 5:00 PM", phone: "(864) 388-8890", services: "Tutoring, Study Skills, Academic Coaching" }, "Student Financial Services": { location: "Centennial Hall, 2nd Floor", hours: "Monday-Friday: 8:00 AM - 4:30 PM", phone: "(864) 388-8340", services: "Financial Aid, Billing, Scholarships" }, "Registrar's Office": { location: "Centennial Hall, 1st Floor", hours: "Monday-Friday: 8:00 AM - 4:30 PM", phone: "(864) 388-8307", services: "Transcripts, Registration, Academic Records" }, "Career Services": { location: "Student Center, 2nd Floor", hours: "Monday-Friday: 8:00 AM - 5:00 PM", phone: "(864) 388-8885", services: "Job Placement, Resume Help, Internships" } }, cafeteriaHours: { "Bearcat Dining Hall": { breakfast: "Monday-Friday: 7:00 AM - 10:00 AM", lunch: "Monday-Friday: 11:00 AM - 2:00 PM", dinner: "Monday-Friday: 5:00 PM - 8:00 PM", weekend: "Saturday-Sunday: Brunch 10:00 AM - 2:00 PM, Dinner 5:00 PM - 7:00 PM" }, "Starbucks (Student Center)": { hours: "Monday-Friday: 7:00 AM - 3:00 PM", weekend: "Closed" } }, businessProfessors: { "Dr. Sarah Johnson": { title: "Dean, College of Business", email: "sjohnson@lander.edu", office: "Hutchins Business Building, Room 201", phone: "(864) 388-8960", specialization: "Strategic Management" }, "Dr. Michael Chen": { title: "Professor of Marketing", email: "mchen@lander.edu", office: "Hutchins Business Building, Room 215", phone: "(864) 388-8965", specialization: "Digital Marketing, Consumer Behavior" }, "Dr. Emily Rodriguez": { title: "Professor of Finance", email: "erodriguez@lander.edu", office: "Hutchins Business Building, Room 208", phone: "(864) 388-8962", specialization: "Corporate Finance, Investments" } } } const handleUniversityQuery = async () => { if (!universityQuery.trim()) return setIsGenerating(true) try { const response = await callAI(`Answer this question about Lander University using the provided information. Be helpful and specific. Question: ${universityQuery} Available Information: - Support offices and their locations, hours, and services - Cafeteria hours and dining options - Business faculty contact information - Academic calendar information If the question is about something not in the provided info, suggest who they should contact or where to find more information.`, { schema: { properties: { answer: { type: "string" }, relevantContacts: { type: "array", items: { type: "string" } }, additionalResources: { type: "array", items: { type: "string" } } } } }) const data = JSON.parse(response) setUniversityResponse(data.answer) } catch (error) { console.error('Error querying university info:', error) setUniversityResponse("I'm having trouble accessing that information right now. Please contact the main office at (864) 388-8000 for assistance.") } finally { setIsGenerating(false) } } const generateStudyMaterial = async (topic, chapter) => { if (!topic.trim()) return setIsGenerating(true) try { // Generate comprehensive study material const materialGenerator = await callAI(`Create comprehensive study material for "${topic}" from Chapter: ${chapter} of OpenStax Introduction to Business textbook. Include key concepts, real-world examples, and important terminology.`, { stream: true, schema: { properties: { concept: { type: "string" }, definition: { type: "string" }, keyPoints: { type: "array", items: { type: "string" } }, realWorldExample: { type: "string" }, terminology: { type: "array", items: { type: "object", properties: { term: { type: "string" }, definition: { type: "string" } } } }, audioScript: { type: "string" }, imagePrompt: { type: "string" } } } }) let finalMaterial = "" for await (const chunk of materialGenerator) { finalMaterial = chunk } const material = JSON.parse(finalMaterial) // Save concept document await database.put({ _id: `concept-${Date.now()}`, type: 'concept', topic, chapter, userId: userProfile?._id, ...material, createdAt: new Date().toISOString() }) // Generate flashcards const flashcardGenerator = await callAI(`Create 5-8 flashcards for the business concept "${topic}" from ${chapter}. Make them practical and test understanding.`, { schema: { properties: { flashcards: { type: "array", items: { type: "object", properties: { question: { type: "string" }, answer: { type: "string" }, difficulty: { type: "string" } } } } } } }) const flashcardData = JSON.parse(flashcardGenerator) // Save individual flashcards for (const card of flashcardData.flashcards) { await database.put({ _id: `flashcard-${Date.now()}-${Math.random()}`, type: 'flashcard', topic, chapter, userId: userProfile?._id, ...card, createdAt: new Date().toISOString() }) } } catch (error) { console.error('Error generating study material:', error) } finally { setIsGenerating(false) } } const playAudioExplanation = async (text) => { if (!text) return try { setAudioPlaying(true) if ('speechSynthesis' in window) { const utterance = new SpeechSynthesisUtterance(text) utterance.rate = 0.9 utterance.pitch = 1 utterance.volume = 0.8 utterance.onend = () => setAudioPlaying(false) utterance.onerror = () => setAudioPlaying(false) speechSynthesis.speak(utterance) } } catch (error) { console.error('Audio error:', error) setAudioPlaying(false) } } const stopAudio = () => { if ('speechSynthesis' in window) { speechSynthesis.cancel() } setAudioPlaying(false) } if (!isLoggedIn) { return { setUserProfile(profile) setIsLoggedIn(true) }} /> } return (

{/* Background Pattern */}

{/* Header with User Welcome */}

📚 Welcome back, {userProfile?.name}!

{userProfile?.year} • Business Study Hub

{userProfile?.locationFact && (

💡 {userProfile.locationFact}

)}

{/* Main Navigation */}

{['study', 'university-info'].map((section) => ( ))}

{currentSection === 'university-info' && ( )} {currentSection === 'study' && ( <> {/* Study Mode Navigation */}

{['explore', 'flashcards', 'quiz'].map((mode) => ( ))}

{/* Chapter Selection */}

📖 Select Chapter:

{/* Study Mode Content */} {studyMode === 'explore' && (

{/* Topic Input */}

🎯 Study New Topic

setCurrentTopic(e.target.value)} placeholder="Enter business concept to study..." className="flex-1 p-3 border-4 border-[#242424] text-[#242424] font-bold text-lg" disabled={isGenerating} />

{/* Recent Concepts */}

{concepts.slice(0, 4).map((concept) => (

{concept.topic}

{concept.chapter}

{audioPlaying && ( )}

{concept.definition}

{concept.keyPoints && (

Key Points:

• {point}

)} {concept.imagePrompt && (

)}

))}

)} {studyMode === 'flashcards' && (

🃏 Flashcard Practice

{flashcards.map((card) => ( ))}

)} {studyMode === 'quiz' && (

📝 Knowledge Quiz

Test your understanding with AI-generated questions

)} )}

) } // Login Page Component function LoginPage({ database, onLogin }) { const { useDocument } = useFireproof("lander-business-study") const { doc: profile, merge, save } = useDocument({ type: 'user-profile', name: '', year: '', location: '', locationFact: '', createdAt: new Date().toISOString() }) const [isGeneratingFact, setIsGeneratingFact] = useState(false) const years = ['Freshman', 'Sophomore', 'Junior', 'Senior', 'Graduate Student'] const generateLocationFact = async () => { if (!profile.location.trim()) return setIsGeneratingFact(true) try { const factResponse = await callAI(`Share one interesting, fun, or unique fact about ${profile.location}. Keep it brief and positive - something that would make someone proud of their hometown or area.`, { schema: { properties: { fact: { type: "string" } } } }) const factData = JSON.parse(factResponse) merge({ locationFact: factData.fact }) } catch (error) { console.error('Error generating location fact:', error) merge({ locationFact: `${profile.location} is a special place with its own unique character!` }) } finally { setIsGeneratingFact(false) } } const handleSubmit = async (e) => { e.preventDefault() if (!profile.name.trim() || !profile.year || !profile.location.trim()) return if (!profile.locationFact) { await generateLocationFact() } const savedProfile = await save() onLogin(savedProfile) } return (

{/* Background Pattern */}

🎓 Welcome to Lander Business Hub

Your personalized study companion for success!

👤 What's your name? merge({ name: e.target.value })} placeholder="Enter your full name" className="w-full p-4 border-4 border-[#242424] text-[#242424] font-bold text-lg" required />

🎯 What year are you?

🌍 Where are you from? merge({ location: e.target.value })} placeholder="City, State or Country" className="w-full p-4 border-4 border-[#242424] text-[#242424] font-bold text-lg" required /> {profile.location.trim() && !profile.locationFact && ( )}

{profile.locationFact && (

💡 Cool Fact:

{profile.locationFact}

)}

✨ Get ready for an amazing study experience with personalized content, interactive flashcards, and everything you need to succeed at Lander University!

) } // University Information Section Component function UniversityInfoSection({ landerInfo, universityQuery, setUniversityQuery, handleUniversityQuery, universityResponse, isGenerating }) { const [activeTab, setActiveTab] = useState('ask') return (

{/* Tab Navigation */}

{['ask', 'support', 'dining', 'faculty'].map((tab) => ( ))}

{activeTab === 'ask' && (

❓ Ask About Lander University

setUniversityQuery(e.target.value)} placeholder="Ask about office hours, contact info, campus services..." className="flex-1 p-3 border-4 border-[#242424] text-[#242424] font-bold text-lg" disabled={isGenerating} />

{universityResponse && (

Answer:

{universityResponse}

)}

)} {activeTab === 'support' && (

🏢 Support Office Locations & Hours

{Object.entries(landerInfo.supportOffices).map(([name, info]) => (

{name}

📍 {info.location}

🕒 {info.hours}

📞 {info.phone}

💼 {info.services}

))}

)} {activeTab === 'dining' && (

🍽️ Campus Dining Hours

{Object.entries(landerInfo.cafeteriaHours).map(([name, hours]) => (

{name}

{Object.entries(hours).map(([period, time]) => (

{period}: {time}

))}

)} {activeTab === 'faculty' && (

👩‍🏫 Business Faculty Contact Information

{Object.entries(landerInfo.businessProfessors).map(([name, info]) => (

{name}

{info.title}

📧 {info.email}

📍 {info.office}

📞 {info.phone}

🎯 {info.specialization}

))}

)}

) } // Flashcard Component function FlashCard({ card, onPlayAudio }) { const [flipped, setFlipped] = useState(false) const getDifficultyColor = (difficulty) => { switch(difficulty?.toLowerCase()) { case 'easy': return 'bg-[#e9ff70]' case 'medium': return 'bg-[#ffd670]' case 'hard': return 'bg-[#ff9770]' default: return 'bg-[#70d6ff]' } } return (

setFlipped(!flipped)} >

{card.difficulty || 'MEDIUM'}

{flipped ? card.answer : card.question}

{flipped ? 'ANSWER' : 'QUESTION'} • Click to flip

) } // Quiz Component function QuizComponent({ flashcards }) { const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [selectedAnswer, setSelectedAnswer] = useState('') const [showResult, setShowResult] = useState(false) const [score, setScore] = useState(0) const [quizStarted, setQuizStarted] = useState(false) const startQuiz = () => { setCurrentQuestionIndex(0) setScore(0) setQuizStarted(true) setShowResult(false) } const handleAnswer = () => { const currentCard = flashcards[currentQuestionIndex] const isCorrect = selectedAnswer.toLowerCase().includes(currentCard.answer.toLowerCase().substring(0, 10)) if (isCorrect) setScore(score + 1) setShowResult(true) setTimeout(() => { if (currentQuestionIndex < flashcards.length - 1) { setCurrentQuestionIndex(currentQuestionIndex + 1) setSelectedAnswer('') setShowResult(false) } else { setQuizStarted(false) } }, 2000) } if (!quizStarted) { return (

Ready to test your knowledge?

You have {flashcards.length} questions available

) } const currentCard = flashcards[currentQuestionIndex] if (!currentCard) return null return (

Question {currentQuestionIndex + 1} of {flashcards.length} Score: {score}/{currentQuestionIndex + (showResult ? 1 : 0)}

{currentCard.question}

{!showResult ? (

setSelectedAnswer(e.target.value)}
              placeholder="Type your answer here..."
              className="w-full p-4 border-4 border-[#242424] text-[#242424] font-bold resize-none"
              rows={3}
            />
            <button
              onClick={handleAnswer}
              disabled={!selectedAnswer.trim()}
              className="w-full py-3 bg-[#ff70a6] border-4 border-[#242424] text-[#242424] font-black text-lg hover:bg-[#ffd670] disabled:opacity-50"
            >
              Submit Answer
            </button>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="p-4 bg-[#e9ff70] border-4 border-[#242424]">
              <h4 className="font-black text-[#242424] mb-2">Correct Answer:</h4>
              <p className="text-[#242424] font-bold">{currentCard.answer}</p>
            </div>
            <div className="p-4 bg-[#70d6ff] border-4 border-[#242424]">
              <h4 className="font-black text-[#242424] mb-2">Your Answer:</h4>
              <p className="text-[#242424] font-bold">{selectedAnswer}</p>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}</article></body></html>