feat: implement attendance management features including user-specific views and permissions
This commit is contained in:
Yoga Pangestu
parent
4980ad95b3
commit
88286fe596
@ -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->courseClassService->getAllForSelect(),
|
||||
'courseClasses' => $this->service->courseClassesForUser($request->user(), $academicTermId),
|
||||
'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,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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')
|
||||
->groupBy('course_class_id', 'meeting_number', 'date')
|
||||
->orderByDesc('date')
|
||||
->where('course_class_id', $courseClass->id)
|
||||
->groupBy('meeting_number', '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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = [
|
||||
|
||||
@ -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' => [
|
||||
|
||||
@ -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[] = [
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -1,60 +1,73 @@
|
||||
import { Head, Link, router } from '@inertiajs/react';
|
||||
import { format } from 'date-fns';
|
||||
import { ClipboardCheck, Pencil, Plus, Trash2, X } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import type { FilterField } from '@/components/filter-dialog';
|
||||
import { FilterDialog } from '@/components/filter-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,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} 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';
|
||||
index as attendanceIndex,
|
||||
show,
|
||||
} from '@/routes/admin/academic-classes/attendances';
|
||||
import { formatAcademicTermLabel } from '@/types/academic-term';
|
||||
import type { AttendanceCourseClassOverview } from '@/types/attendance';
|
||||
|
||||
type Props = {
|
||||
sessions: AttendanceSession[];
|
||||
courseClasses: AttendanceCourseClass[];
|
||||
type AcademicTermOption = {
|
||||
id: number;
|
||||
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) {
|
||||
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');
|
||||
export default function AttendanceIndex({
|
||||
courseClasses,
|
||||
academicTerms,
|
||||
filters,
|
||||
}: Props) {
|
||||
const filterFields: FilterField[] = [
|
||||
{
|
||||
key: 'academic_term_id',
|
||||
label: 'Periode Akademik',
|
||||
options: academicTerms.map((term) => ({
|
||||
value: String(term.id),
|
||||
label: formatAcademicTermLabel(term),
|
||||
})),
|
||||
},
|
||||
];
|
||||
|
||||
function handleDelete() {
|
||||
if (!deleting || deleting.meeting_number === null) {
|
||||
return;
|
||||
}
|
||||
const { applyFilters } = useServerTable({
|
||||
route: () => attendanceIndex.url(),
|
||||
pagination: {
|
||||
current_page: 1,
|
||||
last_page: 1,
|
||||
per_page: 999999,
|
||||
total: courseClasses.length,
|
||||
},
|
||||
filters,
|
||||
});
|
||||
|
||||
router.delete(
|
||||
destroy([deleting.course_class_id, deleting.meeting_number]).url,
|
||||
{ onSuccess: () => setDeleting(null) },
|
||||
);
|
||||
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: '' } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
@ -65,218 +78,65 @@ export default function AttendanceIndex({ sessions, courseClasses }: Props) {
|
||||
<PageHeader
|
||||
title="Kehadiran"
|
||||
actions={
|
||||
canCreate && (
|
||||
<Button onClick={() => setNewSessionOpen(true)}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Ambil Kehadiran
|
||||
</Button>
|
||||
)
|
||||
<FilterDialog
|
||||
fields={filterFields}
|
||||
activeFilters={filters}
|
||||
onApply={handleApplyFilters}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
{sessions.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Belum ada data kehadiran.
|
||||
{courseClasses.length === 0 ? (
|
||||
<p className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
|
||||
Tidak ada kelas untuk periode ini.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{sessions.map((item) => {
|
||||
const key = `${item.course_class_id}-${item.meeting_number}-${item.date}`;
|
||||
const canOpen = item.meeting_number !== null;
|
||||
|
||||
return (
|
||||
<Card key={key}>
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-2">
|
||||
<CardTitle className="text-sm leading-tight">
|
||||
{item.course_class
|
||||
? courseClassLabel(
|
||||
item.course_class,
|
||||
)
|
||||
: '-'}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{courseClasses.map((courseClass) => (
|
||||
<Link
|
||||
key={courseClass.id}
|
||||
href={show(courseClass.id).url}
|
||||
>
|
||||
<Card className="h-full transition-colors hover:border-primary">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base leading-tight">
|
||||
{courseClassLabel(courseClass)}
|
||||
</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">
|
||||
Pertemuan ke-
|
||||
{item.meeting_number ?? '-'}{' '}
|
||||
·{' '}
|
||||
{format(
|
||||
new Date(item.date),
|
||||
'd MMM yyyy',
|
||||
)}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
asChild
|
||||
disabled={!canOpen}
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="w-fit text-[10px] font-normal"
|
||||
>
|
||||
{canOpen ? (
|
||||
<Link
|
||||
href={
|
||||
session([
|
||||
item.course_class_id,
|
||||
item.meeting_number as number,
|
||||
]).url
|
||||
}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
Lihat / Edit
|
||||
</Link>
|
||||
) : (
|
||||
<span>
|
||||
<Pencil className="h-4 w-4" />
|
||||
Lihat / Edit
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
{canDelete && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={!canOpen}
|
||||
onClick={() =>
|
||||
setDeleting(item)
|
||||
}
|
||||
{courseClass.meetings_count}{' '}
|
||||
Pertemuan
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-fit text-[10px] font-normal"
|
||||
>
|
||||
{courseClass.enrollments_count}{' '}
|
||||
Mahasiswa
|
||||
</Badge>
|
||||
{courseClass.academic_term && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-fit text-[10px] font-normal"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
{formatAcademicTermLabel(
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
150
resources/js/pages/admin/academic-classes/attendances/mine.tsx
Normal file
150
resources/js/pages/admin/academic-classes/attendances/mine.tsx
Normal file
@ -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 ??
|
||||
'-'}{' '}
|
||||
·{' '}
|
||||
{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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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 {
|
||||
index as attendanceIndex,
|
||||
store,
|
||||
} from '@/routes/admin/academic-classes/attendances';
|
||||
import { show, 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>
|
||||
|
||||
@ -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;
|
||||
course_class: AttendanceCourseClass | null;
|
||||
meeting_number: number | null;
|
||||
meeting_number: number;
|
||||
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;
|
||||
};
|
||||
|
||||
@ -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')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user