Refactor assignment management system

- Updated the PermissionCatalog to remove unnecessary permissions for assignment submissions.
- Modified RolePermissionSeeder to align with the updated permissions.
- Enhanced useServerTable hook to support resetKeys for Inertia's reset visit option.
- Removed obsolete columns.tsx file related to assignment columns.
- Revamped assignment index page to utilize InfiniteScroll and improved UI components.
- Introduced new assignment status management with enums and updated database schema.
- Created GradeSubmissionRequest for validation of submission grading.
- Implemented score editing functionality in submission index with real-time updates.
- Added accordion component for better UI organization in assignment descriptions.
This commit is contained in:
Yoga Pangestu 2026-09-03 09:51:27 +07:00
parent a809307272
commit 4980ad95b3
20 changed files with 711 additions and 652 deletions

View File

@ -0,0 +1,21 @@
<?php
namespace App\Enums;
use App\Enums\Concerns\HasValues;
enum AssignmentStatus: string
{
use HasValues;
case Open = 'open';
case Closed = 'closed';
public function label(): string
{
return match ($this) {
self::Open => 'Dibuka',
self::Closed => 'Ditutup',
};
}
}

View File

@ -8,6 +8,7 @@
use App\Models\Assignment;
use App\Services\Admin\AcademicClasses\AssignmentService;
use App\Services\Admin\Manage\CourseClassService;
use App\Services\Admin\Master\AcademicTermService;
use Illuminate\Http\RedirectResponse;
use Inertia\Inertia;
use Inertia\Response;
@ -17,18 +18,28 @@ class AssignmentController extends Controller
public function __construct(
private readonly AssignmentService $service,
private readonly CourseClassService $courseClassService,
private readonly AcademicTermService $academicTermService,
) {}
public function index(PaginatedRequest $request): Response
{
$academicTermId = $request->has('academic_term_id')
? $request->validated('academic_term_id')
: $this->academicTermService->getActive()?->id;
return Inertia::render('admin/academic-classes/assignments/index', [
'assignments' => $this->service->paginated(
'assignments' => Inertia::scroll(fn () => $this->service->paginated(
$request->user(),
...$request->validatedWithDefaults(),
courseClassId: $request->validated('course_class_id'),
),
academicTermId: $academicTermId,
)),
'courseClasses' => $this->courseClassService->getAllForSelect($request->user()),
'filters' => $request->only(['course_class_id']),
'academicTerms' => $this->academicTermService->getAllForSelect(),
'filters' => [
'course_class_id' => $request->validated('course_class_id'),
'academic_term_id' => $academicTermId ? (string) $academicTermId : null,
],
]);
}

View File

@ -3,7 +3,7 @@
namespace App\Http\Controllers\Admin\AcademicClasses;
use App\Http\Controllers\Controller;
use App\Http\Requests\Admin\AcademicClasses\SubmissionRequest;
use App\Http\Requests\Admin\AcademicClasses\GradeSubmissionRequest;
use App\Http\Requests\Admin\AcademicClasses\SubmitAssignmentRequest;
use App\Models\Assignment;
use App\Models\Submission;
@ -20,34 +20,21 @@ public function __construct(
public function index(Assignment $assignment): Response
{
$this->abortUnlessLecturerOwnsAssignment($assignment);
$assignment->load(['courseClass.course', 'courseClass.lecturer.user.profile', 'courseClass.academicTerm']);
return Inertia::render('admin/academic-classes/assignments/submissions', [
'assignment' => $assignment,
'submissions' => $this->service->forAssignment($assignment),
'availableStudents' => $this->service->availableStudents($assignment),
]);
}
public function store(SubmissionRequest $request, Assignment $assignment): RedirectResponse
public function grade(GradeSubmissionRequest $request, Assignment $assignment, Submission $submission): RedirectResponse
{
$this->service->create($assignment, $request->validated(), $request->file('file'));
$this->service->grade($submission, $request->validated('score'));
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pengumpulan berhasil ditambahkan.'])->back();
}
public function update(SubmissionRequest $request, Assignment $assignment, Submission $submission): RedirectResponse
{
$this->service->update($submission, $request->validated(), $request->file('file'));
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pengumpulan berhasil diperbarui.'])->back();
}
public function destroy(Assignment $assignment, Submission $submission): RedirectResponse
{
$this->service->delete($submission);
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pengumpulan berhasil dihapus.'])->back();
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Nilai berhasil disimpan.'])->back();
}
public function submit(SubmitAssignmentRequest $request, Assignment $assignment): RedirectResponse
@ -58,4 +45,17 @@ public function submit(SubmitAssignmentRequest $request, Assignment $assignment)
return to_route('admin.academic-classes.assignments.index');
}
/**
* A dosen may only manage submissions for classes they lecture.
*/
private function abortUnlessLecturerOwnsAssignment(Assignment $assignment): void
{
$user = request()->user();
abort_if(
$user->hasRole('dosen') && $assignment->courseClass?->lecturer_id !== $user->lecturer?->id,
403,
);
}
}

View File

@ -2,6 +2,7 @@
namespace App\Http\Requests\Admin\AcademicClasses;
use App\Enums\AssignmentStatus;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rule;
@ -27,6 +28,7 @@ public function rules(): array
'title' => ['required', 'string', 'max:150'],
'description' => ['nullable', 'string'],
'deadline' => ['required', 'date'],
'status' => ['nullable', Rule::enum(AssignmentStatus::class)],
'attachment' => ['nullable', 'file', 'max:10240', 'mimes:pdf,doc,docx,ppt,pptx,xls,xlsx,jpg,jpeg,png,mp4,zip'],
];
}

View File

@ -0,0 +1,31 @@
<?php
namespace App\Http\Requests\Admin\AcademicClasses;
use Illuminate\Foundation\Http\FormRequest;
class GradeSubmissionRequest extends FormRequest
{
public function authorize(): bool
{
if (! $this->user()->can('update-assignment-submissions')) {
return false;
}
$user = $this->user();
$assignment = $this->route('assignment');
if ($user->hasRole('dosen') && $assignment?->courseClass?->lecturer_id !== $user->lecturer?->id) {
return false;
}
return true;
}
public function rules(): array
{
return [
'score' => ['nullable', 'numeric', 'min:0', 'max:100'],
];
}
}

View File

@ -1,41 +0,0 @@
<?php
namespace App\Http\Requests\Admin\AcademicClasses;
use App\Enums\SubmissionStatus;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rule;
class SubmissionRequest extends FormRequest
{
public function authorize(): bool
{
return $this->user()->can($this->isMethod('post') ? 'create-assignment-submissions' : 'update-assignment-submissions');
}
public function rules(): array
{
$assignment = $this->route('assignment');
$submission = $this->route('submission');
$rules = [
'notes' => ['nullable', 'string'],
'status' => ['required', Rule::enum(SubmissionStatus::class)],
'submitted_at' => ['nullable', 'date'],
'score' => ['nullable', 'numeric', 'min:0', 'max:100'],
'lecturer_feedback' => ['nullable', 'string'],
'file' => ['nullable', 'file', 'max:10240', 'mimes:pdf,doc,docx,ppt,pptx,xls,xlsx,jpg,jpeg,png,mp4,zip'],
];
if (! $submission) {
$rules['student_id'] = [
'required',
'integer',
Rule::exists('class_enrollments', 'student_id')->where('course_class_id', $assignment->course_class_id),
Rule::unique('submissions', 'student_id')->where('assignment_id', $assignment->id),
];
}
return $rules;
}
}

View File

@ -2,6 +2,7 @@
namespace App\Http\Requests\Admin\AcademicClasses;
use App\Enums\AssignmentStatus;
use App\Enums\RegistrationStatus;
use App\Models\Submission;
use Illuminate\Foundation\Http\FormRequest;
@ -21,6 +22,12 @@ public function authorize(): bool
return false;
}
// Whether the assignment still accepts submissions is governed by its
// status, not the deadline — a lecturer closes it explicitly.
if ($assignment->status !== AssignmentStatus::Open) {
return false;
}
return $assignment->courseClass()
->whereHas('registrations', function ($q) use ($student) {
$q->where('student_id', $student->id)

View File

@ -2,6 +2,7 @@
namespace App\Models;
use App\Enums\AssignmentStatus;
use Illuminate\Database\Eloquent\Attributes\Appends;
use Illuminate\Database\Eloquent\Attributes\Guarded;
use Illuminate\Database\Eloquent\Casts\Attribute;
@ -23,6 +24,7 @@ protected function casts(): array
{
return [
'deadline' => 'datetime',
'status' => AssignmentStatus::class,
];
}

View File

@ -2,6 +2,7 @@
namespace App\Services\Admin\AcademicClasses;
use App\Enums\AssignmentStatus;
use App\Enums\RegistrationStatus;
use App\Models\Assignment;
use App\Models\User;
@ -10,18 +11,23 @@
class AssignmentService
{
public function paginated(User $user, int $perPage = 25, string $search = '', ?int $courseClassId = null): LengthAwarePaginator
public function paginated(User $user, int $perPage = 25, string $search = '', ?int $courseClassId = null, ?int $academicTermId = null): LengthAwarePaginator
{
return Assignment::query()
->select(['id', 'course_class_id', 'title', 'description', 'deadline'])
->withCount('submissions')
->with('courseClass.course:id,code,name')
->select(['id', 'course_class_id', 'title', 'description', 'deadline', 'status'])
->withCount([
'submissions',
'submissions as graded_submissions_count' => fn ($q) => $q->whereNotNull('score'),
])
->with(['courseClass' => fn ($q) => $q->withCount('enrollments')
->with(['course:id,code,name', 'academicTerm:id,academic_year,semester,start_date,end_date'])])
->when($user->hasRole('mahasiswa'), fn ($q) => $q->with(['submissions' => function ($q) use ($user) {
$q->select(['id', 'assignment_id', 'student_id', 'notes', 'status', 'submitted_at'])
->where('student_id', $user->student?->id);
}]))
->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%"))
->when($courseClassId, fn ($q) => $q->where('course_class_id', $courseClassId))
->when($academicTermId, fn ($q) => $q->whereHas('courseClass', fn ($q) => $q->where('academic_term_id', $academicTermId)))
->when($user->hasRole('dosen'), fn ($q) => $q->whereHas('courseClass', fn ($q) => $q->where('lecturer_id', $user->lecturer?->id)))
->when($user->hasRole('mahasiswa'), fn ($q) => $q->whereHas('courseClass', function ($q) use ($user) {
$q->whereHas('registrations', function ($q) use ($user) {
@ -40,6 +46,7 @@ public function create(array $data, ?UploadedFile $file): Assignment
'title' => $data['title'],
'description' => $data['description'] ?? null,
'deadline' => $data['deadline'],
'status' => $data['status'] ?? AssignmentStatus::Open,
]);
if ($file) {
@ -55,6 +62,7 @@ public function update(Assignment $assignment, array $data, ?UploadedFile $file)
$assignment->title = $data['title'];
$assignment->description = $data['description'] ?? null;
$assignment->deadline = $data['deadline'];
$assignment->status = $data['status'] ?? $assignment->status;
$assignment->update();
if ($file) {

View File

@ -42,51 +42,11 @@ public function forAssignment(Assignment $assignment): Collection
->get();
}
public function availableStudents(Assignment $assignment): Collection
public function grade(Submission $submission, ?float $score): Submission
{
return Student::query()
->whereHas('enrollments', fn ($q) => $q->where('course_class_id', $assignment->course_class_id))
->whereDoesntHave('submissions', fn ($q) => $q->where('assignment_id', $assignment->id))
->with(['user.profile', 'department'])
->get();
}
public function create(Assignment $assignment, array $data, ?UploadedFile $file): Submission
{
$submission = $assignment->submissions()->create([
'student_id' => $data['student_id'],
'notes' => $data['notes'] ?? null,
'status' => $data['status'],
'submitted_at' => $data['submitted_at'] ?? null,
'score' => $data['score'] ?? null,
'lecturer_feedback' => $data['lecturer_feedback'] ?? null,
]);
if ($file) {
$submission->addMedia($file)->toMediaCollection('submission_file');
}
return $submission;
}
public function update(Submission $submission, array $data, ?UploadedFile $file): Submission
{
$submission->notes = $data['notes'] ?? null;
$submission->status = $data['status'];
$submission->submitted_at = $data['submitted_at'] ?? null;
$submission->score = $data['score'] ?? null;
$submission->lecturer_feedback = $data['lecturer_feedback'] ?? null;
$submission->score = $score;
$submission->update();
if ($file) {
$submission->addMedia($file)->toMediaCollection('submission_file');
}
return $submission;
}
public function delete(Submission $submission): bool
{
return $submission->delete();
}
}

View File

@ -15,7 +15,7 @@ class PermissionCatalog
public const ACADEMIC_CLASSES = [
'view-materials', 'create-materials', 'update-materials', 'delete-materials',
'view-assignments', 'create-assignments', 'update-assignments', 'delete-assignments',
'view-assignment-submissions', 'create-assignment-submissions', 'update-assignment-submissions', 'delete-assignment-submissions',
'view-assignment-submissions', 'update-assignment-submissions',
'submit-assignments',
'view-schedules', 'create-schedules', 'update-schedules', 'delete-schedules',
'view-attendances', 'create-attendances', 'delete-attendances',

View File

@ -0,0 +1,25 @@
<?php
use App\Enums\AssignmentStatus;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up(): void
{
Schema::table('assignments', function (Blueprint $table) {
$table->enum('status', AssignmentStatus::values())
->default(AssignmentStatus::Open->value)
->after('deadline');
});
}
public function down(): void
{
Schema::table('assignments', function (Blueprint $table) {
$table->dropColumn('status');
});
}
};

View File

@ -69,6 +69,8 @@ public function run(): void
'create-assignments',
'update-assignments',
'delete-assignments',
'view-assignment-submissions',
'update-assignment-submissions',
...$feedbackSelfService,
],
'staff-admin' => [

View File

@ -0,0 +1,63 @@
import { ChevronDownIcon } from "lucide-react"
import { Accordion as AccordionPrimitive } from "radix-ui"
import { cn } from "@/lib/utils"
function Accordion({
...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}
function AccordionItem({
className,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
return (
<AccordionPrimitive.Item
data-slot="accordion-item"
className={cn("border-b last:border-b-0", className)}
{...props}
/>
)
}
function AccordionTrigger({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
return (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
data-slot="accordion-trigger"
className={cn(
"flex flex-1 items-start justify-between gap-4 rounded-md py-3 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
)
}
function AccordionContent({
className,
children,
...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
return (
<AccordionPrimitive.Content
data-slot="accordion-content"
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pt-0 pb-3", className)}>{children}</div>
</AccordionPrimitive.Content>
)
}
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

View File

@ -7,6 +7,12 @@ type UseServerTableOptions = {
pagination: PaginationState;
filters?: Record<string, string | undefined>;
filterWithParams?: boolean;
/**
* Prop keys to pass as Inertia's `reset` visit option whenever search or
* filters change, so mergeable props (e.g. `Inertia::scroll()` used for
* infinite scroll) are replaced instead of appended to.
*/
resetKeys?: string[];
};
export function useServerTable({
@ -14,6 +20,7 @@ export function useServerTable({
pagination,
filters,
filterWithParams = true,
resetKeys,
}: UseServerTableOptions) {
const [search, setSearch] = useState(
() => new URLSearchParams(window.location.search).get('search') ?? '',
@ -63,10 +70,14 @@ export function useServerTable({
per_page: pagination.per_page,
search: value,
},
{ preserveState: true, replace: true },
{
preserveState: true,
replace: true,
...(resetKeys ? { reset: resetKeys } : {}),
},
);
},
[route, filters, pagination.per_page],
[route, filters, pagination.per_page, resetKeys],
);
function applyFilter(key: string, value: string) {
@ -88,7 +99,11 @@ export function useServerTable({
search,
}
: newFilters,
{ preserveState: true, replace: true },
{
preserveState: true,
replace: true,
...(resetKeys ? { reset: resetKeys } : {}),
},
);
}
@ -103,7 +118,11 @@ export function useServerTable({
search,
}
: newFilters,
{ preserveState: true, replace: true },
{
preserveState: true,
replace: true,
...(resetKeys ? { reset: resetKeys } : {}),
},
);
}
@ -117,7 +136,11 @@ export function useServerTable({
search,
}
: {},
{ preserveState: true, replace: true },
{
preserveState: true,
replace: true,
...(resetKeys ? { reset: resetKeys } : {}),
},
);
setFilterOpen(false);
}

View File

@ -1,184 +0,0 @@
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { ClipboardList, Pencil, Trash2, Upload } from 'lucide-react';
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
import { RowActions } from '@/components/row-actions';
import { Badge } from '@/components/ui/badge';
import { index as submissionsIndex } from '@/routes/admin/academic-classes/assignments/submissions';
import type { Assignment } from '@/types/assignment';
export type { Assignment } from '@/types/assignment';
type CreateColumnsParams = {
handleEdit: (assignment: Assignment) => void;
handleDeleteClick: (assignment: Assignment) => void;
handleSubmit: (assignment: Assignment) => void;
canUpdate: boolean;
canDelete: boolean;
canViewSubmissions: boolean;
canSubmit: boolean;
};
export function createAssignmentColumns(
params: CreateColumnsParams,
): ColumnDef<Assignment>[] {
const {
handleEdit,
handleDeleteClick,
handleSubmit,
canUpdate,
canDelete,
canViewSubmissions,
canSubmit,
} = params;
const columns: ColumnDef<Assignment>[] = [
{
accessorKey: 'title',
header: () => <span>Judul</span>,
cell: ({ row }) => (
<span className="font-medium">
{row.getValue('title') as string}
</span>
),
},
{
accessorKey: 'course_class.course.name',
header: () => <span>Kelas</span>,
cell: ({ row }) => {
const courseClass = row.original.course_class;
if (!courseClass) {
return '-';
}
return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
},
},
{
accessorKey: 'deadline',
header: () => <span>Batas Waktu</span>,
cell: ({ row }) => {
const deadline = row.getValue('deadline') as string;
return format(new Date(deadline), 'd MMM yyyy, HH:mm');
},
},
{
accessorKey: 'attachment_name',
header: () => <span>Lampiran</span>,
cell: ({ row }) => {
const assignment = row.original;
if (!assignment.attachment_url || !assignment.attachment_name) {
return <span className="text-muted-foreground">-</span>;
}
return (
<AttachmentPreviewDialog
fileUrl={assignment.attachment_url}
fileName={assignment.attachment_name}
/>
);
},
},
canSubmit
? {
id: 'my_submission_status',
header: () => (
<span className="block text-center">Status Saya</span>
),
meta: {
className: 'w-[160px] text-center',
headerClassName: 'w-[160px] text-center',
},
cell: ({ row }) => {
const mySubmission = row.original.submissions?.[0];
return (
<div className="flex justify-center">
<Badge
variant={
mySubmission?.status === 'submitted'
? 'default'
: 'secondary'
}
>
{mySubmission?.status === 'submitted'
? 'Sudah Mengumpulkan'
: 'Belum Mengumpulkan'}
</Badge>
</div>
);
},
}
: {
accessorKey: 'submissions_count',
header: () => (
<span className="block text-center">Pengumpulan</span>
),
meta: {
className: 'w-[120px] text-center',
headerClassName: 'w-[120px] text-center',
},
cell: ({ row }) => (
<div className="text-center">
{row.original.submissions_count}
</div>
),
},
];
if (canViewSubmissions || canUpdate || canDelete || canSubmit) {
columns.push({
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[150px] text-center',
headerClassName: 'w-[150px] text-center',
},
cell: ({ row }) => {
const assignment = row.original;
const mySubmission = assignment.submissions?.[0];
return (
<RowActions
actions={[
{
label:
mySubmission?.status === 'submitted'
? 'Kumpulkan Ulang'
: 'Kumpulkan Tugas',
icon: <Upload className="h-4 w-4" />,
show: canSubmit,
onClick: () => handleSubmit(assignment),
},
{
label: 'Pengumpulan',
icon: <ClipboardList className="h-4 w-4" />,
show: canViewSubmissions,
href: submissionsIndex.url(assignment.id),
},
{
label: 'Edit',
icon: <Pencil className="h-4 w-4" />,
show: canUpdate,
onClick: () => handleEdit(assignment),
},
{
label: 'Hapus',
icon: (
<Trash2 className="h-4 w-4 text-destructive" />
),
show: canDelete,
onClick: () => handleDeleteClick(assignment),
},
]}
/>
);
},
});
}
return columns;
}

View File

@ -1,17 +1,37 @@
import { Head, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { Head, InfiniteScroll, router } from '@inertiajs/react';
import { format } from 'date-fns';
import {
Clock,
ClipboardList,
Paperclip,
Pencil,
Plus,
Trash2,
Upload,
} from 'lucide-react';
import { useState } from 'react';
import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
import { DateTimeField } from '@/components/datetime-field';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { FileUploadField } from '@/components/file-upload-field';
import type { FilterOptionGroup } from '@/components/filter-dialog';
import type {
FilterField,
FilterOptionGroup,
} from '@/components/filter-dialog';
import { FilterDialog } from '@/components/filter-dialog';
import { FormDialog } from '@/components/form-dialog';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import { RowActions } from '@/components/row-actions';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
Combobox,
ComboboxCollection,
@ -25,6 +45,13 @@ import {
} from '@/components/ui/combobox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { usePermissions } from '@/hooks/use-permissions';
import { useServerTable } from '@/hooks/use-server-table';
@ -35,8 +62,10 @@ import {
submit,
update,
} from '@/routes/admin/academic-classes/assignments';
import { index as submissionsIndex } from '@/routes/admin/academic-classes/assignments/submissions';
import { formatAcademicTermLabel } from '@/types/academic-term';
import type { Assignment } from '@/types/assignment';
import { createAssignmentColumns } from './columns';
import { AssignmentStatusLabels, AssignmentStatuses } from '@/types/assignment';
type CourseClassOption = {
id: number;
@ -51,6 +80,12 @@ type CourseClassOption = {
type CourseClassGroup = { value: string; items: CourseClassOption[] };
type AcademicTermOption = {
id: number;
academic_year: string;
semester: string;
};
type Props = {
assignments: {
data: Assignment[];
@ -60,9 +95,11 @@ type Props = {
total: number;
};
courseClasses: CourseClassOption[];
academicTerms: AcademicTermOption[];
highlight?: number;
filters: {
course_class_id?: string;
academic_term_id?: string;
};
};
@ -70,6 +107,29 @@ function courseClassLabel(courseClass: CourseClassOption): string {
return `${courseClass.course?.code ?? ''} - ${courseClass.course?.name ?? ''}`;
}
function percentageOf(part: number, total: number): number {
return total > 0 ? Math.round((part / total) * 100) : 0;
}
/** Turns red as the deadline passes, amber once it's within 3 days. */
function deadlineTextClass(deadline: string): string {
const hoursLeft = (new Date(deadline).getTime() - Date.now()) / 3_600_000;
if (hoursLeft <= 0) {
return 'font-medium text-destructive';
}
if (hoursLeft <= 24) {
return 'text-destructive';
}
if (hoursLeft <= 72) {
return 'text-amber-600 dark:text-amber-500';
}
return 'text-muted-foreground';
}
function groupCourseClassesByDepartment(
options: CourseClassOption[],
): CourseClassGroup[] {
@ -130,7 +190,10 @@ function CourseClassField({
<ComboboxLabel>{group.value}</ComboboxLabel>
<ComboboxCollection>
{(option: CourseClassOption) => (
<ComboboxItem key={option.id} value={option}>
<ComboboxItem
key={option.id}
value={option}
>
{courseClassLabel(option)}
</ComboboxItem>
)}
@ -146,6 +209,7 @@ function CourseClassField({
export default function AssignmentIndex({
assignments,
courseClasses,
academicTerms,
highlight,
filters,
}: Props) {
@ -160,7 +224,15 @@ export default function AssignmentIndex({
const canViewSubmissions = hasPermission('view-assignment-submissions');
const canSubmit = hasPermission('submit-assignments');
const filterFields = [
const filterFields: FilterField[] = [
{
key: 'academic_term_id',
label: 'Periode Akademik',
options: academicTerms.map((term) => ({
value: String(term.id),
label: formatAcademicTermLabel(term),
})),
},
{
key: 'course_class_id',
label: 'Kelas',
@ -169,25 +241,33 @@ export default function AssignmentIndex({
},
];
const pagination: PaginationState = {
const pagination = {
current_page: assignments.current_page,
last_page: assignments.last_page,
per_page: assignments.per_page,
total: assignments.total,
};
const {
search,
handlePageChange,
handlePerPageChange,
handleSearchChange,
applyFilters,
} = useServerTable({
const { search, handleSearchChange, applyFilters } = useServerTable({
route: () => assignmentIndex.url(),
pagination,
filters,
resetKeys: ['assignments'],
});
function handleApplyFilters(newFilters: Record<string, string>) {
// Tanpa `academic_term_id` eksplisit, backend akan kembali ke
// periode aktif, jadi menghapus filter ini perlu dikirim eksplisit
// alih-alih hanya menghilangkan key-nya.
const clearedAcademicTerm =
Boolean(filters.academic_term_id) && !newFilters.academic_term_id;
applyFilters({
...newFilters,
...(clearedAcademicTerm ? { academic_term_id: '' } : {}),
});
}
function handleDelete() {
if (!deleting) {
return;
@ -198,16 +278,6 @@ export default function AssignmentIndex({
});
}
const columns = createAssignmentColumns({
handleEdit: (assignment) => setEditing(assignment),
handleDeleteClick: (assignment) => setDeleting(assignment),
handleSubmit: (assignment) => setSubmitting(assignment),
canUpdate,
canDelete,
canViewSubmissions,
canSubmit,
});
return (
<>
<Head title="Tugas" />
@ -281,23 +351,257 @@ export default function AssignmentIndex({
assignment={submitting}
/>
<DataTable
columns={columns}
data={assignments.data}
searchKey="title"
pagination={pagination}
onPageChange={handlePageChange}
onPerPageChange={handlePerPageChange}
onSearchChange={handleSearchChange}
searchValue={search}
toolbar={
<FilterDialog
fields={filterFields}
activeFilters={filters}
onApply={applyFilters}
/>
}
/>
<div className="flex items-center gap-2">
<Input
placeholder="Cari judul tugas..."
value={search}
onChange={(event) =>
handleSearchChange(event.target.value)
}
className="max-w-sm"
/>
<FilterDialog
fields={filterFields}
activeFilters={filters}
onApply={handleApplyFilters}
/>
</div>
{assignments.data.length === 0 ? (
<p className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
Belum ada tugas.
</p>
) : (
<InfiniteScroll
data="assignments"
as="div"
buffer={300}
className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3"
loading={() => (
<p className="col-span-full py-4 text-center text-sm text-muted-foreground">
Memuat tugas...
</p>
)}
>
{assignments.data.map((assignment) => {
const mySubmission = assignment.submissions?.[0];
return (
<Card
key={assignment.id}
className={
highlight === assignment.id
? 'ring-2 ring-primary'
: undefined
}
>
<CardHeader className="flex flex-row items-start justify-between gap-2">
<div className="flex flex-col gap-1">
<CardTitle className="text-base leading-tight">
{assignment.title}
</CardTitle>
{assignment.course_class && (
<span className="text-xs text-muted-foreground">
{assignment.course_class
.course?.code ??
''}{' '}
{assignment.course_class
.course?.name ?? ''}
</span>
)}
</div>
<RowActions
wrapperClassName="-mt-1 -mr-2 flex items-center gap-1"
actions={[
{
label:
mySubmission?.status ===
'submitted'
? 'Kumpulkan Ulang'
: 'Kumpulkan Tugas',
icon: (
<Upload className="h-3.5 w-3.5" />
),
show:
canSubmit &&
assignment.status ===
'open',
onClick: () =>
setSubmitting(
assignment,
),
},
{
label: 'Pengumpulan',
icon: (
<ClipboardList className="h-3.5 w-3.5" />
),
show: canViewSubmissions,
href: submissionsIndex.url(
assignment.id,
),
},
{
label: 'Edit',
icon: (
<Pencil className="h-3.5 w-3.5" />
),
show: canUpdate,
onClick: () =>
setEditing(assignment),
},
{
label: 'Hapus',
icon: (
<Trash2 className="h-3.5 w-3.5 text-destructive" />
),
show: canDelete,
onClick: () =>
setDeleting(assignment),
},
]}
/>
</CardHeader>
<CardContent className="flex flex-col gap-2 text-xs text-muted-foreground">
<div className="flex flex-wrap items-center gap-1.5">
<Badge
variant={
assignment.status === 'open'
? 'secondary'
: 'destructive'
}
className="w-fit text-[10px] font-normal"
>
{
AssignmentStatusLabels[
assignment.status
]
}
</Badge>
{assignment.course_class
?.academic_term && (
<Badge
variant="outline"
className="w-fit text-[10px] font-normal"
>
{formatAcademicTermLabel(
assignment.course_class
.academic_term,
)}
</Badge>
)}
</div>
<span
className={`inline-flex items-center gap-1.5 ${deadlineTextClass(assignment.deadline)}`}
>
<Clock className="h-3.5 w-3.5 shrink-0" />
{format(
new Date(assignment.deadline),
'd MMM yyyy, HH:mm',
)}
</span>
{assignment.attachment_url &&
assignment.attachment_name ? (
<div className="flex items-center gap-1.5">
<Paperclip className="h-3.5 w-3.5 shrink-0" />
<AttachmentPreviewDialog
fileUrl={
assignment.attachment_url
}
fileName={
assignment.attachment_name
}
/>
</div>
) : null}
<div className="flex flex-wrap items-center gap-1.5 pt-1">
{canSubmit ? (
<Badge
variant={
mySubmission?.status ===
'submitted'
? 'default'
: 'secondary'
}
>
{mySubmission?.status ===
'submitted'
? 'Sudah Mengumpulkan'
: 'Belum Mengumpulkan'}
</Badge>
) : (
<>
<Badge variant="secondary">
{assignment.submissions_count.toLocaleString(
'id-ID',
)}{' '}
/{' '}
{(
assignment
.course_class
?.enrollments_count ??
0
).toLocaleString(
'id-ID',
)}{' '}
Pengumpulan (
{percentageOf(
assignment.submissions_count,
assignment
.course_class
?.enrollments_count ??
0,
)}
%)
</Badge>
<Badge variant="outline">
{assignment.graded_submissions_count.toLocaleString(
'id-ID',
)}{' '}
/{' '}
{assignment.submissions_count.toLocaleString(
'id-ID',
)}{' '}
Dinilai (
{percentageOf(
assignment.graded_submissions_count,
assignment.submissions_count,
)}
%)
</Badge>
</>
)}
</div>
{assignment.description && (
<Accordion
type="single"
collapsible
className="-mx-6 -mb-6 border-t"
>
<AccordionItem
value="description"
className="border-b-0"
>
<AccordionTrigger className="px-6 text-xs font-medium text-foreground hover:no-underline">
Deskripsi
</AccordionTrigger>
<AccordionContent className="px-6">
<p className="text-sm whitespace-pre-line text-foreground">
{
assignment.description
}
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
)}
</CardContent>
</Card>
);
})}
</InfiniteScroll>
)}
<DeleteConfirmDialog
target={deleting}
@ -477,6 +781,30 @@ function EditForm({
placeholder="Pilih tanggal batas waktu"
error={errors.deadline}
/>
<div className="grid gap-2">
<Label>
Status{' '}
<span className="text-destructive">*</span>
</Label>
<input type="hidden" name="status" />
<Select name="status" defaultValue={editing.status}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Pilih status" />
</SelectTrigger>
<SelectContent>
{AssignmentStatuses.map((status) => (
<SelectItem key={status} value={status}>
{AssignmentStatusLabels[status]}
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
Menutup tugas akan mencegah mahasiswa
mengumpulkan, terlepas dari batas waktu.
</p>
<InputError message={errors.status} />
</div>
<FileUploadField
name="attachment"
label="Lampiran"

View File

@ -1,69 +1,97 @@
import { Head, Link, router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { ArrowLeft, Pencil, Plus, Trash2 } from 'lucide-react';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DataTable } from '@/components/data-table';
import { DateTimeField } from '@/components/datetime-field';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { FileUploadField } from '@/components/file-upload-field';
import { FormDialog } from '@/components/form-dialog';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import { RowActions } from '@/components/row-actions';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { usePermissions } from '@/hooks/use-permissions';
import { index as assignmentIndex } from '@/routes/admin/academic-classes/assignments';
import {
destroy,
store,
update,
} from '@/routes/admin/academic-classes/assignments/submissions';
import { grade } from '@/routes/admin/academic-classes/assignments/submissions';
import { AssignmentStatusLabels } from '@/types/assignment';
import type { Assignment } from '@/types/assignment';
import type { Submission, SubmissionStudent } from '@/types/submission';
import { SubmissionStatusLabels, SubmissionStatuses } from '@/types/submission';
import type { Submission } from '@/types/submission';
import { SubmissionStatusLabels } from '@/types/submission';
type Props = {
assignment: Assignment;
submissions: Submission[];
availableStudents: SubmissionStudent[];
};
export default function SubmissionIndex({
assignment,
submissions,
availableStudents,
}: Props) {
const [createOpen, setCreateOpen] = useState(false);
const [editing, setEditing] = useState<Submission | null>(null);
const [deleting, setDeleting] = useState<Submission | null>(null);
const { hasPermission } = usePermissions();
const canCreate = hasPermission('create-assignment-submissions');
const canUpdate = hasPermission('update-assignment-submissions');
const canDelete = hasPermission('delete-assignment-submissions');
function ScoreCell({
assignmentId,
submission,
canUpdate,
}: {
assignmentId: number;
submission: Submission;
canUpdate: boolean;
}) {
const normalizedScore = submission.score ?? '';
const [value, setValue] = useState(normalizedScore);
const [savedScore, setSavedScore] = useState(normalizedScore);
const [saving, setSaving] = useState(false);
function handleDelete() {
if (!deleting) {
return;
}
router.delete(destroy([assignment.id, deleting.id]), {
onSuccess: () => setDeleting(null),
});
// Sync local state when the score changes externally (e.g. after save).
if (normalizedScore !== savedScore) {
setSavedScore(normalizedScore);
setValue(normalizedScore);
}
if (!canUpdate) {
return <div className="text-center">{submission.score ?? '-'}</div>;
}
const dirty = value !== normalizedScore;
function handleSave() {
setSaving(true);
router.patch(
grade.url([assignmentId, submission.id]),
{ score: value === '' ? null : value },
{
preserveScroll: true,
preserveState: true,
onFinish: () => setSaving(false),
},
);
}
return (
<div className="flex items-center justify-center gap-1">
<Input
type="number"
min={0}
max={100}
step="0.01"
value={value}
onChange={(event) => setValue(event.target.value)}
className="h-8 w-20 text-center"
/>
{dirty && (
<Button
type="button"
size="icon"
variant="ghost"
className="h-8 w-8 shrink-0"
disabled={saving}
onClick={handleSave}
>
<Save className="h-4 w-4" />
</Button>
)}
</div>
);
}
export default function SubmissionIndex({ assignment, submissions }: Props) {
const { hasPermission } = usePermissions();
const canUpdate = hasPermission('update-assignment-submissions');
const columns: ColumnDef<Submission>[] = [
{
accessorKey: 'student.student_number',
@ -122,46 +150,19 @@ export default function SubmissionIndex({
accessorKey: 'score',
header: () => <span className="block text-center">Nilai</span>,
meta: {
className: 'w-[90px] text-center',
headerClassName: 'w-[90px] text-center',
className: 'w-[140px] text-center',
headerClassName: 'w-[140px] text-center',
},
cell: ({ row }) => (
<div className="text-center">{row.original.score ?? '-'}</div>
<ScoreCell
assignmentId={assignment.id}
submission={row.original}
canUpdate={canUpdate}
/>
),
},
];
if (canUpdate || canDelete) {
columns.push({
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[100px] text-center',
headerClassName: 'w-[100px] text-center',
},
cell: ({ row }) => (
<RowActions
actions={[
{
label: 'Edit',
icon: <Pencil className="h-4 w-4" />,
show: canUpdate,
onClick: () => setEditing(row.original),
},
{
label: 'Hapus',
icon: (
<Trash2 className="h-4 w-4 text-destructive" />
),
show: canDelete,
onClick: () => setDeleting(row.original),
},
]}
/>
),
});
}
return (
<>
<Head title="Pengumpulan Tugas" />
@ -180,8 +181,17 @@ export default function SubmissionIndex({
/>
<Card>
<CardHeader>
<CardHeader className="flex flex-row items-start justify-between gap-2">
<CardTitle>{assignment.title}</CardTitle>
<Badge
variant={
assignment.status === 'open'
? 'secondary'
: 'destructive'
}
>
{AssignmentStatusLabels[assignment.status]}
</Badge>
</CardHeader>
<CardContent className="grid gap-1 text-sm text-muted-foreground">
<p>
@ -199,237 +209,10 @@ export default function SubmissionIndex({
</CardContent>
</Card>
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold">
Daftar Pengumpulan
</h2>
{canCreate && (
<Button
onClick={() => setCreateOpen(true)}
disabled={availableStudents.length === 0}
>
<Plus className="h-4 w-4" />
Tambah Pengumpulan
</Button>
)}
</div>
<h2 className="text-lg font-semibold">Daftar Pengumpulan</h2>
<DataTable columns={columns} data={submissions} />
<CreateForm
open={createOpen}
onOpenChange={setCreateOpen}
assignmentId={assignment.id}
availableStudents={availableStudents}
/>
<EditForm
key={editing?.id}
open={editing !== null}
onOpenChange={(open) => {
if (!open) {
setEditing(null);
}
}}
assignmentId={assignment.id}
editing={editing}
/>
<DeleteConfirmDialog
target={deleting}
onOpenChange={(open) => {
if (!open) {
setDeleting(null);
}
}}
title="Hapus Pengumpulan"
description={(submission) =>
`Apakah Anda yakin ingin menghapus pengumpulan "${submission.student?.user?.profile?.full_name ?? 'mahasiswa ini'}"? Tindakan ini tidak dapat dibatalkan.`
}
onConfirm={handleDelete}
/>
</div>
</>
);
}
function CreateForm({
open,
onOpenChange,
assignmentId,
availableStudents,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
assignmentId: number;
availableStudents: SubmissionStudent[];
}) {
return (
<FormDialog
open={open}
onOpenChange={onOpenChange}
title="Tambah Pengumpulan"
action={store(assignmentId)}
resetOnSuccess
onSuccess={() => onOpenChange(false)}
>
{({ errors }) => (
<div className="grid gap-4">
<div className="grid gap-2">
<Label>
Mahasiswa{' '}
<span className="text-destructive">*</span>
</Label>
<input type="hidden" name="student_id" />
<Select name="student_id">
<SelectTrigger className="w-full">
<SelectValue placeholder="Pilih mahasiswa" />
</SelectTrigger>
<SelectContent>
{availableStudents.map((student) => (
<SelectItem
key={student.id}
value={String(student.id)}
>
{student.user?.profile?.full_name ??
'N/A'}{' '}
- {student.student_number}
</SelectItem>
))}
</SelectContent>
</Select>
<InputError message={errors.student_id} />
</div>
<SubmissionFields
errors={errors}
resetKey={open ? 'open' : 'closed'}
/>
</div>
)}
</FormDialog>
);
}
function EditForm({
open,
onOpenChange,
assignmentId,
editing,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
assignmentId: number;
editing: Submission | null;
}) {
return (
<FormDialog
open={open}
onOpenChange={onOpenChange}
title="Edit Pengumpulan"
action={editing ? update([assignmentId, editing.id]) : ''}
resetOnSuccess
onSuccess={() => onOpenChange(false)}
>
{({ errors }) =>
editing && (
<div className="grid gap-4">
<div className="grid gap-2">
<Label>Mahasiswa</Label>
<p className="text-sm font-medium">
{editing.student?.user?.profile?.full_name ??
'N/A'}{' '}
- {editing.student?.student_number}
</p>
</div>
<SubmissionFields errors={errors} editing={editing} />
</div>
)
}
</FormDialog>
);
}
function SubmissionFields({
errors,
editing,
resetKey,
}: {
errors: Record<string, string>;
editing?: Submission;
resetKey?: string;
}) {
return (
<>
<div className="grid gap-2">
<Label htmlFor="notes">Catatan</Label>
<Textarea
id="notes"
name="notes"
placeholder="Catatan dari mahasiswa"
defaultValue={editing?.notes ?? ''}
/>
<InputError message={errors.notes} />
</div>
<div className="grid gap-2">
<Label>
Status <span className="text-destructive">*</span>
</Label>
<input type="hidden" name="status" />
<Select
name="status"
defaultValue={editing?.status ?? 'not_submitted'}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Pilih status" />
</SelectTrigger>
<SelectContent>
{SubmissionStatuses.map((status) => (
<SelectItem key={status} value={status}>
{SubmissionStatusLabels[status]}
</SelectItem>
))}
</SelectContent>
</Select>
<InputError message={errors.status} />
</div>
<DateTimeField
label="Waktu Kumpul"
name="submitted_at"
defaultValue={editing?.submitted_at}
placeholder="Pilih waktu kumpul"
error={errors.submitted_at}
/>
<div className="grid gap-2">
<Label htmlFor="score">Nilai</Label>
<Input
id="score"
name="score"
type="number"
min={0}
max={100}
step="0.01"
placeholder="0 - 100"
defaultValue={editing?.score ?? undefined}
/>
<InputError message={errors.score} />
</div>
<div className="grid gap-2">
<Label htmlFor="lecturer_feedback">Feedback Dosen</Label>
<Textarea
id="lecturer_feedback"
name="lecturer_feedback"
placeholder="Masukkan feedback untuk mahasiswa"
defaultValue={editing?.lecturer_feedback ?? ''}
/>
<InputError message={errors.lecturer_feedback} />
</div>
<FileUploadField
key={resetKey}
label="File Pengumpulan"
existingFileName={editing?.file_name}
existingFileUrl={editing?.file_url}
error={errors.file}
/>
</>
);
}

View File

@ -1,3 +1,12 @@
export const AssignmentStatuses = ['open', 'closed'] as const;
export type AssignmentStatus = (typeof AssignmentStatuses)[number];
export const AssignmentStatusLabels: Record<AssignmentStatus, string> = {
open: 'Dibuka',
closed: 'Ditutup',
};
export type MySubmission = {
id: number;
notes: string | null;
@ -13,13 +22,24 @@ export type Assignment = {
course_class: {
id: number;
course: { id: number; code: string; name: string } | null;
academic_term: {
id: number;
academic_year: string;
semester: string;
} | null;
/** Total students enrolled (approved) in this class. */
enrollments_count: number;
} | null;
title: string;
description: string | null;
deadline: string;
/** Governs whether students can still submit — independent of the deadline. */
status: AssignmentStatus;
attachment_url: string | null;
attachment_name: string | null;
submissions_count: number;
/** How many of the submissions received already have a score. */
graded_submissions_count: number;
/** Only present for the logged-in mahasiswa: their own submission, if any. */
submissions?: MySubmission[];
created_at: string;

View File

@ -68,9 +68,7 @@
Route::prefix('assignments/{assignment}/submissions')->name('assignments.submissions.')->group(function () {
Route::get('/', [SubmissionController::class, 'index'])->name('index')->middleware('permission:view-assignment-submissions');
Route::post('/', [SubmissionController::class, 'store'])->name('store')->middleware('permission:create-assignment-submissions');
Route::put('{submission}', [SubmissionController::class, 'update'])->name('update')->middleware('permission:update-assignment-submissions');
Route::delete('{submission}', [SubmissionController::class, 'destroy'])->name('destroy')->middleware('permission:delete-assignment-submissions');
Route::patch('{submission}/grade', [SubmissionController::class, 'grade'])->name('grade')->middleware('permission:update-assignment-submissions');
});
Route::post('assignments/{assignment}/submit', [SubmissionController::class, 'submit'])