@hydralms/components 0.1.2 → 0.2.0

package/src/sections/ProgressDashboard/ProgressDashboard.tsx

@@ -1,26 +1,19 @@
+import { BookOpen, Clock } from "lucide-react";
 import {
-  Award,
-  BookOpen,
-  CheckCircle,
-  Clock,
-  Flame,
-  Send,
-  Trophy,
-} from "lucide-react";
-import { ProgressRing, StatCard } from "../../progress";
+  ProgressRing,
+  StatCard,
+  AchievementBadge,
+  StreakBadge,
+  ActivityTimeline,
+} from "../../progress";
+import type { TimelineEvent } from "../../progress";
 import { Progress } from "../../ui/progress";
-import { Card } from "../../ui/card";
+import { Card, CardContent } from "../../ui/card";
+import { Separator } from "../../ui/separator";
 import { formatDuration } from "../../utils/format-duration";
 import type { ProgressDashboardProps } from "./types";
 import { cn } from "../../lib/utils";
 
-const ACTIVITY_ICONS = {
-  lesson_completed: BookOpen,
-  quiz_passed: CheckCircle,
-  assignment_submitted: Send,
-  badge_earned: Award,
-};
-
 export function ProgressDashboard({
   overallProgress,
   totalTimeSpent,
@@ -36,52 +29,62 @@ export function ProgressDashboard({
   return (
     <div className={className} style={style}>
       {/* Stats row */}
-      <div className="grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-2 mb-3">
-        <Card className="p-2 flex justify-center">
-          <ProgressRing value={overallProgress} size={100} />
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-3 mb-4">
+        <Card>
+          <CardContent className="p-3 flex justify-center">
+            <ProgressRing value={overallProgress} size={100} />
+          </CardContent>
         </Card>
         <StatCard
           icon={<Clock size={24} />}
           label="Time Spent"
+          description="Total learning time"
           value={formatDuration(totalTimeSpent)}
         />
         {streak && (
-          <StatCard
-            icon={<Flame size={24} />}
-            label="Current Streak"
-            value={`${streak.currentDays} days`}
-            subtitle={`Longest: ${streak.longestDays} days`}
-          />
+          <Card>
+            <CardContent className="p-4 flex items-center">
+              <StreakBadge
+                currentStreak={streak.currentDays}
+                longestStreak={streak.longestDays}
+                showLongest
+              />
+            </CardContent>
+          </Card>
         )}
         <StatCard
           icon={<BookOpen size={24} />}
           label="Modules"
+          description="Course progress"
           value={`${modules.filter((m) => m.completedItems === m.totalItems).length} / ${modules.length}`}
           subtitle="completed"
         />
       </div>
 
       {/* Module progress */}
+      <Separator className="mb-3" />
       <p className="text-lg font-semibold mb-2 text-foreground">Module Progress</p>
-      <div className="flex flex-col gap-2 mb-3">
+      <div className="flex flex-col gap-2 mb-4">
         {modules.map((mod) => {
           const pct = mod.totalItems > 0 ? (mod.completedItems / mod.totalItems) * 100 : 0;
           return (
             <Card
               key={mod.uid}
               className={cn(
-                "p-2 transition-colors",
+                "transition-colors",
                 onModuleClick && "cursor-pointer hover:border-primary",
               )}
               onClick={() => onModuleClick?.(mod.uid)}
             >
-              <div className="flex justify-between items-center mb-0.5">
-                <span className="font-semibold text-sm text-foreground">{mod.name}</span>
-                <span className="text-xs text-muted-foreground">
-                  {mod.completedItems} / {mod.totalItems}
-                </span>
-              </div>
-              <Progress value={pct} size="sm" />
+              <CardContent className="p-3">
+                <div className="flex justify-between items-center mb-0.5">
+                  <span className="font-semibold text-sm text-foreground">{mod.name}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {mod.completedItems} / {mod.totalItems}
+                  </span>
+                </div>
+                <Progress value={pct} size="sm" />
+              </CardContent>
             </Card>
           );
         })}
@@ -90,22 +93,18 @@ export function ProgressDashboard({
       {/* Recent activity */}
       {recentActivity && recentActivity.length > 0 && (
         <>
+          <Separator className="mb-3" />
           <p className="text-lg font-semibold mb-2 text-foreground">Recent Activity</p>
-          <div className="flex flex-col gap-1.5 mb-3">
-            {recentActivity.slice(0, recentActivityLimit).map((activity) => {
-              const Icon = ACTIVITY_ICONS[activity.type] ?? CheckCircle;
-              return (
-                <div key={activity.uid} className="flex gap-1.5 items-center">
-                  <Icon size={16} />
-                  <span className="flex-1 text-sm text-foreground">
-                    {activity.description}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {new Date(activity.timestamp).toLocaleDateString()}
-                  </span>
-                </div>
-              );
-            })}
+          <div className="mb-4">
+            <ActivityTimeline
+              events={recentActivity.map<TimelineEvent>((activity) => ({
+                uid: activity.uid,
+                type: activity.type,
+                title: activity.description,
+                timestamp: activity.timestamp,
+              }))}
+              limit={recentActivityLimit}
+            />
           </div>
         </>
       )}
@@ -113,24 +112,25 @@ export function ProgressDashboard({
       {/* Achievements */}
       {achievements && achievements.length > 0 && (
         <>
+          <Separator className="mb-3" />
           <p className="text-lg font-semibold mb-2 text-foreground">Achievements</p>
           <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2">
             {achievements.map((badge) => (
-              <Card key={badge.uid} className="p-2 text-center">
-                {badge.iconUrl ? (
-                  <img
-                    src={badge.iconUrl}
-                    alt={badge.name}
-                    className="w-12 h-12 mb-1 mx-auto"
-                  />
-                ) : (
-                  <Trophy size={32} className="mx-auto mb-2 text-warning" />
-                )}
-                <p className="font-semibold text-sm text-foreground">{badge.name}</p>
-                <p className="text-xs text-muted-foreground">
-                  {badge.description}
-                </p>
-              </Card>
+              <AchievementBadge
+                key={badge.uid}
+                title={badge.name}
+                description={badge.description}
+                icon={
+                  badge.iconUrl ? (
+                    <img
+                      src={badge.iconUrl}
+                      alt={badge.name}
+                      className="w-12 h-12"
+                    />
+                  ) : undefined
+                }
+                earnedDate={badge.earnedAt}
+              />
             ))}
           </div>
         </>

package/src/sections/QuizSession/QuizSession.tsx

@@ -1,9 +1,11 @@
 import { useMemo, useState } from "react";
-import { AssessmentToolbar } from "../../assessment-toolbar";
+import { ChevronLeft, ChevronRight, Send } from "lucide-react";
+import { AssessmentToolbar, QuestionHeaderBar, QuestionMaterialsDrawer } from "../../assessment-toolbar";
 import type { QuestionNavigatorItem } from "../../assessment-toolbar/types";
 import { QuestionRenderer } from "../../questions";
 import type { SessionAnswer } from "../../questions/types";
-import { Card, CardContent } from "../../ui/card";
+import { Button } from "../../ui/button";
+import { Card, CardHeader, CardContent } from "../../ui/card";
 import type { QuizSessionProps } from "./types";
 import { cn } from "../../lib/utils";
 
@@ -14,6 +16,7 @@ export function QuizSession({
   onAnswerChange,
   timeElapsedSeconds,
   timeLimitSeconds,
+  questionMaterials,
   isSubmitting = false,
   readOnly = false,
   className,
@@ -23,14 +26,28 @@ export function QuizSession({
   const [sessionAnswers, setSessionAnswers] =
     useState<SessionAnswer[]>(initialAnswers);
   const [flaggedUids, setFlaggedUids] = useState<Set<string>>(new Set());
+  const [materialsOpen, setMaterialsOpen] = useState(false);
 
   const currentQuestion = questions[currentIndex];
 
+  const currentQuestionAnswers = useMemo(
+    () =>
+      currentQuestion
+        ? sessionAnswers.filter((a) => a.uid === currentQuestion.uid)
+        : [],
+    [sessionAnswers, currentQuestion],
+  );
+
+  const currentMaterials = useMemo(
+    () => questionMaterials?.filter((m) => m.questionUid === currentQuestion?.uid) ?? [],
+    [questionMaterials, currentQuestion],
+  );
+
   const navigatorItems = useMemo<QuestionNavigatorItem[]>(
     () =>
       questions.map((q, idx) => ({
         uid: q.uid,
-        sequence: idx + 1,
+        sequence: idx,
         isFlagged: flaggedUids.has(q.uid),
         isAnswered: sessionAnswers.some((a) => a.uid === q.uid),
         isSkipped: false,
@@ -89,25 +106,67 @@ export function QuizSession({
         timeLimitSeconds={timeLimitSeconds}
         questions={navigatorItems}
         onNavigateToQuestion={handleNavigate}
-        onToggleFlag={handleToggleFlag}
         currentQuestionUid={currentQuestion?.uid}
         isSubmitting={isSubmitting}
         readOnly={readOnly}
       />
       {currentQuestion && (
         <Card className="mt-3">
-          <CardContent className="pt-6">
+          <CardHeader className="pb-0">
+            <QuestionHeaderBar
+              questionNumber={currentIndex + 1}
+              totalQuestions={questions.length}
+              isFlagged={flaggedUids.has(currentQuestion.uid)}
+              onToggleFlag={() => handleToggleFlag(currentQuestion.uid)}
+              hasMaterials={currentMaterials.length > 0}
+              onOpenMaterials={() => setMaterialsOpen(true)}
+              readOnly={readOnly}
+            />
+          </CardHeader>
+          <CardContent>
             <QuestionRenderer
               question={currentQuestion}
-              sessionAnswers={sessionAnswers.filter(
-                (a) => a.uid === currentQuestion.uid,
-              )}
+              sessionAnswers={currentQuestionAnswers}
               onAnswer={handleAnswer}
               readOnly={readOnly}
             />
           </CardContent>
         </Card>
       )}
+
+      {/* Bottom navigation */}
+      {!readOnly && (
+        <div className="flex items-center justify-between gap-3 mt-3">
+          <Button
+            variant="outline"
+            disabled={currentIndex <= 0}
+            onClick={() => setCurrentIndex((i) => Math.max(i - 1, 0))}
+          >
+            <ChevronLeft className="size-4 mr-1" />
+            Previous
+          </Button>
+          {currentIndex < questions.length - 1 ? (
+            <Button
+              onClick={() => setCurrentIndex((i) => Math.min(i + 1, questions.length - 1))}
+            >
+              Next
+              <ChevronRight className="size-4 ml-1" />
+            </Button>
+          ) : (
+            <Button onClick={handleSubmit} disabled={isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Submit Quiz"}
+              {!isSubmitting && <Send className="size-4 ml-1" />}
+            </Button>
+          )}
+        </div>
+      )}
+
+      <QuestionMaterialsDrawer
+        open={materialsOpen}
+        onOpenChange={setMaterialsOpen}
+        materials={currentMaterials}
+        questionNumber={currentIndex + 1}
+      />
     </div>
   );
 }

package/src/sections/QuizSession/types.ts

@@ -1,4 +1,4 @@
-import type { QuestionData, SessionAnswer } from "../../questions/types";
+import type { QuestionData, QuestionMaterial, SessionAnswer } from "../../questions/types";
 
 /**
  * QuizSession section — a complete assessment session experience.
@@ -38,6 +38,11 @@ export interface QuizSessionProps {
   timeLimitSeconds?: number;
   /** Whether the submit action is currently in flight */
   isSubmitting?: boolean;
+  /**
+   * Related materials keyed by question UID. When provided, a "Materials"
+   * button appears in the question header, opening a drawer with content blocks.
+   */
+  questionMaterials?: QuestionMaterial[];
   /** When true, all inputs are disabled (e.g. after submission) */
   readOnly?: boolean;
   /** CSS class name for the root element */

package/src/sections/RequirementsChecklist/RequirementsChecklist.tsx

@@ -0,0 +1,107 @@
+import { useMemo } from "react";
+import { CheckCircle2, Circle, ChevronRight } from "lucide-react";
+import { Progress } from "../../ui/progress";
+import { cn } from "../../lib/utils";
+import type { RequirementsChecklistProps } from "./types";
+
+/**
+ * RequirementsChecklist — shows completion requirements with checked/unchecked status.
+ *
+ * Displays a vertical list of requirements with an overall progress bar.
+ * Incomplete items can be clicked to navigate to the relevant content.
+ */
+export function RequirementsChecklist({
+  title,
+  requirements,
+  onRequirementClick,
+  className,
+  style,
+}: RequirementsChecklistProps) {
+  const completedCount = useMemo(
+    () => requirements.filter((r) => r.completed).length,
+    [requirements]
+  );
+  const progressPercent =
+    requirements.length > 0
+      ? Math.round((completedCount / requirements.length) * 100)
+      : 0;
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)} style={style}>
+      {/* Header */}
+      {title && (
+        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+      )}
+
+      {/* Progress bar */}
+      <div className="flex flex-col gap-1.5">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-muted-foreground">
+            {completedCount} of {requirements.length} complete
+          </span>
+          <span className="font-medium text-foreground">{progressPercent}%</span>
+        </div>
+        <Progress value={progressPercent} />
+      </div>
+
+      {/* Requirement list */}
+      <ul className="flex flex-col gap-1">
+        {requirements.map((req) => (
+          <li key={req.uid}>
+            <button
+              type="button"
+              className={cn(
+                "w-full flex items-start gap-3 p-3 rounded-lg text-left transition-colors",
+                req.completed
+                  ? "bg-success/5"
+                  : onRequirementClick
+                    ? "hover:bg-muted/50 cursor-pointer"
+                    : "cursor-default"
+              )}
+              onClick={() => {
+                if (!req.completed && onRequirementClick) {
+                  onRequirementClick(req.uid);
+                }
+              }}
+              disabled={req.completed}
+            >
+              {/* Icon */}
+              {req.completed ? (
+                <CheckCircle2 className="size-5 text-success shrink-0 mt-0.5" />
+              ) : (
+                <Circle className="size-5 text-muted-foreground shrink-0 mt-0.5" />
+              )}
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <div
+                  className={cn(
+                    "text-sm font-medium",
+                    req.completed
+                      ? "text-muted-foreground line-through"
+                      : "text-foreground"
+                  )}
+                >
+                  {req.label}
+                </div>
+                {req.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5">
+                    {req.description}
+                  </div>
+                )}
+              </div>
+
+              {/* Action indicator */}
+              {!req.completed && onRequirementClick && (
+                <div className="shrink-0 flex items-center gap-1 text-xs text-primary mt-0.5">
+                  {req.actionLabel && <span>{req.actionLabel}</span>}
+                  <ChevronRight className="size-4" />
+                </div>
+              )}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/sections/RequirementsChecklist/types.ts

@@ -0,0 +1,38 @@
+/**
+ * RequirementsChecklist section — shows completion requirements with progress tracking.
+ *
+ * Displays a list of requirements with checked/unchecked status and an overall
+ * progress bar. Incomplete items can be clicked to navigate to the relevant content.
+ *
+ * @example
+ * <RequirementsChecklist
+ *   title="Certificate Requirements"
+ *   requirements={requirements}
+ *   onRequirementClick={(uid) => navigateTo(uid)}
+ * />
+ */
+export interface RequirementsChecklistProps {
+  /** Section title */
+  title?: string;
+  /** List of requirements to display */
+  requirements: Requirement[];
+  /** Called when the user clicks an incomplete requirement */
+  onRequirementClick?: (uid: string) => void;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}
+
+export interface Requirement {
+  /** Unique identifier */
+  uid: string;
+  /** Requirement label */
+  label: string;
+  /** Optional description */
+  description?: string;
+  /** Whether this requirement has been completed */
+  completed: boolean;
+  /** Optional action label for clickable items */
+  actionLabel?: string;
+}

package/src/sections/ResourceLibrary/ResourceLibrary.tsx

@@ -8,12 +8,7 @@ import { Tabs, TabsList, TabsTrigger } from "../../ui/tabs";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../../ui/tooltip";
 import type { ResourceLibraryProps, Resource } from "./types";
 import { cn } from "../../lib/utils";
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
+import { formatFileSize } from "../../utils/format-file-size";
 
 const TYPE_TO_ICON: Record<string, string> = {
   pdf: "document",
@@ -77,10 +72,10 @@ export function ResourceLibrary({
         <div className="flex-1 min-w-0">
           <span className="text-sm text-foreground">{resource.name}</span>
           {(resource.description || resource.fileSize != null) && (
-            <span className="text-sm text-muted-foreground">
+            <span className="block text-xs text-muted-foreground">
               {[
                 resource.description,
-                resource.fileSize != null && formatBytes(resource.fileSize),
+                resource.fileSize != null && formatFileSize(resource.fileSize),
               ]
                 .filter(Boolean)
                 .join(" \u00b7 ")}
@@ -205,7 +200,7 @@ export function ResourceLibrary({
                 )}
                 {resource.fileSize != null && (
                   <span className="text-xs text-muted-foreground">
-                    {formatBytes(resource.fileSize)}
+                    {formatFileSize(resource.fileSize)}
                   </span>
                 )}
               </CardContent>

package/src/sections/RubricView/RubricView.tsx

@@ -0,0 +1,138 @@
+import { CheckCircle2 } from "lucide-react";
+import { Card, CardContent } from "../../ui/card";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "../../ui/table";
+import { Badge } from "../../ui/badge";
+import { Separator } from "../../ui/separator";
+import { cn } from "../../lib/utils";
+import type { RubricViewProps } from "./types";
+
+/**
+ * RubricView — displays a grading rubric with criteria rows and proficiency level columns.
+ *
+ * When `selectedLevels` is provided, highlights the scored level per criterion and
+ * shows an overall score. Useful inside AssignmentModule for showing grading criteria
+ * and results.
+ */
+export function RubricView({
+  criteria,
+  selectedLevels,
+  totalScore,
+  maxScore,
+  feedback,
+  className,
+  style,
+}: RubricViewProps) {
+  const isScored = selectedLevels && Object.keys(selectedLevels).length > 0;
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)} style={style}>
+      {/* Score header */}
+      {isScored && totalScore !== undefined && maxScore !== undefined && (
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-foreground">Rubric</h3>
+          <Badge variant={totalScore >= maxScore * 0.7 ? "success" : "destructive"}>
+            {totalScore} / {maxScore} pts
+          </Badge>
+        </div>
+      )}
+
+      {!isScored && (
+        <h3 className="text-lg font-semibold text-foreground">Grading Rubric</h3>
+      )}
+
+      {/* Criteria table */}
+      <Card>
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <Table className="text-sm">
+              <TableHeader>
+                <TableRow className="bg-muted/50">
+                  <TableHead className="text-left font-medium text-muted-foreground w-1/5">
+                    Criterion
+                  </TableHead>
+                  {criteria[0]?.levels.map((level) => (
+                    <TableHead
+                      key={level.uid}
+                      className="text-center font-medium text-muted-foreground"
+                    >
+                      <div>{level.label}</div>
+                      <div className="text-xs font-normal mt-0.5">
+                        {level.points} pts
+                      </div>
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {criteria.map((criterion, i) => {
+                  const selectedLevelUid = selectedLevels?.[criterion.uid];
+                  return (
+                    <TableRow
+                      key={criterion.uid}
+                      className={cn(i % 2 === 1 && "bg-muted/20")}
+                    >
+                      <TableCell className="align-top">
+                        <div className="font-medium text-foreground">
+                          {criterion.name}
+                        </div>
+                        {criterion.description && (
+                          <div className="text-xs text-muted-foreground mt-0.5">
+                            {criterion.description}
+                          </div>
+                        )}
+                      </TableCell>
+                      {criterion.levels.map((level) => {
+                        const isSelected = selectedLevelUid === level.uid;
+                        return (
+                          <TableCell
+                            key={level.uid}
+                            className={cn(
+                              "align-top text-center",
+                              isSelected &&
+                                "bg-primary/10 ring-2 ring-primary/30 ring-inset rounded-sm"
+                            )}
+                          >
+                            <div className="text-xs text-muted-foreground">
+                              {level.description}
+                            </div>
+                            {isSelected && (
+                              <div className="mt-1.5 flex justify-center">
+                                <CheckCircle2 className="size-4 text-primary" />
+                              </div>
+                            )}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Feedback */}
+      {feedback && (
+        <>
+          <Separator />
+          <div>
+            <h4 className="text-sm font-medium text-foreground mb-1">
+              Instructor Feedback
+            </h4>
+            <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+              {feedback}
+            </p>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}