@academy-sdk/sdk 0.1.0 → 0.2.0

package/src/components/pages/LearnerSettingsPage.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Mail } from 'lucide-react';
+import type { LearnerSettingsPageProps } from '../../contracts/pages.contract';
+
+export function LearnerSettingsPage(props: Partial<LearnerSettingsPageProps>) {
+  const [marketingEmails, setMarketingEmails] = useState(true);
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-theme-text-primary">Settings</h1>
+        <p className="mt-2 text-lg text-theme-text-secondary">Manage your account settings and preferences</p>
+      </div>
+
+      {/* Email Preferences Section */}
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-2xl font-bold text-theme-text-primary">Email Preferences</h2>
+          <p className="mt-1 text-theme-text-secondary">Control what emails you receive from us</p>
+        </div>
+
+        {/* Marketing Email Settings Card */}
+        <div className="p-6 w-full max-w-2xl rounded-lg border border-theme-border-primary bg-theme-bg-secondary">
+          <div className="flex items-start justify-between">
+            <div className="flex items-start gap-4">
+              <div className="rounded-lg bg-theme-bg-tertiary p-3">
+                <Mail className="h-5 w-5 text-theme-accent-primary" />
+              </div>
+              <div>
+                <h3 className="text-base font-semibold text-theme-text-primary">Marketing Emails</h3>
+                <p className="mt-1 text-sm text-theme-text-secondary">
+                  Receive promotional updates, new courses, and special offers about our academy
+                </p>
+              </div>
+            </div>
+
+            {/* Toggle Switch */}
+            <button
+              onClick={() => setMarketingEmails(!marketingEmails)}
+              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                marketingEmails ? 'bg-theme-accent-primary' : 'bg-gray-200'
+              }`}
+              role="switch"
+              aria-checked={marketingEmails}
+            >
+              <span
+                className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 ${
+                  marketingEmails ? 'translate-x-5' : 'translate-x-0'
+                }`}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/pages/ManualReviewDetailPage.tsx

@@ -0,0 +1,254 @@
+import { ArrowLeft, Calendar, BookOpen, Award, AlertCircle, CheckCircle, Clock, FileText } from 'lucide-react';
+import type { ManualReviewDetailPageProps } from '../../contracts/pages.contract';
+import { Button } from '../atoms/Button';
+import { Badge } from '../atoms/Badge';
+import { Card, CardContent, CardHeader, CardTitle } from '../atoms/Card';
+import { LoadingSpinner } from '../molecules/LoadingSpinner';
+import { EmptyState } from '../molecules/EmptyState';
+
+function formatDate(dateString: string) {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function formatQuestionType(type: string) {
+  switch (type) {
+    case 'TRUE_FALSE': return 'True/False';
+    case 'SINGLE_CHOICE': return 'Single Choice';
+    case 'MULTIPLE_SELECT': return 'Multiple Select';
+    case 'TEXT': return 'Short Answer';
+    case 'ESSAY': return 'Essay';
+    default: return type;
+  }
+}
+
+function getStatusBadge(status: string) {
+  switch (status) {
+    case 'IN_REVIEW':
+      return (
+        <Badge variant="warning" className="flex items-center gap-1">
+          <Clock className="h-3 w-3" />
+          Pending Review
+        </Badge>
+      );
+    case 'REQUEST_CHANGE':
+      return (
+        <Badge variant="destructive" className="flex items-center gap-1">
+          <AlertCircle className="h-3 w-3" />
+          Changes Requested
+        </Badge>
+      );
+    case 'GRADED':
+      return (
+        <Badge variant="success" className="flex items-center gap-1">
+          <CheckCircle className="h-3 w-3" />
+          Approved
+        </Badge>
+      );
+    default:
+      return <Badge variant="secondary">{status}</Badge>;
+  }
+}
+
+export function ManualReviewDetailPage(props: Partial<ManualReviewDetailPageProps>) {
+  const noop = (..._args: any[]) => {};
+  const { submission, isLoading = false, notFound = false, onBack = noop } = props;
+
+  if (isLoading) return <LoadingSpinner className="py-20" text="Loading submission..." />;
+
+  if (notFound || !submission) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="text-center py-12">
+          <AlertCircle className="h-12 w-12 text-theme-text-tertiary mx-auto mb-4" />
+          <h2 className="text-xl font-semibold text-theme-text-primary mb-2">Submission Not Found</h2>
+          <p className="text-theme-text-secondary mb-4">
+            The submission you're looking for doesn't exist or has been removed.
+          </p>
+          <Button onClick={onBack}>Back to Manual Review</Button>
+        </div>
+      </div>
+    );
+  }
+
+  const detail = submission as any;
+  const status = detail.context?.status || detail.status || 'IN_REVIEW';
+  const assignmentTitle = detail.context?.assignment?.title || detail.lessonTitle || 'Submission Detail';
+  const courseName = detail.context?.course?.name || detail.courseName || '';
+  const submittedAt = detail.context?.submittedAt || detail.submittedAt || '';
+  const totalQuestions = detail.context?.assignment?.totalQuestions || 0;
+  const totalPoints = detail.context?.assignment?.totalPoints || 0;
+  const score = detail.latestReview?.score ?? detail.answers?.reduce((sum: number, a: any) => sum + (a.pointsAwarded || 0), 0) ?? 0;
+  const answers = detail.answers || [];
+
+  return (
+    <div className="container mx-auto space-y-6 max-w-6xl">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Button variant="ghost" size="icon" onClick={onBack}>
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <div className="flex-1">
+          <h1 className="text-3xl font-bold text-theme-text-primary">{assignmentTitle}</h1>
+          {courseName && <p className="text-theme-text-secondary mt-1">{courseName}</p>}
+        </div>
+        {getStatusBadge(status)}
+      </div>
+
+      {/* Context Information */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <Calendar className="h-5 w-5 text-purple-600 dark:text-purple-400 mb-3" />
+            <div>
+              <p className="text-sm text-theme-text-secondary">Submitted</p>
+              <p className="font-medium text-theme-text-primary">
+                {submittedAt ? formatDate(submittedAt) : '—'}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <BookOpen className="h-5 w-5 text-green-600 dark:text-green-400 mb-3" />
+            <div>
+              <p className="text-sm text-theme-text-secondary">Assignment Info</p>
+              <p className="font-medium text-theme-text-primary">{totalQuestions} Questions</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {status === 'IN_REVIEW' ? (
+          <Card>
+            <CardContent className="pt-6">
+              <Clock className="h-5 w-5 text-yellow-600 dark:text-yellow-400 mb-3" />
+              <div>
+                <p className="text-sm text-theme-text-secondary">Status</p>
+                <p className="font-medium text-theme-text-primary">Waiting for Review</p>
+                <p className="text-xs text-theme-text-tertiary mt-1">
+                  Your submission is being reviewed by the instructor.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        ) : (
+          <Card>
+            <CardContent className="pt-6">
+              <Award className="h-5 w-5 text-blue-600 dark:text-blue-400 mb-3" />
+              <div>
+                <p className="text-sm text-theme-text-secondary">Score</p>
+                <p className="text-2xl font-bold text-theme-accent-primary">
+                  {score}/{totalPoints}
+                </p>
+                {status === 'REQUEST_CHANGE' && (
+                  <p className="text-xs text-theme-text-tertiary mt-1">
+                    Score is provisional until review completes.
+                  </p>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Changes Requested Card */}
+      {status === 'REQUEST_CHANGE' && (
+        <Card className="border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/10">
+          <CardContent className="pt-6">
+            <div className="flex items-start gap-4">
+              <AlertCircle className="h-6 w-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-1" />
+              <div className="flex-1">
+                <h3 className="font-semibold text-theme-text-primary mb-2">Changes Requested</h3>
+                <p className="text-sm text-theme-text-secondary">
+                  Your instructor has requested changes to your submission. Please review the
+                  feedback below and resubmit your assignment through the course player.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Submitted Answers */}
+      {answers.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              Submitted Answers ({answers.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {answers.map((answer: any, index: number) => (
+              <div
+                key={answer.questionId || index}
+                className="pb-6 border-b border-theme-border-primary last:border-b-0 last:pb-0"
+              >
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="flex-shrink-0 w-8 h-8 rounded-full bg-theme-accent-primary text-white flex items-center justify-center font-semibold text-sm">
+                    {index + 1}
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-start justify-between gap-4 mb-2">
+                      <h4 className="font-medium text-theme-text-primary">{answer.questionText}</h4>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <Badge variant="secondary" className="text-xs">
+                          {formatQuestionType(answer.questionType)}
+                        </Badge>
+                        <span className="text-sm text-theme-text-secondary">
+                          {answer.questionPoints} pts
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="mt-3 space-y-3">
+                      {answer.selectedOptionText && (
+                        <div className="p-4 bg-theme-bg-secondary rounded-lg border border-theme-border-primary">
+                          <p className="text-xs font-medium text-theme-text-secondary mb-2">Your Answer:</p>
+                          <p className="text-theme-text-primary font-medium">{answer.selectedOptionText}</p>
+                        </div>
+                      )}
+
+                      {answer.selectedOptionIds && answer.selectedOptionIds.length > 0 && !answer.selectedOptionText && (
+                        <div className="p-4 bg-theme-bg-secondary rounded-lg border border-theme-border-primary">
+                          <p className="text-xs font-medium text-theme-text-secondary mb-2">Selected Options:</p>
+                          <div className="space-y-2">
+                            {answer.selectedOptions && answer.selectedOptions.length > 0 ? (
+                              answer.selectedOptions.map((option: any, idx: number) => (
+                                <div key={idx} className="flex items-center gap-2">
+                                  <div className="h-2 w-2 rounded-full bg-theme-accent-primary" />
+                                  <span className="text-theme-text-primary">{option.text}</span>
+                                </div>
+                              ))
+                            ) : (
+                              <p className="text-theme-text-secondary text-sm">
+                                {answer.selectedOptionIds.length} option{answer.selectedOptionIds.length !== 1 ? 's' : ''} selected
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      )}
+
+                      {answer.answerText && (
+                        <div className="p-4 bg-theme-bg-secondary rounded-lg border border-theme-border-primary">
+                          <p className="text-xs font-medium text-theme-text-secondary mb-2">Your Answer:</p>
+                          <p className="text-theme-text-primary whitespace-pre-wrap">{answer.answerText}</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/src/components/pages/ManualReviewPage.tsx

@@ -0,0 +1,228 @@
+import { ClipboardList, CheckCircle, AlertCircle, FileText, Calendar, Search } from 'lucide-react';
+import type { ManualReviewPageProps } from '../../contracts/pages.contract';
+import { Badge } from '../atoms/Badge';
+import { Input } from '../atoms/Input';
+import { Pagination } from '../molecules/Pagination';
+import { EmptyState } from '../molecules/EmptyState';
+import { LoadingSpinner } from '../molecules/LoadingSpinner';
+import { cn } from '../utils';
+
+const statusDisplay: Record<string, { label: string; variant: 'success' | 'warning' | 'destructive' | 'secondary' }> = {
+  IN_REVIEW: { label: 'Pending Review', variant: 'warning' },
+  REQUEST_CHANGE: { label: 'Changes Requested', variant: 'destructive' },
+  GRADED: { label: 'Approved', variant: 'success' },
+};
+
+function formatDate(dateString: string) {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function ManualReviewPage(props: Partial<ManualReviewPageProps>) {
+  const noop = (..._args: any[]) => {};
+  const {
+    submissions = [], summary, pagination, isLoading = false,
+    filterStatus = 'ALL' as const, onFilterStatusChange = noop,
+    searchQuery = '', onSearchChange = noop,
+    currentPage = 1, onPageChange = noop,
+    onSubmissionClick = noop,
+  } = props;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-theme-text-primary">Manual Review</h1>
+          <p className="text-theme-text-secondary mt-1">
+            Track your assignment submissions and review status
+          </p>
+        </div>
+      </div>
+
+      {/* Status Cards */}
+      <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
+        <button
+          onClick={() => { onFilterStatusChange('IN_REVIEW'); onPageChange(1); }}
+          className={cn(
+            'relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer',
+            filterStatus === 'IN_REVIEW'
+              ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 scale-105 shadow-md z-20'
+              : 'border-theme-border-primary hover:border-yellow-500'
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-theme-text-muted">Pending Review</p>
+              <p className="text-2xl font-bold text-yellow-600">{summary?.inReviewSubmissions ?? 0}</p>
+            </div>
+            <ClipboardList className="h-6 w-6 text-yellow-600" />
+          </div>
+          <p className="mt-1 text-xs text-theme-text-muted">Awaiting review</p>
+        </button>
+
+        <button
+          onClick={() => { onFilterStatusChange('REQUEST_CHANGE'); onPageChange(1); }}
+          className={cn(
+            'relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer',
+            filterStatus === 'REQUEST_CHANGE'
+              ? 'border-red-500 bg-red-50 dark:bg-red-900/20 scale-105 shadow-md z-20'
+              : 'border-theme-border-primary hover:border-red-500'
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-theme-text-muted">Changes Requested</p>
+              <p className="text-2xl font-bold text-red-600">{summary?.requestChangeSubmissions ?? 0}</p>
+            </div>
+            <AlertCircle className="h-6 w-6 text-red-600" />
+          </div>
+          <p className="mt-1 text-xs text-theme-text-muted">Needs revision</p>
+        </button>
+
+        <button
+          onClick={() => { onFilterStatusChange('GRADED'); onPageChange(1); }}
+          className={cn(
+            'relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer',
+            filterStatus === 'GRADED'
+              ? 'border-green-500 bg-green-50 dark:bg-green-900/20 scale-105 shadow-md z-20'
+              : 'border-theme-border-primary hover:border-green-500'
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-theme-text-muted">Approved</p>
+              <p className="text-2xl font-bold text-green-600">{summary?.gradedSubmissions ?? 0}</p>
+            </div>
+            <CheckCircle className="h-6 w-6 text-green-600" />
+          </div>
+          <p className="mt-1 text-xs text-theme-text-muted">Completed</p>
+        </button>
+
+        <button
+          onClick={() => { onFilterStatusChange('ALL'); onPageChange(1); }}
+          className={cn(
+            'relative rounded-lg border-2 p-4 text-left transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-md hover:z-20 cursor-pointer',
+            filterStatus === 'ALL'
+              ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 scale-105 shadow-md z-20'
+              : 'border-theme-border-primary hover:border-blue-500'
+          )}
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-theme-text-muted">Total</p>
+              <p className="text-2xl font-bold text-blue-600">{summary?.totalSubmissions ?? 0}</p>
+            </div>
+            <FileText className="h-6 w-6 text-blue-600" />
+          </div>
+          <p className="mt-1 text-xs text-theme-text-muted">All submissions</p>
+        </button>
+      </div>
+
+      {/* Search and Filters */}
+      <div className="space-y-4">
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-theme-text-tertiary z-10 pointer-events-none" />
+            <Input
+              type="text"
+              placeholder="Search learner, course, or assignment..."
+              value={searchQuery}
+              onChange={(e) => onSearchChange(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+          <div className="w-full sm:w-auto">
+            <select
+              value={filterStatus}
+              onChange={(e) => { onFilterStatusChange(e.target.value as any); onPageChange(1); }}
+              className="w-full h-10 px-3 rounded-md border border-theme-border-primary bg-theme-bg-primary text-theme-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-theme-accent-primary cursor-pointer"
+            >
+              <option value="ALL">All Statuses</option>
+              <option value="IN_REVIEW">Pending Review</option>
+              <option value="REQUEST_CHANGE">Changes Requested</option>
+              <option value="GRADED">Approved</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* Data Table */}
+      {isLoading ? (
+        <LoadingSpinner className="py-20" text="Loading submissions..." />
+      ) : submissions.length === 0 ? (
+        <EmptyState
+          icon={<ClipboardList className="w-16 h-16" />}
+          title="No submissions found"
+          description="You haven't submitted anything for manual review yet."
+        />
+      ) : (
+        <>
+          <div className="bg-theme-bg-primary rounded-lg border border-theme-border-primary">
+            {/* Table Header */}
+            <div className="hidden sm:grid grid-cols-12 gap-4 px-5 py-3 bg-theme-bg-secondary text-xs font-semibold text-theme-text-muted uppercase tracking-wider border-b border-theme-border-primary rounded-t-lg">
+              <div className="col-span-5">Assignment</div>
+              <div className="col-span-2">Submitted</div>
+              <div className="col-span-3">Status</div>
+              <div className="col-span-2 text-right">Score</div>
+            </div>
+
+            {/* Table Rows */}
+            <div className="divide-y divide-theme-border-primary">
+              {submissions.map((sub: any) => (
+                <div
+                  key={sub.id}
+                  onClick={() => onSubmissionClick(sub.id)}
+                  className="grid grid-cols-1 sm:grid-cols-12 gap-2 sm:gap-4 px-5 py-4 hover:bg-theme-bg-secondary/50 transition-colors cursor-pointer group"
+                >
+                  {/* Assignment */}
+                  <div className="sm:col-span-5">
+                    <div className="font-medium text-theme-text-primary group-hover:text-theme-accent-primary transition-colors truncate max-w-xs">
+                      {sub.assignment?.title || sub.lessonTitle || sub.title || 'Submission'}
+                    </div>
+                    <div className="text-xs text-theme-text-tertiary">
+                      {sub.assignment?.courseName || sub.courseName || ''}
+                    </div>
+                  </div>
+                  {/* Date */}
+                  <div className="sm:col-span-2 flex items-center gap-1 text-sm text-theme-text-secondary">
+                    <Calendar className="h-4 w-4" />
+                    {sub.submittedAt ? formatDate(sub.submittedAt) : '—'}
+                  </div>
+                  {/* Status */}
+                  <div className="sm:col-span-3 flex items-center">
+                    <Badge variant={statusDisplay[sub.status]?.variant || 'secondary'}>
+                      {statusDisplay[sub.status]?.label || sub.status}
+                    </Badge>
+                  </div>
+                  {/* Score */}
+                  <div className="sm:col-span-2 flex items-center justify-end">
+                    <span className="font-medium text-theme-text-primary">
+                      {sub.score ?? 0}/{sub.totalPoints ?? 0}
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {pagination && pagination.totalPages > 1 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={pagination.totalPages}
+              total={pagination.totalItems}
+              pageSize={pagination.itemsPerPage || 10}
+              hasNextPage={pagination.hasNextPage}
+              hasPreviousPage={pagination.hasPreviousPage}
+              onPageChange={onPageChange}
+              className="mt-4"
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+}