How to Integrate Bolt.new with Moodle

1// .env.local
2MOODLE_URL=https://your-moodle-site.com
3MOODLE_TOKEN=your_web_services_token_here
4
5// lib/moodle.ts
6const MOODLE_URL = process.env.MOODLE_URL;
7const MOODLE_TOKEN = process.env.MOODLE_TOKEN;
8
9interface MoodleException {
10  exception: string;
11  errorcode: string;
12  message: string;
13  debuginfo?: string;
14}
15
16export async function moodleCall<T>(
17  wsfunction: string,
18  params: Record<string, string | number | boolean> = {}
19): Promise<T> {
20  if (!MOODLE_URL || !MOODLE_TOKEN) {
21    throw new Error('MOODLE_URL and MOODLE_TOKEN must be set in environment variables');
22  }
23
24  const url = new URL(`${MOODLE_URL}/webservice/rest/server.php`);
25  url.searchParams.set('wstoken', MOODLE_TOKEN);
26  url.searchParams.set('moodlewsrestformat', 'json');
27  url.searchParams.set('wsfunction', wsfunction);
28
29  Object.entries(params).forEach(([key, value]) => {
30    url.searchParams.set(key, String(value));
31  });
32
33  const response = await fetch(url.toString(), {
34    headers: { 'Content-Type': 'application/json' },
35  });
36
37  if (!response.ok) {
38    throw new Error(`Moodle API HTTP error: ${response.status}`);
39  }
40
41  const data = await response.json() as T | MoodleException;
42
43  // Moodle returns exceptions as JSON with an 'exception' field
44  if (data && typeof data === 'object' && 'exception' in data) {
45    const err = data as MoodleException;
46    throw new Error(`Moodle API error: ${err.message} (${err.errorcode})`);
47  }
48
49  return data as T;
50}

1// app/api/moodle/courses/[userId]/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { moodleCall } from '@/lib/moodle';
4
5interface MoodleCourse {
6  id: number;
7  fullname: string;
8  shortname: string;
9  overviewfiles?: Array<{ fileurl: string }>;
10  progress?: number;
11  lastaccess?: number;
12  categoryname?: string;
13  startdate?: number;
14  enddate?: number;
15  visible?: number;
16}
17
18export async function GET(
19  request: NextRequest,
20  { params }: { params: { userId: string } }
21) {
22  const userId = parseInt(params.userId, 10);
23
24  if (isNaN(userId)) {
25    return NextResponse.json({ error: 'Invalid user ID' }, { status: 400 });
26  }
27
28  try {
29    const courses = await moodleCall<MoodleCourse[]>(
30      'core_enrol_get_users_courses',
31      { userid: userId }
32    );
33
34    const normalized = courses.map((course) => ({
35      id: course.id,
36      fullname: course.fullname,
37      shortname: course.shortname,
38      progress: course.progress ?? 0,
39      lastAccess: course.lastaccess
40        ? new Date(course.lastaccess * 1000).toISOString()
41        : null,
42      imageUrl: course.overviewfiles?.[0]?.fileurl
43        ? `${course.overviewfiles[0].fileurl}?token=${process.env.MOODLE_TOKEN}`
44        : null,
45      category: course.categoryname ?? 'Uncategorized',
46      startDate: course.startdate ? new Date(course.startdate * 1000).toISOString() : null,
47      endDate: course.enddate ? new Date(course.enddate * 1000).toISOString() : null,
48      isVisible: course.visible === 1,
49    }));
50
51    return NextResponse.json({ courses: normalized, total: normalized.length });
52  } catch (error) {
53    const message = error instanceof Error ? error.message : 'Unknown error';
54    return NextResponse.json({ error: message }, { status: 500 });
55  }
56}

1// app/api/moodle/assignments/[courseId]/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { moodleCall } from '@/lib/moodle';
4
5interface MoodleAssignment {
6  id: number;
7  cmid: number;
8  name: string;
9  duedate: number;
10  cutoffdate: number;
11  intro: string;
12  nosubmissions: number;
13}
14
15interface AssignmentsResponse {
16  courses: Array<{
17    id: number;
18    assignments: MoodleAssignment[];
19  }>;
20}
21
22export async function GET(
23  request: NextRequest,
24  { params }: { params: { courseId: string } }
25) {
26  const courseId = parseInt(params.courseId, 10);
27
28  if (isNaN(courseId)) {
29    return NextResponse.json({ error: 'Invalid course ID' }, { status: 400 });
30  }
31
32  try {
33    const data = await moodleCall<AssignmentsResponse>(
34      'mod_assign_get_assignments',
35      { 'courseids[0]': courseId }
36    );
37
38    const now = Date.now();
39    const assignments = (data.courses[0]?.assignments ?? []).map((a) => ({
40      id: a.id,
41      name: a.name,
42      dueDate: a.duedate ? new Date(a.duedate * 1000).toISOString() : null,
43      cutoffDate: a.cutoffdate ? new Date(a.cutoffdate * 1000).toISOString() : null,
44      description: a.intro.replace(/<[^>]*>/g, ''), // Strip HTML from intro
45      submissionsOpen: a.nosubmissions === 0 && (a.duedate === 0 || a.duedate * 1000 > now),
46      isOverdue: a.duedate > 0 && a.duedate * 1000 < now,
47    }));
48
49    return NextResponse.json({
50      courseId,
51      assignments,
52      total: assignments.length,
53    });
54  } catch (error) {
55    const message = error instanceof Error ? error.message : 'Unknown error';
56    return NextResponse.json({ error: message }, { status: 500 });
57  }
58}

1// components/MoodleDashboard.tsx
2'use client';
3
4import { useState } from 'react';
5
6interface Course {
7  id: number;
8  fullname: string;
9  shortname: string;
10  progress: number;
11  lastAccess: string | null;
12  category: string;
13  imageUrl: string | null;
14}
15
16interface Assignment {
17  id: number;
18  name: string;
19  dueDate: string | null;
20  isOverdue: boolean;
21  submissionsOpen: boolean;
22  description: string;
23}
24
25function urgencyClass(assignment: Assignment): string {
26  if (assignment.isOverdue) return 'border-l-4 border-red-500 bg-red-50';
27  if (assignment.dueDate) {
28    const hoursLeft = (new Date(assignment.dueDate).getTime() - Date.now()) / 3600000;
29    if (hoursLeft < 48) return 'border-l-4 border-yellow-400 bg-yellow-50';
30  }
31  return 'border-l-4 border-gray-200';
32}
33
34export default function MoodleDashboard() {
35  const [userId, setUserId] = useState('');
36  const [courses, setCourses] = useState<Course[]>([]);
37  const [assignments, setAssignments] = useState<Record<number, Assignment[]>>({});
38  const [loading, setLoading] = useState(false);
39  const [error, setError] = useState('');
40  const [expandedCourse, setExpandedCourse] = useState<number | null>(null);
41
42  async function fetchCourses() {
43    if (!userId) return;
44    setLoading(true);
45    setError('');
46    try {
47      const res = await fetch(`/api/moodle/courses/${userId}`);
48      const data = await res.json();
49      if (data.error) throw new Error(data.error);
50      setCourses(data.courses);
51    } catch (e) {
52      setError(e instanceof Error ? e.message : 'Failed to load courses');
53    } finally {
54      setLoading(false);
55    }
56  }
57
58  async function loadAssignments(courseId: number) {
59    if (assignments[courseId]) {
60      setExpandedCourse(expandedCourse === courseId ? null : courseId);
61      return;
62    }
63    const res = await fetch(`/api/moodle/assignments/${courseId}`);
64    const data = await res.json();
65    setAssignments((prev) => ({ ...prev, [courseId]: data.assignments ?? [] }));
66    setExpandedCourse(courseId);
67  }
68
69  return (
70    <div className="p-6 max-w-4xl mx-auto">
71      <h1 className="text-2xl font-bold mb-6">Moodle Student Dashboard</h1>
72      <div className="flex gap-3 mb-8">
73        <input
74          type="number"
75          value={userId}
76          onChange={(e) => setUserId(e.target.value)}
77          placeholder="Moodle User ID"
78          className="border rounded px-3 py-2 w-48"
79        />
80        <button
81          onClick={fetchCourses}
82          disabled={loading}
83          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
84        >
85          {loading ? 'Loading...' : 'Load Courses'}
86        </button>
87      </div>
88      {error && <p className="text-red-600 mb-4">{error}</p>}
89      <div className="grid gap-4">
90        {courses.map((course) => (
91          <div key={course.id} className="border rounded-lg overflow-hidden">
92            <button
93              onClick={() => loadAssignments(course.id)}
94              className="w-full p-4 text-left hover:bg-gray-50"
95            >
96              <div className="flex justify-between items-start">
97                <div>
98                  <h2 className="font-semibold">{course.fullname}</h2>
99                  <p className="text-sm text-gray-500">{course.category}</p>
100                </div>
101                <span className="text-sm text-blue-600">{course.progress}% complete</span>
102              </div>
103              <div className="mt-2 h-2 bg-gray-200 rounded">
104                <div
105                  className="h-2 bg-blue-500 rounded"
106                  style={{ width: `${course.progress}%` }}
107                />
108              </div>
109            </button>
110            {expandedCourse === course.id && assignments[course.id] && (
111              <div className="border-t p-4 bg-gray-50">
112                <h3 className="font-medium mb-3">Assignments</h3>
113                {assignments[course.id].length === 0 ? (
114                  <p className="text-sm text-gray-500">No assignments.</p>
115                ) : (
116                  assignments[course.id].map((a) => (
117                    <div key={a.id} className={`mb-2 p-3 rounded ${urgencyClass(a)}`}>
118                      <p className="font-medium text-sm">{a.name}</p>
119                      <p className="text-xs text-gray-500">
120                        {a.dueDate
121                          ? `Due: ${new Date(a.dueDate).toLocaleDateString()}`
122                          : 'No due date'}
123                        {a.isOverdue && ' — OVERDUE'}
124                      </p>
125                    </div>
126                  ))
127                )}
128              </div>
129            )}
130          </div>
131        ))}
132      </div>
133    </div>
134  );
135}