145 lines
4.2 KiB
TypeScript
145 lines
4.2 KiB
TypeScript
/**
|
|
* File: page.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-11-29
|
|
* Purpose: Create class page for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
|
|
export default function NewClassPage() {
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
description: '',
|
|
code: '',
|
|
maxStudents: 30,
|
|
});
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
const response = await fetch('/api/classes', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
router.push('/dashboard/classes');
|
|
} else {
|
|
alert('Gagal membuat kelas: ' + result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating class:', error);
|
|
alert('Terjadi kesalahan saat membuat kelas');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-white">Buat Kelas Baru</h1>
|
|
<p className="text-gray-400">Buat kelas baru untuk mulai mengajar</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="text-gray-300">
|
|
Nama Kelas
|
|
</Label>
|
|
<Input
|
|
type="text"
|
|
id="name"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
required
|
|
placeholder="Contoh: Tari Tradisional Indonesia 101"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="code" className="text-gray-300">
|
|
Kode Kelas
|
|
</Label>
|
|
<Input
|
|
type="text"
|
|
id="code"
|
|
value={formData.code}
|
|
onChange={(e) => setFormData({ ...formData, code: e.target.value })}
|
|
required
|
|
placeholder="Contoh: TTI101"
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="maxStudents" className="text-gray-300">
|
|
Maksimal Siswa
|
|
</Label>
|
|
<Input
|
|
type="number"
|
|
id="maxStudents"
|
|
value={formData.maxStudents}
|
|
onChange={(e) => setFormData({ ...formData, maxStudents: parseInt(e.target.value) })}
|
|
className="bg-white/10 border-white/20 text-white"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description" className="text-gray-300">
|
|
Deskripsi Kelas
|
|
</Label>
|
|
<Textarea
|
|
id="description"
|
|
rows={4}
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
required
|
|
placeholder="Deskripsikan materi yang akan diajarkan..."
|
|
className="bg-white/10 border-white/20 text-white placeholder:text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-4 flex justify-end space-x-3">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={() => router.back()}
|
|
disabled={loading}
|
|
className="text-gray-300 hover:text-white"
|
|
>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="bg-gold-500 hover:bg-gold-600 text-navy-900"
|
|
>
|
|
{loading ? 'Menyimpan...' : 'Buat Kelas'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
} |