diff --git a/src/app/api/analytics/retention-curve/route.ts b/src/app/api/analytics/retention-curve/route.ts
new file mode 100644
index 0000000..fda4dff
--- /dev/null
+++ b/src/app/api/analytics/retention-curve/route.ts
@@ -0,0 +1,183 @@
+
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/database";
+import { currentUser } from "@clerk/nextjs/server";
+import { Difficulty } from "@prisma/client";
+import { formatDateInTimezone, isValidTimezone } from "@/lib/utils/timezone";
+
+// Helper function to safely map and validate difficulty parameter
+function mapOrValidateDifficulty(difficultyParam: string | null): Difficulty | null {
+ if (!difficultyParam) return null;
+
+ const upperDifficulty = difficultyParam.toUpperCase();
+ if (upperDifficulty === "EASY") return Difficulty.EASY;
+ if (upperDifficulty === "MEDIUM") return Difficulty.MEDIUM;
+ if (upperDifficulty === "HARD") return Difficulty.HARD;
+
+ return null; // Invalid difficulty
+}
+
+export async function GET(req: NextRequest) {
+ const user = await currentUser();
+ if (!user) {
+ return NextResponse.json({ error: "Unauthorized" }, {
+ status: 401,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ });
+ }
+
+ const { searchParams } = new URL(req.url);
+ const subject = searchParams.get("subject")?.trim();
+ const dateRange = searchParams.get("dateRange");
+ const difficulty = searchParams.get("difficulty");
+ const timezone = searchParams.get("timezone") || "UTC";
+
+ // Validate timezone parameter
+ if (!isValidTimezone(timezone)) {
+ return NextResponse.json(
+ {
+ error: "Invalid timezone. Must be a valid IANA timezone string (e.g., 'America/Los_Angeles', 'Europe/London', 'UTC')"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+
+ // Validate and normalize difficulty parameter
+ const safeDifficulty = mapOrValidateDifficulty(difficulty);
+ if (difficulty && !safeDifficulty) {
+ return NextResponse.json(
+ {
+ error: "Invalid difficulty value. Must be one of: EASY, MEDIUM, HARD"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+
+ // Parse and validate dateRange parameter
+ let dateFilter: { gte?: Date; lte?: Date } | undefined = undefined;
+ if (dateRange) {
+ try {
+ // Check if it's a single date or date range (comma-separated)
+ const dates = dateRange.split(',').map(d => d.trim());
+
+ if (dates.length === 1) {
+ // Single date - use as gte
+ const date = new Date(dates[0]);
+ if (isNaN(date.getTime())) {
+ throw new Error("Invalid date format");
+ }
+ dateFilter = { gte: date };
+ } else if (dates.length === 2) {
+ // Date range - use first as gte, second as lte
+ const startDate = new Date(dates[0]);
+ const endDate = new Date(dates[1]);
+
+ if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+ throw new Error("Invalid date format");
+ }
+
+ if (startDate > endDate) {
+ return NextResponse.json(
+ {
+ error: "Start date must be before or equal to end date"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+
+ dateFilter = { gte: startDate, lte: endDate };
+ } else {
+ throw new Error("Invalid date range format");
+ }
+ } catch (error) {
+ return NextResponse.json(
+ {
+ error: "Invalid date format. Use ISO date format (YYYY-MM-DD) or comma-separated range (YYYY-MM-DD,YYYY-MM-DD)"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+ }
+
+ try {
+ const studyRecords = await prisma.studyRecord.findMany({
+ where: {
+ flashcard: {
+ userId: user.id,
+ deck: subject ? {
+ is: {
+ name: {
+ equals: subject,
+ mode: "insensitive"
+ }
+ }
+ } : undefined,
+ difficulty: safeDifficulty ? { equals: safeDifficulty } : undefined,
+ },
+ createdAt: dateFilter,
+ },
+ orderBy: { createdAt: "asc" },
+ select: {
+ createdAt: true,
+ isCorrect: true,
+ },
+ });
+ const retentionData = studyRecords.reduce((acc: { [key: string]: { correct: number; total: number } }, record: { createdAt: Date; isCorrect: boolean }) => {
+ // Format date in the user's timezone to ensure correct date grouping
+ const date = formatDateInTimezone(record.createdAt, timezone);
+ if (!acc[date]) {
+ acc[date] = { correct: 0, total: 0 };
+ }
+ acc[date].total++;
+ if (record.isCorrect) {
+ acc[date].correct++;
+ }
+ return acc;
+ }, {} as { [key: string]: { correct: number; total: number } });
+
+ const labels = Object.keys(retentionData);
+ const retention = Object.values(retentionData).map((d: { correct: number; total: number }) => (d.correct / d.total) * 100);
+
+ return NextResponse.json({ labels, retention }, {
+ status: 200,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ },
+ });
+ } catch (error) {
+ console.error("Failed to compute retention curve:", error);
+ return NextResponse.json(
+ {
+ error: "Failed to compute retention"
+ },
+ {
+ status: 500,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ },
+ }
+ );
+ }
+}
diff --git a/src/app/api/analytics/review-interval-effectiveness/route.ts b/src/app/api/analytics/review-interval-effectiveness/route.ts
new file mode 100644
index 0000000..e155f9c
--- /dev/null
+++ b/src/app/api/analytics/review-interval-effectiveness/route.ts
@@ -0,0 +1,61 @@
+import { NextResponse } from 'next/server';
+import { auth } from '@clerk/nextjs/server';
+import { prisma } from '@/lib/database';
+
+export async function GET(req: Request) {
+ const { searchParams } = new URL(req.url);
+ const subject = searchParams.get('subject');
+ const dateRange = searchParams.get('dateRange');
+
+ try {
+ const { userId } = await auth();
+ if (!userId) {
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+ }
+ const studyRecords = await prisma.studyRecord.findMany({
+ where: {
+ flashcard: {
+ userId: userId,
+ ...(subject && { deck: { name: subject } }),
+ },
+ ...(dateRange && { createdAt: { gte: new Date(dateRange) } }),
+ },
+ orderBy: {
+ createdAt: 'asc',
+ },
+ include: {
+ flashcard: true,
+ },
+ });
+
+ const recordsByFlashcard = studyRecords.reduce((acc, record) => {
+ if (!acc[record.flashcardId]) {
+ acc[record.flashcardId] = [];
+ }
+ acc[record.flashcardId].push(record);
+ return acc;
+ }, {} as Record
);
+
+ const reviewIntervals = Object.values(recordsByFlashcard).flatMap(records => {
+ if (records.length < 2) {
+ return [];
+ }
+
+ // Corrected logic: The 'index' in slice().map() is offset.
+ return records.slice(1).map((record, index) => {
+ // The previous record is at 'index' in the original 'records' array.
+ const previousRecord = records[index];
+ const interval = (new Date(record.createdAt).getTime() - new Date(previousRecord.createdAt).getTime()) / (1000 * 3600 * 24); // Interval in days
+ return {
+ interval,
+ isCorrect: record.isCorrect,
+ };
+ });
+ });
+
+ return NextResponse.json(reviewIntervals);
+ } catch (error) {
+ console.error('[REVIEW_INTERVAL_API]', error);
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+ }
+}
diff --git a/src/app/api/analytics/session-heatmap/route.ts b/src/app/api/analytics/session-heatmap/route.ts
new file mode 100644
index 0000000..df7db9e
--- /dev/null
+++ b/src/app/api/analytics/session-heatmap/route.ts
@@ -0,0 +1,102 @@
+
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/database";
+import { currentUser } from "@clerk/nextjs/server";
+import { getDayInTimezone, getHourInTimezone, isValidTimezone } from "@/lib/utils/timezone";
+
+export async function GET(req: NextRequest) {
+ const user = await currentUser();
+ if (!user) {
+ return new NextResponse(JSON.stringify({ error: "Unauthorized" }), { status: 401 });
+ }
+
+ const { searchParams } = new URL(req.url);
+ const subject = searchParams.get("subject")?.trim();
+ const dateRange = searchParams.get("dateRange");
+ const timezone = searchParams.get("timezone") || "UTC";
+
+ // Validate timezone parameter
+ if (!isValidTimezone(timezone)) {
+ return NextResponse.json(
+ {
+ error: "Invalid timezone. Must be a valid IANA timezone string (e.g., 'America/Los_Angeles', 'Europe/London', 'UTC')"
+ },
+ {
+ status: 400,
+ headers: {
+ "cache-control": "no-store"
+ }
+ }
+ );
+ }
+
+ // Parse and validate dateRange parameter
+ let validatedDate: Date | undefined = undefined;
+ if (dateRange) {
+ try {
+ const parsedDate = new Date(dateRange);
+ if (!isFinite(parsedDate.getTime())) {
+ return NextResponse.json(
+ { error: "Invalid dateRange format. Use ISO date format (YYYY-MM-DD)" },
+ { status: 400, headers: { "cache-control": "no-store" } }
+ );
+ }
+ validatedDate = parsedDate;
+ } catch (error) {
+ return NextResponse.json(
+ { error: "Invalid dateRange format. Use ISO date format (YYYY-MM-DD)" },
+ { status: 400, headers: { "cache-control": "no-store" } }
+ );
+ }
+ }
+
+ try {
+ const studySessions = await prisma.studySession.findMany({
+ where: {
+ userId: user.id,
+ startTime: validatedDate ? { gte: validatedDate } : undefined,
+ records: subject
+ ? {
+ some: {
+ flashcard: {
+ deck: {
+ name: {
+ equals: subject,
+ mode: "insensitive"
+ }
+ },
+ },
+ },
+ }
+ : undefined,
+ },
+ select: {
+ startTime: true,
+ },
+ });
+
+ const heatmapData = Array.from({ length: 7 }, () => Array(24).fill(0));
+
+ studySessions.forEach((session: { startTime: Date }) => {
+ // Get day and hour in the user's timezone to ensure correct heatmap placement
+ const day = getDayInTimezone(session.startTime, timezone);
+ const hour = getHourInTimezone(session.startTime, timezone);
+ if (heatmapData[day]) {
+ heatmapData[day][hour]++;
+ }
+ });
+
+ return new NextResponse(JSON.stringify(heatmapData), {
+ status: 200,
+ headers: { "Content-Type": "application/json" },
+ });
+ } catch (error) {
+ console.error("Failed to fetch session heatmap data:", error);
+ return new NextResponse(
+ JSON.stringify({
+ error: "Failed to fetch session heatmap data"
+ }),
+ { status: 500 }
+ );
+ }
+}
diff --git a/src/app/api/analytics/subject-progress/route.ts b/src/app/api/analytics/subject-progress/route.ts
new file mode 100644
index 0000000..55c5085
--- /dev/null
+++ b/src/app/api/analytics/subject-progress/route.ts
@@ -0,0 +1,232 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/database";
+import { currentUser } from "@clerk/nextjs/server";
+import { Difficulty } from "@prisma/client";
+import { formatDateInTimezone, isValidTimezone } from "@/lib/utils/timezone";
+
+// Helper function to safely map and validate difficulty parameter
+function mapOrValidateDifficulty(difficultyParam: string | null): Difficulty | null {
+ if (!difficultyParam) return null;
+
+ const upperDifficulty = difficultyParam.toUpperCase();
+ if (upperDifficulty === "EASY") return Difficulty.EASY;
+ if (upperDifficulty === "MEDIUM") return Difficulty.MEDIUM;
+ if (upperDifficulty === "HARD") return Difficulty.HARD;
+
+ return null; // Invalid difficulty
+}
+
+export async function GET(req: NextRequest) {
+ const user = await currentUser();
+ if (!user) {
+ return NextResponse.json({ error: "Unauthorized" }, {
+ status: 401,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ });
+ }
+
+ const { searchParams } = new URL(req.url);
+ const subject = searchParams.get("subject")?.trim();
+ const dateRange = searchParams.get("dateRange");
+ const difficulty = searchParams.get("difficulty");
+ const timezone = searchParams.get("timezone") || "UTC";
+
+ // Validate timezone parameter
+ if (!isValidTimezone(timezone)) {
+ return NextResponse.json(
+ {
+ error: "Invalid timezone. Must be a valid IANA timezone string (e.g., 'America/Los_Angeles', 'Europe/London', 'UTC')"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+
+ // Validate and normalize difficulty parameter
+ const safeDifficulty = mapOrValidateDifficulty(difficulty);
+ if (difficulty && !safeDifficulty) {
+ return NextResponse.json(
+ {
+ error: "Invalid difficulty value. Must be one of: EASY, MEDIUM, HARD"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+
+ // Parse and validate dateRange parameter
+ let dateFilter: { gte?: Date; lte?: Date } | undefined = undefined;
+ if (dateRange) {
+ try {
+ const dates = dateRange.split(',').map(d => d.trim());
+
+ if (dates.length === 1) {
+ const date = new Date(dates[0]);
+ if (isNaN(date.getTime())) {
+ throw new Error("Invalid date format");
+ }
+ dateFilter = { gte: date };
+ } else if (dates.length === 2) {
+ const startDate = new Date(dates[0]);
+ const endDate = new Date(dates[1]);
+
+ if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+ throw new Error("Invalid date format");
+ }
+
+ if (startDate > endDate) {
+ return NextResponse.json(
+ {
+ error: "Start date must be before or equal to end date"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+
+ dateFilter = { gte: startDate, lte: endDate };
+ } else {
+ throw new Error("Invalid date range format");
+ }
+ } catch (error) {
+ return NextResponse.json(
+ {
+ error: "Invalid date format. Use ISO date format (YYYY-MM-DD) or comma-separated range (YYYY-MM-DD,YYYY-MM-DD)"
+ },
+ {
+ status: 400,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ }
+ }
+ );
+ }
+ }
+
+ try {
+ // Fetch study records grouped by subject (deck name)
+ const studyRecords = await prisma.studyRecord.findMany({
+ where: {
+ flashcard: {
+ userId: user.id,
+ deck: subject ? {
+ is: {
+ name: {
+ equals: subject,
+ mode: "insensitive"
+ }
+ }
+ } : undefined,
+ difficulty: safeDifficulty ? { equals: safeDifficulty } : undefined,
+ },
+ createdAt: dateFilter,
+ },
+ include: {
+ flashcard: {
+ include: {
+ deck: true,
+ }
+ },
+ },
+ orderBy: { createdAt: "asc" },
+ });
+
+ // Group by deck and calculate progress over time
+ const subjectData: { [subject: string]: { [date: string]: { correct: number; total: number } } } = {};
+
+ studyRecords.forEach((record) => {
+ const deckName = record.flashcard.deck.name;
+ // Format date in the user's timezone to ensure correct date grouping
+ const date = formatDateInTimezone(record.createdAt, timezone);
+
+ if (!subjectData[deckName]) {
+ subjectData[deckName] = {};
+ }
+
+ if (!subjectData[deckName][date]) {
+ subjectData[deckName][date] = { correct: 0, total: 0 };
+ }
+
+ subjectData[deckName][date].total++;
+ if (record.isCorrect) {
+ subjectData[deckName][date].correct++;
+ }
+ });
+
+ // Build lookup map for each subject: date -> accuracy
+ const subjectLookups = Object.entries(subjectData).map(([subject, dateData]) => {
+ const dateToAccuracy: { [date: string]: number } = {};
+
+ Object.entries(dateData).forEach(([date, stats]) => {
+ const { correct, total } = stats;
+ dateToAccuracy[date] = total > 0 ? (correct / total) * 100 : 0;
+ });
+
+ return {
+ label: subject,
+ dateToAccuracy,
+ dates: Object.keys(dateData),
+ };
+ });
+
+ // If no data, return empty dataset
+ if (subjectLookups.length === 0) {
+ return NextResponse.json({
+ labels: [],
+ datasets: []
+ }, {
+ status: 200,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ },
+ });
+ }
+
+ // Get all unique dates across all subjects
+ const allDates = [...new Set(subjectLookups.flatMap(d => d.dates))].sort();
+
+ // Build aligned datasets: each dataset.data has same length as allDates
+ const datasets = subjectLookups.map(({ label, dateToAccuracy }) => ({
+ label,
+ data: allDates.map(date => dateToAccuracy[date] ?? null),
+ }));
+
+ return NextResponse.json({
+ labels: allDates,
+ datasets,
+ }, {
+ status: 200,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ },
+ });
+ } catch (error) {
+ console.error("Failed to compute subject progress:", error);
+ return NextResponse.json(
+ {
+ error: "Failed to compute subject progress"
+ },
+ {
+ status: 500,
+ headers: {
+ "Cache-Control": "no-cache, no-store, must-revalidate"
+ },
+ }
+ );
+ }
+}
+
diff --git a/src/app/api/analytics/time-spent/route.ts b/src/app/api/analytics/time-spent/route.ts
new file mode 100644
index 0000000..1325210
--- /dev/null
+++ b/src/app/api/analytics/time-spent/route.ts
@@ -0,0 +1,52 @@
+import { NextResponse } from 'next/server';
+import { auth } from '@clerk/nextjs/server';
+import { prisma } from '@/lib/database';
+
+export async function GET(req: Request) {
+ const { userId } = await auth();
+ if (!userId) {
+ return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+ }
+
+ const { searchParams } = new URL(req.url);
+ const subject = searchParams.get('subject');
+ const dateRange = searchParams.get('dateRange');
+
+ try {
+ const studySessions = await prisma.studySession.findMany({
+ where: {
+ userId: userId,
+ ...(dateRange && { startTime: { gte: new Date(dateRange) } }),
+ ...(subject && {
+ records: {
+ some: {
+ flashcard: {
+ deck: { name: subject }
+ }
+ }
+ }
+ })
+ },
+ include: {
+ records: true,
+ },
+ });
+
+ const timeSpentData = studySessions.map(session => {
+ const sessionDuration = session.endTime ? (new Date(session.endTime).getTime() - new Date(session.startTime).getTime()) / 60000 : 0; // Duration in minutes
+ const totalCards = session.records.length;
+ const averageTimePerCard = totalCards > 0 ? session.records.reduce((acc, record) => acc + record.timeSpent, 0) / totalCards : 0; // Average in seconds
+
+ return {
+ date: session.startTime,
+ sessionDuration,
+ averageTimePerCard,
+ };
+ });
+
+ return NextResponse.json(timeSpentData);
+ } catch (error) {
+ console.error('[TIME_SPENT_API]', error);
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+ }
+}
diff --git a/src/app/api/checkout-sessions/route.ts b/src/app/api/checkout-sessions/route.ts
index e0aa930..de79445 100644
--- a/src/app/api/checkout-sessions/route.ts
+++ b/src/app/api/checkout-sessions/route.ts
@@ -1,9 +1,17 @@
import { NextResponse } from "next/server";
import Stripe from "stripe";
-const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
- apiVersion: "2024-06-20",
-});
+function getStripeInstance() {
+ const secretKey = process.env.STRIPE_SECRET_KEY;
+
+ if (!secretKey) {
+ throw new Error('Stripe configuration is missing. Please set STRIPE_SECRET_KEY environment variable.');
+ }
+
+ return new Stripe(secretKey, {
+ apiVersion: "2024-06-20",
+ });
+}
export async function POST(req: Request) {
const { subscriptionType } = await req.json();
@@ -21,6 +29,7 @@ export async function POST(req: Request) {
}
try {
+ const stripe = getStripeInstance();
const session = await stripe.checkout.sessions.create({
mode: "subscription",
payment_method_types: ["card"],
@@ -53,6 +62,7 @@ export async function GET(req: Request) {
}
try {
+ const stripe = getStripeInstance();
const session = await stripe.checkout.sessions.retrieve(session_id);
return NextResponse.json(session);
} catch (error) {
diff --git a/src/app/api/razorpay/create-order/route.ts b/src/app/api/razorpay/create-order/route.ts
index b742047..3136013 100644
--- a/src/app/api/razorpay/create-order/route.ts
+++ b/src/app/api/razorpay/create-order/route.ts
@@ -3,11 +3,20 @@ import { auth } from '@clerk/nextjs/server';
import { prisma } from '@/lib/database';
import Razorpay from 'razorpay';
-// Initialize Razorpay
-const razorpay = new Razorpay({
- key_id: process.env.RAZORPAY_KEY_ID!,
- key_secret: process.env.RAZORPAY_KEY_SECRET!,
-});
+// Initialize Razorpay function
+function getRazorpayInstance() {
+ const keyId = process.env.RAZORPAY_KEY_ID;
+ const keySecret = process.env.RAZORPAY_KEY_SECRET;
+
+ if (!keyId || !keySecret) {
+ throw new Error('Razorpay configuration is missing. Please set RAZORPAY_KEY_ID and RAZORPAY_KEY_SECRET environment variables.');
+ }
+
+ return new Razorpay({
+ key_id: keyId,
+ key_secret: keySecret,
+ });
+}
// ✅ UPDATED: Complete pricing configuration
const PRICING = {
@@ -123,6 +132,7 @@ export async function POST(req: NextRequest) {
// ✅ FIXED: Create Razorpay order with better error handling
let order;
try {
+ const razorpay = getRazorpayInstance();
order = await razorpay.orders.create({
amount: amount,
currency: 'INR',
diff --git a/src/app/flashcards/[id]/page.tsx b/src/app/flashcards/[id]/page.tsx
index 9471ac7..96f919f 100644
--- a/src/app/flashcards/[id]/page.tsx
+++ b/src/app/flashcards/[id]/page.tsx
@@ -24,6 +24,9 @@ import { useUser } from "@clerk/nextjs";
import StudyMode from "@/components/study/StudyMode";
import { FlashcardSkeleton } from "@/components/ui/skeleton-cards";
+// Disable static generation for this page since it uses Clerk
+export const dynamic = 'force-dynamic';
+
export default function FlashcardSetPage() {
const [flashcards, setFlashcards] = useState([]);
const [loading, setLoading] = useState(true);
diff --git a/src/app/flashcards/page.tsx b/src/app/flashcards/page.tsx
index 0cd29c0..083b40c 100644
--- a/src/app/flashcards/page.tsx
+++ b/src/app/flashcards/page.tsx
@@ -4,11 +4,14 @@ import Link from "next/link";
import { useEffect, useState } from "react";
import { useUser } from "@clerk/nextjs";
import { Button } from "@/components/ui/button";
-import { Loader2, Plus } from "lucide-react";
+import { Loader2, Plus, BarChart2 } from "lucide-react";
import DeckList from "@/components/decks/DeckList";
import type { Deck } from "@/types";
import GlobalSearch from '@/components/search/GlobalSearch'
+// Disable static generation for this page since it uses Clerk
+export const dynamic = 'force-dynamic';
+
// Single Responsibility: Manage flashcards overview page
export default function FlashcardsPage() {
const [decks, setDecks] = useState([]);
@@ -66,11 +69,18 @@ export default function FlashcardsPage() {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7acd3b6..4bfff3a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,10 +8,12 @@ import { ClerkProvider } from "@clerk/nextjs";
import { ThemeProvider } from "../components/ThemeProvider";
import Footer from "@/components/Footer";
import 'react-toastify/dist/ReactToastify.css'
-import { ToastContainer } from 'react-toastify'
import { Toaster } from "@/components/ui/toaster"
import BacktoTop from "@/components/BacktoTop";
+// Disable static generation globally to avoid Clerk issues during build
+export const dynamic = 'force-dynamic';
+
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
@@ -28,12 +30,33 @@ export default async function RootLayout({
// const headersList = await headers();
// const cookieStore = await cookies();
+ // Validate Clerk publishable key
+ const clerkPublishableKey = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+
+ if (!clerkPublishableKey) {
+ if (process.env.NODE_ENV === 'production') {
+ throw new Error(
+ 'NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY environment variable is required in production. ' +
+ 'Please set this variable in your production environment.'
+ );
+ } else {
+ // Development/test fallback with warning
+ console.warn(
+ '⚠️ NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY is not set. Using development fallback. ' +
+ 'Please set NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY in your .env.local file for proper authentication.'
+ );
+ }
+ }
+
+ const publishableKey = clerkPublishableKey || 'pk_dev_fallback_please_set_env_var';
+
return (
-
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..ed3fb43
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Home, ArrowLeft } from 'lucide-react'
+
+export default function NotFound() {
+ return (
+
+
+
+
404
+
Page Not Found
+
+ The page you're looking for doesn't exist or has been moved.
+
+
+
+
+
+
+
+
+
Error: {error}
;
+ }
+
+ if (!data) {
+ return Loading...
;
+ }
+
+ const chartData = {
+ labels: ['Easy', 'Medium', 'Hard'],
+ datasets: [
+ {
+ label: 'Correct',
+ data: [data.EASY.correct, data.MEDIUM.correct, data.HARD.correct],
+ backgroundColor: 'rgba(75, 192, 192, 0.6)',
+ },
+ {
+ label: 'Incorrect',
+ data: [
+ data.EASY.total - data.EASY.correct,
+ data.MEDIUM.total - data.MEDIUM.correct,
+ data.HARD.total - data.HARD.correct,
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.6)',
+ },
+ ],
+ };
+
+ const chartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'Performance by Difficulty Level',
+ },
+ tooltip: {
+ callbacks: {
+ label: function (context: any) {
+ let label = context.dataset.label || '';
+ if (label) {
+ label += ': ';
+ }
+ const total = context.chart.data.datasets.reduce((acc: number, dataset: any) => acc + dataset.data[context.dataIndex], 0);
+ const value = context.raw;
+ const percentage = total > 0 ? ((value / total) * 100).toFixed(2) + '%' : '0%';
+ return `${label}${value} (${percentage})`;
+ }
+ }
+ }
+ },
+ scales: {
+ x: {
+ stacked: true,
+ },
+ y: {
+ stacked: true,
+ },
+ },
+ };
+
+ return ;
+}
diff --git a/src/components/analytics/Filters.tsx b/src/components/analytics/Filters.tsx
new file mode 100644
index 0000000..a62e44e
--- /dev/null
+++ b/src/components/analytics/Filters.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useEffect } from 'react';
+
+export function Filters() {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ // Automatically detect and set user's timezone only if not already set
+ useEffect(() => {
+ const currentTimezone = searchParams.get('timezone');
+ const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+ // Only set timezone if it's absent, preserving user selections on remounts
+ if (!currentTimezone) {
+ const params = new URLSearchParams(searchParams.toString());
+ params.set('timezone', userTimezone);
+ router.replace(`?${params.toString()}`);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []); // Run once on mount - intentionally empty to avoid infinite loops
+
+ const handleFilterChange = (event: React.ChangeEvent) => {
+ const params = new URLSearchParams(searchParams.toString());
+ params.set(event.target.name, event.target.value);
+ router.push(`?${params.toString()}`);
+ };
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/analytics/Recommendations.tsx b/src/components/analytics/Recommendations.tsx
new file mode 100644
index 0000000..2d18ce9
--- /dev/null
+++ b/src/components/analytics/Recommendations.tsx
@@ -0,0 +1,65 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface RecommendationData {
+ bestTimeToStudy: number;
+ urgentRevisionDecks: { name: string; retention: number }[];
+}
+
+export function Recommendations() {
+ const [data, setData] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(`/api/analytics/recommendations`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch recommendations');
+ }
+ const result = await response.json();
+ setData(result);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'An unknown error occurred');
+ }
+ };
+
+ fetchData();
+ }, []);
+
+ if (error) {
+ return Error: {error}
;
+ }
+
+ if (!data) {
+ return Loading recommendations...
;
+ }
+
+ const formatHour = (hour: number) => {
+ if (hour === -1) return "Not enough data";
+ const ampm = hour >= 12 ? 'PM' : 'AM';
+ const formattedHour = hour % 12 || 12;
+ return `${formattedHour} ${ampm}`;
+ }
+
+ return (
+
+
Personalized Recommendations
+
+
+
Best Time to Study
+
{formatHour(data.bestTimeToStudy)}
+
+
+
Subjects for Urgent Revision
+
+ {data.urgentRevisionDecks.map(deck => (
+ - {deck.name} ({deck.retention.toFixed(2)}% retention)
+ ))}
+
+
+
+
Error: {error}
;
+ }
+
+ if (!data) {
+ return Loading...
;
+ }
+
+ const chartData = {
+ datasets: [
+ {
+ label: 'Correct',
+ data: data.filter(d => d.isCorrect).map(d => ({ x: d.interval, y: 1 })),
+ backgroundColor: 'rgba(75, 192, 192, 0.6)',
+ },
+ {
+ label: 'Incorrect',
+ data: data.filter(d => !d.isCorrect).map(d => ({ x: d.interval, y: 0 })),
+ backgroundColor: 'rgba(255, 99, 132, 0.6)',
+ },
+ ],
+ };
+
+ const chartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'Review Interval Effectiveness',
+ },
+ tooltip: {
+ callbacks: {
+ label: function (context: any) {
+ return `Interval: ${context.raw.x.toFixed(2)} days`;
+ }
+ }
+ }
+ },
+ scales: {
+ x: {
+ title: {
+ display: true,
+ text: 'Review Interval (days)',
+ },
+ },
+ y: {
+ title: {
+ display: true,
+ text: 'Outcome (1 = Correct, 0 = Incorrect)',
+ },
+ min: -0.1,
+ max: 1.1,
+ ticks: {
+ stepSize: 1,
+ }
+ },
+ },
+ };
+
+ return ;
+}
diff --git a/src/components/analytics/SessionHeatmap.tsx b/src/components/analytics/SessionHeatmap.tsx
new file mode 100644
index 0000000..f712ebe
--- /dev/null
+++ b/src/components/analytics/SessionHeatmap.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { Bar } from 'react-chartjs-2';
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend,
+ TooltipItem,
+} from 'chart.js';
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
+interface SessionHeatmapProps {
+ data: number[][]; // 7 days x 24 hours
+}
+
+const dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+export function SessionHeatmap({ data }: SessionHeatmapProps) {
+ // Validate input
+ if (!data || data.length !== 7) {
+ console.error('SessionHeatmap: expected data with 7 days');
+ return null;
+ }
+ if (data.some(dayData => !Array.isArray(dayData) || dayData.length !== 24)) {
+ console.error('SessionHeatmap: expected each day to have 24 hours');
+ return null;
+ }
+
+ // Calculate total sessions per day
+ const dailyTotals = data.map((dayData, dayIndex) => ({
+ day: dayLabels[dayIndex],
+ total: dayData.reduce((sum, val) => sum + val, 0),
+ }));
+ // Create chart data
+ const chartData = {
+ labels: dailyTotals.map(d => d.day),
+ datasets: [
+ {
+ label: 'Study Sessions',
+ data: dailyTotals.map(d => d.total),
+ backgroundColor: 'rgba(75, 192, 192, 0.5)',
+ borderColor: 'rgb(75, 192, 192)',
+ borderWidth: 1,
+ },
+ ],
+ };
+
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'Study Sessions by Day of Week',
+ },
+ tooltip: {
+ callbacks: {
+ label: function(context: TooltipItem<'bar'>) {
+ const dayIndex = context.dataIndex;
+ const dayData = data[dayIndex];
+
+ // Defensive checks for dayData
+ if (!dayData || !Array.isArray(dayData) || dayData.length === 0) {
+ return [
+ `Sessions: ${context.parsed?.y ?? 0}`,
+ `Peak hour: N/A`,
+ ];
+ }
+
+ // Compute peak hour only when we have valid data
+ const maxValue = Math.max(...dayData);
+ const maxIndex = dayData.indexOf(maxValue);
+ const peakHour = maxIndex >= 0 ? `${maxIndex}:00` : 'N/A';
+
+ return [
+ `Sessions: ${context.parsed?.y ?? 0}`,
+ `Peak hour: ${peakHour}`,
+ ];
+ }
+ }
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ ticks: {
+ stepSize: 1,
+ }
+ }
+ }
+ };
+
+ return ;
+}
diff --git a/src/components/analytics/SessionHeatmapWrapper.tsx b/src/components/analytics/SessionHeatmapWrapper.tsx
new file mode 100644
index 0000000..a544a77
--- /dev/null
+++ b/src/components/analytics/SessionHeatmapWrapper.tsx
@@ -0,0 +1,10 @@
+import { SessionHeatmap } from './SessionHeatmap';
+
+interface SessionHeatmapWrapperProps {
+ data: number[][];
+}
+
+export function SessionHeatmapWrapper({ data }: SessionHeatmapWrapperProps) {
+ return ;
+}
+
diff --git a/src/components/analytics/SubjectProgress.tsx b/src/components/analytics/SubjectProgress.tsx
new file mode 100644
index 0000000..4c4e37c
--- /dev/null
+++ b/src/components/analytics/SubjectProgress.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { Line } from 'react-chartjs-2';
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+} from 'chart.js';
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
+interface SubjectProgressProps {
+ data: {
+ labels: string[];
+ datasets: Array<{
+ label: string;
+ data: number[];
+ }>;
+ };
+}
+
+// Color palette for different subjects
+const colors = [
+ 'rgb(75, 192, 192)',
+ 'rgb(255, 99, 132)',
+ 'rgb(54, 162, 235)',
+ 'rgb(255, 206, 86)',
+ 'rgb(153, 102, 255)',
+ 'rgb(255, 159, 64)',
+];
+
+export function SubjectProgress({ data }: SubjectProgressProps) {
+ // Transform data for chart
+ const chartData = {
+ labels: data.labels.length > 0 ? data.labels : ['No data'],
+ datasets: data.datasets.length > 0
+ ? data.datasets.map((dataset, index) => ({
+ label: dataset.label,
+ data: dataset.data,
+ fill: false,
+ borderColor: colors[index % colors.length],
+ tension: 0.1,
+ }))
+ : [{
+ label: 'No data available',
+ data: [0],
+ fill: false,
+ borderColor: 'rgb(200, 200, 200)',
+ tension: 0.1,
+ }],
+ };
+
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'Subject Progress (Accuracy %)',
+ },
+ },
+ scales: {
+ y: {
+ min: 0,
+ max: 100,
+ ticks: {
+ callback: function(value: number | string) {
+ return value + '%';
+ }
+ }
+ }
+ }
+ };
+
+ return ;
+}
diff --git a/src/components/analytics/SubjectProgressWrapper.tsx b/src/components/analytics/SubjectProgressWrapper.tsx
new file mode 100644
index 0000000..caf2369
--- /dev/null
+++ b/src/components/analytics/SubjectProgressWrapper.tsx
@@ -0,0 +1,16 @@
+import { SubjectProgress } from './SubjectProgress';
+
+interface SubjectProgressWrapperProps {
+ data: {
+ labels: string[];
+ datasets: Array<{
+ label: string;
+ data: number[];
+ }>;
+ };
+}
+
+export function SubjectProgressWrapper({ data }: SubjectProgressWrapperProps) {
+ return ;
+}
+
diff --git a/src/components/analytics/TimeSpentAnalysis.tsx b/src/components/analytics/TimeSpentAnalysis.tsx
new file mode 100644
index 0000000..993fc40
--- /dev/null
+++ b/src/components/analytics/TimeSpentAnalysis.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+} from 'chart.js';
+import { useSearchParams } from 'next/navigation';
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
+interface TimeSpentData {
+ date: string;
+ sessionDuration: number;
+ averageTimePerCard: number;
+}
+
+export function TimeSpentAnalysis() {
+ const [data, setData] = useState(null);
+ const [error, setError] = useState(null);
+ const searchParams = useSearchParams();
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const params = new URLSearchParams(searchParams.toString());
+ const response = await fetch(`/api/analytics/time-spent?${params.toString()}`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch data');
+ }
+ const result = await response.json();
+ setData(result);
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'An unknown error occurred');
+ }
+ };
+
+ fetchData();
+ }, [searchParams]);
+
+ if (error) {
+ return Error: {error}
;
+ }
+
+ if (!data) {
+ return Loading...
;
+ }
+
+ const chartData = {
+ labels: data.map(d => new Date(d.date).toLocaleDateString()),
+ datasets: [
+ {
+ label: 'Session Duration (minutes)',
+ data: data.map(d => d.sessionDuration),
+ borderColor: 'rgba(75, 192, 192, 1)',
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ yAxisID: 'y',
+ },
+ {
+ label: 'Avg. Time per Card (seconds)',
+ data: data.map(d => d.averageTimePerCard),
+ borderColor: 'rgba(255, 99, 132, 1)',
+ backgroundColor: 'rgba(255, 99, 132, 0.2)',
+ yAxisID: 'y1',
+ },
+ ],
+ };
+
+ const chartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'Time Spent Analysis',
+ },
+ },
+ scales: {
+ x: {
+ title: {
+ display: true,
+ text: 'Date'
+ }
+ },
+ y: {
+ type: 'linear' as const,
+ display: true,
+ position: 'left' as const,
+ title: {
+ display: true,
+ text: 'Session Duration (minutes)'
+ }
+ },
+ y1: {
+ type: 'linear' as const,
+ display: true,
+ position: 'right' as const,
+ title: {
+ display: true,
+ text: 'Avg. Time per Card (seconds)'
+ },
+ grid: {
+ drawOnChartArea: false, // only draw grid lines for the first Y axis
+ },
+ },
+ },
+ };
+
+ return ;
+}
diff --git a/src/components/core/flash-card.tsx b/src/components/core/flash-card.tsx
index 185167e..35ca66c 100644
--- a/src/components/core/flash-card.tsx
+++ b/src/components/core/flash-card.tsx
@@ -67,12 +67,18 @@ export default function Flashcard() {
)}
)}
-
-
-