feat: implement attendance management features including user-specific views and permissions

app/Http/Controllers/Admin/AcademicClasses/AttendanceController.php

@@ -6,8 +6,9 @@
 use App\Http\Requests\Admin\AcademicClasses\AttendanceStoreRequest;
 use App\Models\CourseClass;
 use App\Services\Admin\AcademicClasses\AttendanceService;
-use App\Services\Admin\Manage\CourseClassService;
+use App\Services\Admin\Master\AcademicTermService;
 use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -15,19 +16,52 @@ class AttendanceController extends Controller
 {
     public function __construct(
         private readonly AttendanceService $service,
-        private readonly CourseClassService $courseClassService,
+        private readonly AcademicTermService $academicTermService,
     ) {}
 
-    public function index(): Response
+    public function index(Request $request): Response
     {
+        $academicTermId = $request->has('academic_term_id')
+            ? $request->integer('academic_term_id')
+            : $this->academicTermService->getActive()?->id;
+
         return Inertia::render('admin/academic-classes/attendances/index', [
-            'sessions' => $this->service->sessions(),
+            'courseClasses' => $this->service->courseClassesForUser($request->user(), $academicTermId),
-            'courseClasses' => $this->courseClassService->getAllForSelect(),
+            'academicTerms' => $this->academicTermService->getAllForSelect(),
+            'filters' => [
+                'academic_term_id' => $academicTermId ? (string) $academicTermId : null,
+            ],
+        ]);
+    }
+
+    public function mine(Request $request): Response
+    {
+        $student = $request->user()->student;
+
+        abort_if(! $student, 403);
+
+        return Inertia::render('admin/academic-classes/attendances/mine', [
+            'summaries' => $this->service->forStudent($student),
+        ]);
+    }
+
+    public function show(CourseClass $courseClass): Response
+    {
+        $this->abortUnlessLecturerOwnsClass($courseClass);
+
+        $courseClass->load(['course', 'academicTerm']);
+
+        return Inertia::render('admin/academic-classes/attendances/course-class', [
+            'courseClass' => $courseClass,
+            'sessions' => $this->service->sessionsForClass($courseClass),
+            'nextMeetingNumber' => $this->service->nextMeetingNumber($courseClass),
         ]);
     }
 
     public function session(CourseClass $courseClass, int $meetingNumber): Response
     {
+        $this->abortUnlessLecturerOwnsClass($courseClass);
+
         $courseClass->load('course');
         $data = $this->service->session($courseClass, $meetingNumber);
 
@@ -50,10 +84,25 @@ public function store(AttendanceStoreRequest $request, CourseClass $courseClass,
 
     public function destroy(CourseClass $courseClass, int $meetingNumber): RedirectResponse
     {
+        $this->abortUnlessLecturerOwnsClass($courseClass);
+
         $this->service->deleteSession($courseClass->id, $meetingNumber);
 
         Inertia::flash('toast', ['type' => 'success', 'message' => 'Sesi kehadiran berhasil dihapus.']);
 
-        return to_route('admin.academic-classes.attendances.index');
+        return to_route('admin.academic-classes.attendances.show', [$courseClass->id]);
+    }
+
+    /**
+     * A dosen may only take or manage attendance for classes they lecture.
+     */
+    private function abortUnlessLecturerOwnsClass(CourseClass $courseClass): void
+    {
+        $user = request()->user();
+
+        abort_if(
+            $user->hasRole('dosen') && $courseClass->lecturer_id !== $user->lecturer?->id,
+            403,
+        );
     }
 }

app/Http/Requests/Admin/AcademicClasses/AttendanceStoreRequest.php

@@ -10,7 +10,18 @@ class AttendanceStoreRequest extends FormRequest
 {
     public function authorize(): bool
     {
-        return $this->user()->can('create-attendances');
+        if (! $this->user()->can('create-attendances')) {
+            return false;
+        }
+
+        $user = $this->user();
+        $courseClass = $this->route('course_class');
+
+        if ($user->hasRole('dosen') && $courseClass?->lecturer_id !== $user->lecturer?->id) {
+            return false;
+        }
+
+        return true;
     }
 
     public function rules(): array

app/Services/Admin/AcademicClasses/AttendanceService.php

@@ -5,22 +5,60 @@
 use App\Enums\AttendanceStatus;
 use App\Models\Attendance;
 use App\Models\CourseClass;
+use App\Models\Student;
+use App\Models\User;
 use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Support\Collection as BaseCollection;
 
 class AttendanceService
 {
-    public function sessions(): Collection
+    /**
+     * Classes to show on the attendance overview: a dosen only sees classes
+     * they lecture, optionally narrowed down to one academic term.
+     */
+    public function courseClassesForUser(User $user, ?int $academicTermId): Collection
+    {
+        return CourseClass::query()
+            ->select(['course_classes.id', 'course_classes.course_id', 'course_classes.lecturer_id', 'course_classes.academic_term_id'])
+            ->withCount('enrollments')
+            ->with([
+                'course:id,code,name',
+                'academicTerm:id,academic_year,semester,start_date,end_date',
+                'attendances' => fn ($q) => $q->select('course_class_id', 'meeting_number')->distinct(),
+            ])
+            ->when($user->hasRole('dosen'), fn ($q) => $q->where('lecturer_id', $user->lecturer?->id))
+            ->when($academicTermId, fn ($q) => $q->where('academic_term_id', $academicTermId))
+            ->orderBy('course_id')
+            ->get()
+            ->each(function (CourseClass $courseClass) {
+                $courseClass->setAttribute('meetings_count', $courseClass->attendances->count());
+                $courseClass->unsetRelation('attendances');
+            });
+    }
+
+    /**
+     * Every meeting recorded so far for a single class.
+     */
+    public function sessionsForClass(CourseClass $courseClass): Collection
     {
         return Attendance::query()
-            ->select(['course_class_id', 'meeting_number', 'date'])
+            ->select(['meeting_number', 'date'])
             ->selectRaw('COUNT(*) as total_count')
             ->selectRaw("SUM(CASE WHEN status = 'present' THEN 1 ELSE 0 END) as present_count")
-            ->with('courseClass.course:id,code,name')
+            ->where('course_class_id', $courseClass->id)
-            ->groupBy('course_class_id', 'meeting_number', 'date')
+            ->groupBy('meeting_number', 'date')
-            ->orderByDesc('date')
+            ->orderByDesc('meeting_number')
             ->get();
     }
 
+    /**
+     * The meeting number a new session for this class should default to.
+     */
+    public function nextMeetingNumber(CourseClass $courseClass): int
+    {
+        return (Attendance::query()->where('course_class_id', $courseClass->id)->max('meeting_number') ?? 0) + 1;
+    }
+
     public function session(CourseClass $courseClass, int $meetingNumber): array
     {
         $existing = Attendance::query()
@@ -74,4 +112,36 @@ public function deleteSession(int $courseClassId, int $meetingNumber): void
             ->where('meeting_number', $meetingNumber)
             ->delete();
     }
+
+    /**
+     * Per-class attendance summary for a student's own classes: every class
+     * they're enrolled in, with their recorded meetings and a present/total
+     * tally, even for classes with no attendance taken yet.
+     */
+    public function forStudent(Student $student): BaseCollection
+    {
+        $enrollments = $student->enrollments()
+            ->with([
+                'courseClass.course:id,code,name',
+                'courseClass.academicTerm:id,academic_year,semester,start_date,end_date',
+            ])
+            ->get();
+
+        $recordsByClass = Attendance::query()
+            ->where('student_id', $student->id)
+            ->orderBy('meeting_number')
+            ->get(['course_class_id', 'meeting_number', 'date', 'status'])
+            ->groupBy('course_class_id');
+
+        return $enrollments->map(function ($enrollment) use ($recordsByClass) {
+            $records = $recordsByClass->get($enrollment->course_class_id, new Collection);
+
+            return [
+                'course_class' => $enrollment->courseClass,
+                'records' => $records->values(),
+                'present_count' => $records->where('status', AttendanceStatus::Present)->count(),
+                'total_count' => $records->count(),
+            ];
+        })->values();
+    }
 }

app/Support/PermissionCatalog.php

@@ -18,7 +18,7 @@ class PermissionCatalog
         'view-assignment-submissions', 'update-assignment-submissions',
         'submit-assignments',
         'view-schedules', 'create-schedules', 'update-schedules', 'delete-schedules',
-        'view-attendances', 'create-attendances', 'delete-attendances',
+        'view-attendances', 'create-attendances', 'delete-attendances', 'view-own-attendances',
     ];
 
     public const MANAGE = [

database/seeders/RolePermissionSeeder.php

@@ -50,6 +50,7 @@ public function run(): void
                 'view-materials',
                 'view-assignments',
                 'submit-assignments',
+                'view-own-attendances',
                 ...$feedbackSelfService,
             ],
             'dosen' => [
@@ -71,6 +72,9 @@ public function run(): void
                 'delete-assignments',
                 'view-assignment-submissions',
                 'update-assignment-submissions',
+                'view-attendances',
+                'create-attendances',
+                'delete-attendances',
                 ...$feedbackSelfService,
             ],
             'staff-admin' => [

resources/js/components/app-sidebar.tsx

@@ -36,7 +36,10 @@ import {
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
 import { index as assignmentsRoute } from '@/routes/admin/academic-classes/assignments';
-import { index as attendancesRoute } from '@/routes/admin/academic-classes/attendances';
+import {
+    index as attendancesRoute,
+    mine as myAttendancesRoute,
+} from '@/routes/admin/academic-classes/attendances';
 import { index as materialsRoute } from '@/routes/admin/academic-classes/materials';
 import { index as schedulesRoute } from '@/routes/admin/academic-classes/schedules';
 import { index as logsRoute } from '@/routes/admin/developer/logs';
@@ -172,6 +175,15 @@ function buildNavMain({
                   },
               ]
             : []),
+        ...(can('view-own-attendances')
+            ? [
+                  {
+                      name: 'Riwayat Kehadiran',
+                      url: myAttendancesRoute.url(),
+                      icon: ClipboardCheck,
+                  },
+              ]
+            : []),
     ];
 
     const keuanganItems: NavItem[] = [

resources/js/pages/admin/academic-classes/attendances/course-class.tsx

@@ -0,0 +1,255 @@
+import { Head, Link, router } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { ArrowLeft, ClipboardCheck, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
+import { PageHeader } from '@/components/page-header';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { usePermissions } from '@/hooks/use-permissions';
+import {
+    destroy,
+    index as attendanceIndex,
+    session,
+} from '@/routes/admin/academic-classes/attendances';
+import { formatAcademicTermLabel } from '@/types/academic-term';
+import type {
+    AttendanceCourseClass,
+    AttendanceSession,
+} from '@/types/attendance';
+
+type Props = {
+    courseClass: AttendanceCourseClass;
+    sessions: AttendanceSession[];
+    nextMeetingNumber: number;
+};
+
+function courseClassLabel(courseClass: AttendanceCourseClass): string {
+    return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
+}
+
+export default function AttendanceCourseClass({
+    courseClass,
+    sessions,
+    nextMeetingNumber,
+}: Props) {
+    const [newSessionOpen, setNewSessionOpen] = useState(false);
+    const [deleting, setDeleting] = useState<AttendanceSession | null>(null);
+    const { hasPermission } = usePermissions();
+    const canCreate = hasPermission('create-attendances');
+    const canDelete = hasPermission('delete-attendances');
+
+    function handleDelete() {
+        if (!deleting) {
+            return;
+        }
+
+        router.delete(destroy([courseClass.id, deleting.meeting_number]).url, {
+            onSuccess: () => setDeleting(null),
+        });
+    }
+
+    return (
+        <>
+            <Head title="Kehadiran" />
+
+            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
+                <PageHeader
+                    title={courseClassLabel(courseClass)}
+                    description={
+                        courseClass.academic_term && (
+                            <Badge variant="outline" className="mt-1 w-fit">
+                                {formatAcademicTermLabel(
+                                    courseClass.academic_term,
+                                )}
+                            </Badge>
+                        )
+                    }
+                    actions={
+                        <div className="flex items-center gap-2">
+                            <Button variant="outline" asChild>
+                                <Link href={attendanceIndex.url()}>
+                                    <ArrowLeft className="h-4 w-4" />
+                                    Kembali
+                                </Link>
+                            </Button>
+                            {canCreate && (
+                                <Button onClick={() => setNewSessionOpen(true)}>
+                                    <Plus className="h-4 w-4" />
+                                    Tambah Pertemuan
+                                </Button>
+                            )}
+                        </div>
+                    }
+                />
+
+                {sessions.length === 0 ? (
+                    <p className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
+                        Belum ada pertemuan yang tercatat.
+                    </p>
+                ) : (
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                        {sessions.map((item) => (
+                            <Card key={item.meeting_number}>
+                                <CardHeader className="flex flex-row items-start justify-between gap-2">
+                                    <CardTitle className="text-sm leading-tight">
+                                        Pertemuan ke-{item.meeting_number}
+                                    </CardTitle>
+                                    <Badge variant="secondary">
+                                        {item.present_count}/{item.total_count}{' '}
+                                        Hadir
+                                    </Badge>
+                                </CardHeader>
+                                <CardContent className="flex flex-col gap-2">
+                                    <p className="text-xs text-muted-foreground">
+                                        {format(
+                                            new Date(item.date),
+                                            'd MMM yyyy',
+                                        )}
+                                    </p>
+                                    <div className="flex items-center gap-2">
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            asChild
+                                        >
+                                            <Link
+                                                href={
+                                                    session([
+                                                        courseClass.id,
+                                                        item.meeting_number,
+                                                    ]).url
+                                                }
+                                            >
+                                                <Pencil className="h-4 w-4" />
+                                                Lihat / Edit
+                                            </Link>
+                                        </Button>
+                                        {canDelete && (
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() =>
+                                                    setDeleting(item)
+                                                }
+                                            >
+                                                <Trash2 className="h-4 w-4 text-destructive" />
+                                            </Button>
+                                        )}
+                                    </div>
+                                </CardContent>
+                            </Card>
+                        ))}
+                    </div>
+                )}
+
+                <NewSessionDialog
+                    open={newSessionOpen}
+                    onOpenChange={setNewSessionOpen}
+                    courseClassId={courseClass.id}
+                    defaultMeetingNumber={nextMeetingNumber}
+                />
+
+                <DeleteConfirmDialog
+                    target={deleting}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            setDeleting(null);
+                        }
+                    }}
+                    title="Hapus Sesi Kehadiran"
+                    description={(item) =>
+                        `Apakah Anda yakin ingin menghapus seluruh data kehadiran pertemuan ke-${item.meeting_number}? Tindakan ini tidak dapat dibatalkan.`
+                    }
+                    onConfirm={handleDelete}
+                />
+            </div>
+        </>
+    );
+}
+
+function NewSessionDialog({
+    open,
+    onOpenChange,
+    courseClassId,
+    defaultMeetingNumber,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    courseClassId: number;
+    defaultMeetingNumber: number;
+}) {
+    const [meetingNumber, setMeetingNumber] = useState(
+        String(defaultMeetingNumber),
+    );
+
+    function handleOpenSession() {
+        if (!meetingNumber) {
+            return;
+        }
+
+        router.get(session([courseClassId, Number(meetingNumber)]).url);
+    }
+
+    return (
+        <Dialog
+            open={open}
+            onOpenChange={(value) => {
+                onOpenChange(value);
+
+                if (!value) {
+                    setMeetingNumber(String(defaultMeetingNumber));
+                }
+            }}
+        >
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Tambah Pertemuan</DialogTitle>
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                        <Label htmlFor="meeting_number">
+                            Pertemuan Ke-{' '}
+                            <span className="text-destructive">*</span>
+                        </Label>
+                        <Input
+                            id="meeting_number"
+                            type="number"
+                            min={1}
+                            value={meetingNumber}
+                            onChange={(e) => setMeetingNumber(e.target.value)}
+                            autoFocus
+                        />
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => onOpenChange(false)}
+                    >
+                        Batal
+                    </Button>
+                    <Button
+                        type="button"
+                        disabled={!meetingNumber}
+                        onClick={handleOpenSession}
+                    >
+                        <ClipboardCheck className="h-4 w-4" />
+                        Buka Kehadiran
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

resources/js/pages/admin/academic-classes/attendances/index.tsx

@@ -1,60 +1,73 @@
-import { Head, Link, router } from '@inertiajs/react';
+import { Head, Link } from '@inertiajs/react';
-import { format } from 'date-fns';
+import type { FilterField } from '@/components/filter-dialog';
-import { ClipboardCheck, Pencil, Plus, Trash2, X } from 'lucide-react';
+import { FilterDialog } from '@/components/filter-dialog';
-import { useState } from 'react';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
 import { PageHeader } from '@/components/page-header';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useServerTable } from '@/hooks/use-server-table';
 import {
-    Dialog,
+    index as attendanceIndex,
-    DialogContent,
+    show,
-    DialogFooter,
+} from '@/routes/admin/academic-classes/attendances';
-    DialogHeader,
+import { formatAcademicTermLabel } from '@/types/academic-term';
-    DialogTitle,
+import type { AttendanceCourseClassOverview } from '@/types/attendance';
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
-import { usePermissions } from '@/hooks/use-permissions';
-import { destroy, session } from '@/routes/admin/academic-classes/attendances';
-import type {
-    AttendanceCourseClass,
-    AttendanceSession,
-} from '@/types/attendance';
 
-type Props = {
+type AcademicTermOption = {
-    sessions: AttendanceSession[];
+    id: number;
-    courseClasses: AttendanceCourseClass[];
+    academic_year: string;
+    semester: string;
 };
 
-function courseClassLabel(courseClass: AttendanceCourseClass): string {
+type Props = {
+    courseClasses: AttendanceCourseClassOverview[];
+    academicTerms: AcademicTermOption[];
+    filters: {
+        academic_term_id?: string;
+    };
+};
+
+function courseClassLabel(courseClass: AttendanceCourseClassOverview): string {
     return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
 }
 
-export default function AttendanceIndex({ sessions, courseClasses }: Props) {
+export default function AttendanceIndex({
-    const [newSessionOpen, setNewSessionOpen] = useState(false);
+    courseClasses,
-    const [deleting, setDeleting] = useState<AttendanceSession | null>(null);
+    academicTerms,
-    const { hasPermission } = usePermissions();
+    filters,
-    const canCreate = hasPermission('create-attendances');
+}: Props) {
-    const canDelete = hasPermission('delete-attendances');
+    const filterFields: FilterField[] = [
+        {
+            key: 'academic_term_id',
+            label: 'Periode Akademik',
+            options: academicTerms.map((term) => ({
+                value: String(term.id),
+                label: formatAcademicTermLabel(term),
+            })),
+        },
+    ];
 
-    function handleDelete() {
+    const { applyFilters } = useServerTable({
-        if (!deleting || deleting.meeting_number === null) {
+        route: () => attendanceIndex.url(),
-            return;
+        pagination: {
-        }
+            current_page: 1,
+            last_page: 1,
+            per_page: 999999,
+            total: courseClasses.length,
+        },
+        filters,
+    });
 
-        router.delete(
+    function handleApplyFilters(newFilters: Record<string, string>) {
-            destroy([deleting.course_class_id, deleting.meeting_number]).url,
+        // Tanpa `academic_term_id` eksplisit, backend akan kembali ke
-            { onSuccess: () => setDeleting(null) },
+        // 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: '' } : {}),
+        });
     }
 
     return (
@@ -65,218 +78,65 @@ export default function AttendanceIndex({ sessions, courseClasses }: Props) {
                 <PageHeader
                     title="Kehadiran"
                     actions={
-                        canCreate && (
+                        <FilterDialog
-                            <Button onClick={() => setNewSessionOpen(true)}>
+                            fields={filterFields}
-                                <Plus className="h-4 w-4" />
+                            activeFilters={filters}
-                                Ambil Kehadiran
+                            onApply={handleApplyFilters}
-                            </Button>
+                        />
-                        )
                     }
                 />
 
-                {sessions.length === 0 ? (
+                {courseClasses.length === 0 ? (
-                    <p className="text-sm text-muted-foreground">
+                    <p className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
-                        Belum ada data kehadiran.
+                        Tidak ada kelas untuk periode ini.
                     </p>
                 ) : (
-                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
-                        {sessions.map((item) => {
+                        {courseClasses.map((courseClass) => (
-                            const key = `${item.course_class_id}-${item.meeting_number}-${item.date}`;
+                            <Link
-                            const canOpen = item.meeting_number !== null;
+                                key={courseClass.id}
-
+                                href={show(courseClass.id).url}
-                            return (
+                            >
-                                <Card key={key}>
+                                <Card className="h-full transition-colors hover:border-primary">
-                                    <CardHeader className="flex flex-row items-start justify-between gap-2">
+                                    <CardHeader>
-                                        <CardTitle className="text-sm leading-tight">
+                                        <CardTitle className="text-base leading-tight">
-                                            {item.course_class
+                                            {courseClassLabel(courseClass)}
-                                                ? courseClassLabel(
-                                                      item.course_class,
-                                                  )
-                                                : '-'}
                                         </CardTitle>
-                                        <Badge variant="secondary">
-                                            {item.present_count}/
-                                            {item.total_count} Hadir
-                                        </Badge>
                                     </CardHeader>
                                     <CardContent className="flex flex-col gap-2">
-                                        <p className="text-xs text-muted-foreground">
+                                        <div className="flex flex-wrap items-center gap-1.5">
-                                            Pertemuan ke-
+                                            <Badge
-                                            {item.meeting_number ?? '-'}{' '}
+                                                variant="secondary"
-                                            &middot;{' '}
+                                                className="w-fit text-[10px] font-normal"
-                                            {format(
-                                                new Date(item.date),
-                                                'd MMM yyyy',
-                                            )}
-                                        </p>
-                                        <div className="flex items-center gap-2">
-                                            <Button
-                                                variant="outline"
-                                                size="sm"
-                                                asChild
-                                                disabled={!canOpen}
                                             >
-                                                {canOpen ? (
+                                                {courseClass.meetings_count}{' '}
-                                                    <Link
+                                                Pertemuan
-                                                        href={
+                                            </Badge>
-                                                            session([
+                                            <Badge
-                                                                item.course_class_id,
+                                                variant="outline"
-                                                                item.meeting_number as number,
+                                                className="w-fit text-[10px] font-normal"
-                                                            ]).url
+                                            >
-                                                        }
+                                                {courseClass.enrollments_count}{' '}
-                                                    >
+                                                Mahasiswa
-                                                        <Pencil className="h-4 w-4" />
+                                            </Badge>
-                                                        Lihat / Edit
+                                            {courseClass.academic_term && (
-                                                    </Link>
+                                                <Badge
-                                                ) : (
+                                                    variant="outline"
-                                                    <span>
+                                                    className="w-fit text-[10px] font-normal"
-                                                        <Pencil className="h-4 w-4" />
-                                                        Lihat / Edit
-                                                    </span>
-                                                )}
-                                            </Button>
-                                            {canDelete && (
-                                                <Button
-                                                    variant="ghost"
-                                                    size="sm"
-                                                    disabled={!canOpen}
-                                                    onClick={() =>
-                                                        setDeleting(item)
-                                                    }
                                                 >
-                                                    <Trash2 className="h-4 w-4 text-destructive" />
+                                                    {formatAcademicTermLabel(
-                                                </Button>
+                                                        courseClass.academic_term,
+                                                    )}
+                                                </Badge>
                                             )}
                                         </div>
                                     </CardContent>
                                 </Card>
-                            );
+                            </Link>
-                        })}
+                        ))}
                     </div>
                 )}
-
-                <NewSessionDialog
-                    open={newSessionOpen}
-                    onOpenChange={setNewSessionOpen}
-                    courseClasses={courseClasses}
-                />
-
-                <DeleteConfirmDialog
-                    target={deleting}
-                    onOpenChange={(open) => {
-                        if (!open) {
-                            setDeleting(null);
-                        }
-                    }}
-                    title="Hapus Sesi Kehadiran"
-                    description={(item) =>
-                        `Apakah Anda yakin ingin menghapus seluruh data kehadiran pertemuan ke-${item.meeting_number} untuk kelas ini? Tindakan ini tidak dapat dibatalkan.`
-                    }
-                    onConfirm={handleDelete}
-                />
             </div>
         </>
     );
 }
-
-function NewSessionDialog({
-    open,
-    onOpenChange,
-    courseClasses,
-}: {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    courseClasses: AttendanceCourseClass[];
-}) {
-    const [courseClassId, setCourseClassId] = useState('');
-    const [meetingNumber, setMeetingNumber] = useState('');
-
-    function reset() {
-        setCourseClassId('');
-        setMeetingNumber('');
-    }
-
-    function handleOpenSession() {
-        if (!courseClassId || !meetingNumber) {
-            return;
-        }
-
-        router.get(session([Number(courseClassId), Number(meetingNumber)]).url);
-    }
-
-    return (
-        <Dialog
-            open={open}
-            onOpenChange={(value) => {
-                onOpenChange(value);
-
-                if (!value) {
-                    reset();
-                }
-            }}
-        >
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Ambil Kehadiran</DialogTitle>
-                </DialogHeader>
-                <div className="grid gap-4 py-4">
-                    <div className="grid gap-2">
-                        <Label>
-                            Kelas <span className="text-destructive">*</span>
-                        </Label>
-                        <Select
-                            value={courseClassId}
-                            onValueChange={setCourseClassId}
-                        >
-                            <SelectTrigger className="w-full">
-                                <SelectValue placeholder="Pilih kelas" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {courseClasses.map((courseClass) => (
-                                    <SelectItem
-                                        key={courseClass.id}
-                                        value={String(courseClass.id)}
-                                    >
-                                        {courseClassLabel(courseClass)}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="meeting_number">
-                            Pertemuan Ke-{' '}
-                            <span className="text-destructive">*</span>
-                        </Label>
-                        <Input
-                            id="meeting_number"
-                            type="number"
-                            min={1}
-                            placeholder="Contoh: 1"
-                            value={meetingNumber}
-                            onChange={(e) => setMeetingNumber(e.target.value)}
-                        />
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        onClick={() => onOpenChange(false)}
-                    >
-                        <X className="h-4 w-4" />
-                        Batal
-                    </Button>
-                    <Button
-                        type="button"
-                        disabled={!courseClassId || !meetingNumber}
-                        onClick={handleOpenSession}
-                    >
-                        <ClipboardCheck className="h-4 w-4" />
-                        Buka Kehadiran
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}

resources/js/pages/admin/academic-classes/attendances/mine.tsx

@@ -0,0 +1,150 @@
+import { Head } from '@inertiajs/react';
+import { format } from 'date-fns';
+import { PageHeader } from '@/components/page-header';
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { formatAcademicTermLabel } from '@/types/academic-term';
+import type { AttendanceClassSummary } from '@/types/attendance';
+import { AttendanceStatusLabels } from '@/types/attendance';
+
+type Props = {
+    summaries: AttendanceClassSummary[];
+};
+
+function courseClassLabel(
+    courseClass: AttendanceClassSummary['course_class'],
+): string {
+    return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
+}
+
+function percentageOf(part: number, total: number): number {
+    return total > 0 ? Math.round((part / total) * 100) : 0;
+}
+
+export default function MyAttendance({ summaries }: Props) {
+    return (
+        <>
+            <Head title="Riwayat Kehadiran" />
+
+            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
+                <PageHeader title="Riwayat Kehadiran" />
+
+                {summaries.length === 0 ? (
+                    <p className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
+                        Belum ada kelas yang terdaftar.
+                    </p>
+                ) : (
+                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+                        {summaries.map((summary) => (
+                            <Card key={summary.course_class.id}>
+                                <CardHeader>
+                                    <CardTitle className="text-base leading-tight">
+                                        {courseClassLabel(summary.course_class)}
+                                    </CardTitle>
+                                </CardHeader>
+                                <CardContent className="flex flex-col gap-2">
+                                    <div className="flex flex-wrap items-center gap-1.5">
+                                        <Badge
+                                            variant={
+                                                percentageOf(
+                                                    summary.present_count,
+                                                    summary.total_count,
+                                                ) >= 75
+                                                    ? 'secondary'
+                                                    : 'destructive'
+                                            }
+                                            className="w-fit text-[10px] font-normal"
+                                        >
+                                            Hadir {summary.present_count} /{' '}
+                                            {summary.total_count} (
+                                            {percentageOf(
+                                                summary.present_count,
+                                                summary.total_count,
+                                            )}
+                                            %)
+                                        </Badge>
+                                        {summary.course_class.academic_term && (
+                                            <Badge
+                                                variant="outline"
+                                                className="w-fit text-[10px] font-normal"
+                                            >
+                                                {formatAcademicTermLabel(
+                                                    summary.course_class
+                                                        .academic_term,
+                                                )}
+                                            </Badge>
+                                        )}
+                                    </div>
+
+                                    {summary.records.length > 0 && (
+                                        <Accordion
+                                            type="single"
+                                            collapsible
+                                            className="-mx-6 -mb-6 border-t"
+                                        >
+                                            <AccordionItem
+                                                value="records"
+                                                className="border-b-0"
+                                            >
+                                                <AccordionTrigger className="px-6 text-xs font-medium text-foreground hover:no-underline">
+                                                    Detail Pertemuan
+                                                </AccordionTrigger>
+                                                <AccordionContent className="px-6">
+                                                    <div className="flex flex-col divide-y">
+                                                        {summary.records.map(
+                                                            (record) => (
+                                                                <div
+                                                                    key={`${record.course_class_id}-${record.meeting_number}`}
+                                                                    className="flex items-center justify-between gap-2 py-2 text-sm"
+                                                                >
+                                                                    <span className="text-muted-foreground">
+                                                                        Pertemuan
+                                                                        ke-
+                                                                        {record.meeting_number ??
+                                                                            '-'}{' '}
+                                                                        &middot;{' '}
+                                                                        {format(
+                                                                            new Date(
+                                                                                record.date,
+                                                                            ),
+                                                                            'd MMM yyyy',
+                                                                        )}
+                                                                    </span>
+                                                                    <Badge
+                                                                        variant={
+                                                                            record.status ===
+                                                                            'present'
+                                                                                ? 'default'
+                                                                                : 'secondary'
+                                                                        }
+                                                                    >
+                                                                        {
+                                                                            AttendanceStatusLabels[
+                                                                                record
+                                                                                    .status
+                                                                            ]
+                                                                        }
+                                                                    </Badge>
+                                                                </div>
+                                                            ),
+                                                        )}
+                                                    </div>
+                                                </AccordionContent>
+                                            </AccordionItem>
+                                        </Accordion>
+                                    )}
+                                </CardContent>
+                            </Card>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </>
+    );
+}

resources/js/pages/admin/academic-classes/attendances/session.tsx

@@ -8,10 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { usePermissions } from '@/hooks/use-permissions';
-import {
+import { show, store } from '@/routes/admin/academic-classes/attendances';
-    index as attendanceIndex,
-    store,
-} from '@/routes/admin/academic-classes/attendances';
 import type {
     AttendanceCourseClass,
     AttendanceRosterEntry,
@@ -89,7 +86,7 @@ export default function AttendanceSession({
                     title="Kehadiran"
                     actions={
                         <Button variant="outline" asChild>
-                            <Link href={attendanceIndex.url()}>
+                            <Link href={show(courseClass.id).url}>
                                 <ArrowLeft className="h-4 w-4" />
                                 Kembali
                             </Link>

resources/js/types/attendance.ts

@@ -10,12 +10,20 @@ export const AttendanceStatusLabels: Record<AttendanceStatus, string> = {
 export type AttendanceCourseClass = {
     id: number;
     course: { id: number; code: string; name: string } | null;
+    academic_term?: {
+        id: number;
+        academic_year: string;
+        semester: string;
+    } | null;
+};
+
+export type AttendanceCourseClassOverview = AttendanceCourseClass & {
+    enrollments_count: number;
+    meetings_count: number;
 };
 
 export type AttendanceSession = {
-    course_class_id: number;
+    meeting_number: number;
-    course_class: AttendanceCourseClass | null;
-    meeting_number: number | null;
     date: string;
     total_count: number;
     present_count: number;
@@ -32,3 +40,17 @@ export type AttendanceRosterEntry = {
     student: AttendanceRosterStudent | null;
     status: AttendanceStatus;
 };
+
+export type AttendanceRecord = {
+    course_class_id: number;
+    meeting_number: number | null;
+    date: string;
+    status: AttendanceStatus;
+};
+
+export type AttendanceClassSummary = {
+    course_class: AttendanceCourseClass;
+    records: AttendanceRecord[];
+    present_count: number;
+    total_count: number;
+};

routes/admin.php

@@ -84,6 +84,8 @@
 
         Route::prefix('attendances')->name('attendances.')->group(function () {
             Route::get('/', [AttendanceController::class, 'index'])->name('index')->middleware('permission:view-attendances');
+            Route::get('mine', [AttendanceController::class, 'mine'])->name('mine')->middleware('permission:view-own-attendances');
+            Route::get('{course_class}', [AttendanceController::class, 'show'])->name('show')->middleware('permission:view-attendances');
             Route::get('{course_class}/{meeting_number}', [AttendanceController::class, 'session'])
                 ->whereNumber('meeting_number')
                 ->name('session')