94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
/**
|
|
* File: page.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-11-29
|
|
* Purpose: Assignment list page for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import ActionButton from '@/components/ActionButton';
|
|
import { useFetch } from '@/hooks/useFetch';
|
|
|
|
interface AssignmentData {
|
|
id: string;
|
|
title: string;
|
|
class: {
|
|
name: string;
|
|
};
|
|
dueDate: string;
|
|
status?: string; // Add logic to determine status
|
|
maxScore: number;
|
|
}
|
|
|
|
export default function AssignmentPage() {
|
|
const { data: assignments, loading } = useFetch<AssignmentData[]>('/api/assignments');
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Tugas Saya</h1>
|
|
<p className="text-gray-400">Kelola dan kumpulkan tugas-tugas Anda</p>
|
|
</div>
|
|
{/* Only educators should see this button in real app */}
|
|
<Link href="/dashboard/assignments/new">
|
|
<ActionButton>
|
|
Buat Tugas Baru
|
|
</ActionButton>
|
|
</Link>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="text-center text-gray-400 py-12">Loading...</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{assignments?.map((assignment) => (
|
|
<div key={assignment.id} className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 hover:bg-white/15 transition-all cursor-pointer group">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<span className="text-xs text-gray-400 font-medium bg-white/10 px-2 py-1 rounded">
|
|
{assignment.class.name}
|
|
</span>
|
|
{/* Status placeholder - needs logic */}
|
|
<span className={`px-2 py-1 text-xs rounded border bg-yellow-900/50 text-yellow-200 border-yellow-500/30`}>
|
|
Pending
|
|
</span>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-white mb-2 group-hover:text-gold-400 transition-colors">
|
|
{assignment.title}
|
|
</h3>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-sm text-gray-400">Tenggat Waktu:</p>
|
|
<p className="text-white font-medium">{new Date(assignment.dueDate).toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center pt-4 border-t border-white/10">
|
|
<div className="text-sm">
|
|
<span className="text-gray-400">Nilai Maks: </span>
|
|
<span className="text-white font-bold">{assignment.maxScore}</span>
|
|
</div>
|
|
<Link href={`/dashboard/assignments/${assignment.id}`}>
|
|
<span className="text-gold-400 hover:text-gold-300 text-sm font-medium flex items-center">
|
|
Detail
|
|
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{(!assignments || assignments.length === 0) && (
|
|
<div className="col-span-full text-center py-12 text-gray-400">
|
|
Belum ada tugas yang tersedia.
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |