feat: implement micro-learning system with content delivery components, completion tracking hooks, and database schema migrations

src/components/micro_learning/ConceptExplainer.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useRef } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'; // assuming some UI library, otherwise use standard divs
+
+export default function ConceptExplainer({ content, onComplete }) {
+  const containerRef = useRef(null);
+
+  // Trigger completion when scrolled to the end
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!containerRef.current) return;
+      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+      if (scrollTop + clientHeight >= scrollHeight - 50) {
+        onComplete();
+      }
+    };
+    
+    // Check initially in case content is short and doesn't need scrolling
+    if (containerRef.current && containerRef.current.scrollHeight <= containerRef.current.clientHeight) {
+      onComplete();
+    }
+
+    const currentRef = containerRef.current;
+    currentRef?.addEventListener('scroll', handleScroll);
+    return () => currentRef?.removeEventListener('scroll', handleScroll);
+  }, [onComplete]);
+
+  return (
+    <Card className="w-full h-[60vh] flex flex-col">
+      <CardHeader>
+        <CardTitle>Concept Explainer</CardTitle>
+      </CardHeader>
+      <CardContent 
+        className="flex-1 overflow-y-auto prose dark:prose-invert"
+        ref={containerRef}
+      >
+        {content?.sections?.map((section, i) => (
+          <div key={i} className="mb-6">
+            <h3>{section.title}</h3>
+            <div dangerouslySetInnerHTML={{ __html: section.content }} />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

src/components/micro_learning/FlashcardSet.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Card, CardContent } from '../ui/card';
+import { Button } from '../ui/button';
+
+export default function FlashcardSet({ content, onComplete }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [viewedCards, setViewedCards] = useState(new Set());
+
+  const cards = content?.cards || [];
+
+  const handleFlip = () => {
+    setIsFlipped(!isFlipped);
+    
+    // Once flipped, mark this card as viewed
+    const newViewed = new Set(viewedCards);
+    newViewed.add(currentIndex);
+    setViewedCards(newViewed);
+
+    // If all cards are viewed, trigger completion
+    if (newViewed.size === cards.length && cards.length > 0) {
+      onComplete();
+    }
+  };
+
+  const handleNext = () => {
+    setIsFlipped(false);
+    setCurrentIndex((prev) => (prev + 1) % cards.length);
+  };
+
+  const handlePrev = () => {
+    setIsFlipped(false);
+    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length);
+  };
+
+  if (cards.length === 0) {
+    return <div className="text-center p-4">No flashcards available.</div>;
+  }
+
+  const currentCard = cards[currentIndex];
+
+  return (
+    <div className="w-full flex flex-col items-center space-y-6">
+      <div className="text-sm text-slate-500">
+        Card {currentIndex + 1} of {cards.length}
+      </div>
+
+      <Card 
+        className="w-full max-w-lg min-h-[300px] cursor-pointer perspective-1000 relative"
+        onClick={handleFlip}
+      >
+        <CardContent className="absolute inset-0 flex items-center justify-center p-8 text-center text-xl">
+          {isFlipped ? (
+            <div className="prose dark:prose-invert">
+              <p>{currentCard.back}</p>
+            </div>
+          ) : (
+            <div className="prose dark:prose-invert font-medium">
+              <p>{currentCard.front}</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="text-sm text-slate-400 mt-2">
+        Click the card to flip
+      </div>
+
+      <div className="flex space-x-4">
+        <Button variant="outline" onClick={handlePrev}>Previous</Button>
+        <Button variant="outline" onClick={handleNext}>Next</Button>
+      </div>
+    </div>
+  );
+}

src/components/micro_learning/MicroLearningContainer.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import ConceptExplainer from './ConceptExplainer';
+import ScenarioQuiz from './ScenarioQuiz';
+import FlashcardSet from './FlashcardSet';
+import ReflectionPrompt from './ReflectionPrompt';
+import { useMicroLearningCompletions } from '../../hooks/useMicroLearningCompletions';
+
+export default function MicroLearningContainer({ microLearning, sessionWeek, onCompletedSuccessfully }) {
+  const { recordCompletion } = useMicroLearningCompletions();
+  const [completed, setCompleted] = useState(false);
+
+  const handleComplete = async () => {
+    if (completed) return; // Prevent double recording
+    
+    const record = await recordCompletion({
+      microLearningId: microLearning.id,
+      topicId: microLearning.topic_id,
+      type: microLearning.type,
+      sessionWeek: sessionWeek
+    });
+
+    if (record) {
+      setCompleted(true);
+      if (onCompletedSuccessfully) {
+        onCompletedSuccessfully(record);
+      }
+    }
+  };
+
+  const renderComponent = () => {
+    const props = {
+      content: microLearning.content,
+      onComplete: handleComplete
+    };
+
+    switch (microLearning.type) {
+      case 'concept_explainer':
+        return <ConceptExplainer {...props} />;
+      case 'scenario_quiz':
+        return <ScenarioQuiz {...props} />;
+      case 'flashcard_set':
+        return <FlashcardSet {...props} />;
+      case 'reflection_prompt':
+        return <ReflectionPrompt {...props} />;
+      default:
+        return <div>Unknown micro learning type.</div>;
+    }
+  };
+
+  return (
+    <div className="w-full max-w-3xl mx-auto">
+      {renderComponent()}
+      
+      {completed && (
+        <div className="mt-4 p-4 bg-green-50 text-green-800 border border-green-200 rounded-md text-center">
+          <p className="font-semibold">Micro Learning Completed!</p>
+          <p className="text-sm mt-1">Your progress has been recorded.</p>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/micro_learning/MicroLearningSelector.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { useMicroLearnings } from '../../hooks/useMicroLearnings';
+import MicroLearningContainer from './MicroLearningContainer';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+
+const TYPE_LABELS = {
+  'concept_explainer': 'Concept Explainer',
+  'scenario_quiz': 'Scenario Quiz',
+  'flashcard_set': 'Flashcard Set',
+  'reflection_prompt': 'Reflection Prompt'
+};
+
+const TYPE_DESCRIPTIONS = {
+  'concept_explainer': 'Read a structured explanation to understand the concept.',
+  'scenario_quiz': 'Apply your knowledge in a realistic workplace scenario.',
+  'flashcard_set': 'Test your recall with a set of quick flashcards.',
+  'reflection_prompt': 'Connect the topic to your own professional experience.'
+};
+
+export default function MicroLearningSelector({ topicId, sessionWeek, onTopicCompleted }) {
+  const { getMicroLearningsByTopic } = useMicroLearnings();
+  const [availableMLs, setAvailableMLs] = useState([]);
+  const [selectedML, setSelectedML] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchMLs = async () => {
+      setLoading(true);
+      const data = await getMicroLearningsByTopic(topicId);
+      setAvailableMLs(data);
+      setLoading(false);
+    };
+    if (topicId) {
+      fetchMLs();
+    }
+  }, [topicId]);
+
+  const handleSelection = (ml) => {
+    setSelectedML(ml);
+  };
+
+  if (loading) return <div className="text-slate-500">Loading learning formats...</div>;
+
+  if (availableMLs.length === 0) {
+    return <div className="text-slate-500">No micro learnings available for this topic yet.</div>;
+  }
+
+  // If one is selected, render it
+  if (selectedML) {
+    return (
+      <div className="space-y-4">
+        <Button variant="ghost" onClick={() => setSelectedML(null)} className="mb-4">
+          ← Back to selection
+        </Button>
+        <MicroLearningContainer 
+          microLearning={selectedML} 
+          sessionWeek={sessionWeek} 
+          onCompletedSuccessfully={onTopicCompleted} 
+        />
+      </div>
+    );
+  }
+
+  // Otherwise, show the selection menu
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Choose a Learning Format</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {availableMLs.map((ml) => (
+            <Card 
+              key={ml.id} 
+              className="cursor-pointer hover:border-blue-500 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors"
+              onClick={() => handleSelection(ml)}
+            >
+              <CardContent className="p-6">
+                <h3 className="font-bold text-lg mb-2">{TYPE_LABELS[ml.type] || ml.type}</h3>
+                <p className="text-sm text-slate-500">{TYPE_DESCRIPTIONS[ml.type]}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/micro_learning/ReflectionPrompt.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import { Button } from '../ui/button';
+
+export default function ReflectionPrompt({ content, onComplete }) {
+  const [response, setResponse] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!response.trim() || submitted) return;
+    
+    setSubmitted(true);
+    onComplete(); // Trigger completion when a response is submitted
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Reflection Prompt</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="prose dark:prose-invert">
+          <p className="text-lg font-medium">{content?.prompt}</p>
+        </div>
+
+        {!submitted ? (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <textarea
+              className="w-full min-h-[150px] p-4 border rounded-md resize-y focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-slate-800 dark:border-slate-700"
+              placeholder="Write your reflection here..."
+              value={response}
+              onChange={(e) => setResponse(e.target.value)}
+            />
+            <Button type="submit" disabled={!response.trim()}>Submit Reflection</Button>
+          </form>
+        ) : (
+          <div className="space-y-6">
+            <div className="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-md">
+              <h4 className="text-sm font-semibold text-slate-500 uppercase tracking-wider mb-2">Your Reflection</h4>
+              <p className="whitespace-pre-wrap">{response}</p>
+            </div>
+            
+            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-md">
+              <h4 className="text-sm font-semibold text-blue-800 dark:text-blue-300 uppercase tracking-wider mb-2">Model Answer</h4>
+              <div className="prose prose-blue dark:prose-invert">
+                <p>{content?.model_answer}</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/components/micro_learning/ScenarioQuiz.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '../ui/card';
+import { Button } from '../ui/button';
+
+export default function ScenarioQuiz({ content, onComplete }) {
+  const [selectedOptionId, setSelectedOptionId] = useState(null);
+  const [showExplanations, setShowExplanations] = useState(false);
+
+  const handleSelect = (idx) => {
+    if (showExplanations) return; // Prevent changing after selection
+    setSelectedOptionId(idx);
+    setShowExplanations(true);
+    onComplete(); // Trigger completion immediately after an option is selected
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Scenario Quiz</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="prose dark:prose-invert">
+          <p className="text-lg font-medium">{content?.scenario}</p>
+        </div>
+        
+        <div className="space-y-4">
+          {content?.options?.map((option, idx) => {
+            const isSelected = selectedOptionId === idx;
+            
+            // Basic styling for the option buttons
+            let buttonStyle = "w-full justify-start text-left h-auto p-4 ";
+            if (showExplanations) {
+              if (option.isCorrect) buttonStyle += "bg-green-100 dark:bg-green-900 border-green-500 ";
+              else if (isSelected && !option.isCorrect) buttonStyle += "bg-red-100 dark:bg-red-900 border-red-500 ";
+              else buttonStyle += "opacity-70 ";
+            }
+
+            return (
+              <div key={idx} className="space-y-2">
+                <Button 
+                  variant={isSelected ? "default" : "outline"}
+                  className={buttonStyle}
+                  onClick={() => handleSelect(idx)}
+                  disabled={showExplanations}
+                >
+                  <span className="flex-1 whitespace-normal">{option.text}</span>
+                </Button>
+                
+                {showExplanations && (
+                  <div className={`p-3 rounded-md text-sm ${option.isCorrect ? 'bg-green-50 dark:bg-green-950 text-green-800 dark:text-green-200' : 'bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-300'}`}>
+                    <span className="font-semibold">{option.isCorrect ? '✓ ' : '✗ '}</span>
+                    {option.explanation}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}