itm/siakad-itm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI components with icons and improve navigation links
Some checks failed
tests / ci (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-25 23:42:14 +07:00
parent 02745ba207
commit 9626181d46
21 changed files with 124 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/components/app-sidebar.tsx
View File

@ -40,20 +40,20 @@ import {
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { index as feedbackRoute } from '@/routes/admin/feedback';
import { index as academicAdvisingLogsRoute } from '@/routes/admin/services/academic-advising-logs';
import { index as announcementsRoute } from '@/routes/admin/announcements';
import { index as assignmentsRoute } from '@/routes/admin/academic-classes/assignments';
import { index as attendancesRoute } from '@/routes/admin/academic-classes/attendances';
import { index as courseClassesRoute } from '@/routes/admin/manage/course-classes';
import { index as courseRegistrationsRoute } from '@/routes/admin/academic-classes/course-registrations';
import { index as coursesRoute } from '@/routes/admin/manage/courses';
import { index as letterRequestsRoute } from '@/routes/admin/services/letter-requests';
import { index as materialsRoute } from '@/routes/admin/academic-classes/materials';
import { index as schedulesRoute } from '@/routes/admin/academic-classes/schedules';
import { index as announcementsRoute } from '@/routes/admin/announcements';
import { index as feedbackRoute } from '@/routes/admin/feedback';
import { index as tuitionInvoicesRoute } from '@/routes/admin/finances/tuition-invoices';
import { index as courseClassesRoute } from '@/routes/admin/manage/course-classes';
import { index as coursesRoute } from '@/routes/admin/manage/courses';
import { index as academicTerm } from '@/routes/admin/master/academic-terms';
import { index as departmentsRoute } from '@/routes/admin/master/departments';
import { index as academicAdvisingLogsRoute } from '@/routes/admin/services/academic-advising-logs';
import { index as letterRequestsRoute } from '@/routes/admin/services/letter-requests';
import { edit as appearanceRoute } from '@/routes/admin/settings/appearance';
import { edit as profileRoute } from '@/routes/admin/settings/profile';
import { edit as securityRoute } from '@/routes/admin/settings/security';

14
resources/js/components/confirm-dialog.tsx
View File

@ -1,3 +1,5 @@
import { Check, Trash2, X } from 'lucide-react';
import type { ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import {
Dialog,
@ -14,6 +16,7 @@ type ConfirmDialogProps = {
title: string;
description: string;
confirmLabel?: string;
confirmIcon?: ReactNode;
cancelLabel?: string;
variant?: 'default' | 'destructive';
onConfirm: () => void;
@ -26,11 +29,20 @@ export function ConfirmDialog({
title,
description,
confirmLabel = 'Konfirmasi',
confirmIcon,
cancelLabel = 'Batal',
variant = 'destructive',
onConfirm,
loading = false,
}: ConfirmDialogProps) {
const icon =
confirmIcon ??
(variant === 'destructive' ? (
<Trash2 className="h-4 w-4" />
) : (
<Check className="h-4 w-4" />
));
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
@ -43,6 +55,7 @@ export function ConfirmDialog({
variant="outline"
onClick={() => onOpenChange(false)}
>
<X className="h-4 w-4" />
{cancelLabel}
</Button>
<Button
@ -50,6 +63,7 @@ export function ConfirmDialog({
onClick={onConfirm}
disabled={loading}
>
{icon}
{confirmLabel}
</Button>
</DialogFooter>

7
resources/js/components/form-dialog.tsx
View File

@ -1,3 +1,6 @@
import { Form } from '@inertiajs/react';
import { Save, X } from 'lucide-react';
import type { ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import {
Dialog,
@ -6,8 +9,6 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Form } from '@inertiajs/react';
import type { ReactNode } from 'react';
type FormDialogProps = {
open: boolean;
@ -63,12 +64,14 @@ export function FormDialog({
variant="outline"
onClick={() => onOpenChange(false)}
>
<X className="h-4 w-4" />
Batal
</Button>
<Button
type="submit"
disabled={processing || submitDisabled}
>
<Save className="h-4 w-4" />
{processing ? submittingLabel : submitLabel}
</Button>
</DialogFooter>

2
resources/js/components/nav-main.tsx
View File

@ -1,5 +1,6 @@
"use client"
import { Link, usePage } from "@inertiajs/react";
import {
SidebarGroup,
SidebarGroupLabel,
@ -7,7 +8,6 @@ import {
SidebarMenuButton,
SidebarMenuItem
} from "@/components/ui/sidebar";
import { Link, usePage } from "@inertiajs/react";
export type NavItem = {
name: string

2
resources/js/components/nav-secondary.tsx
View File

@ -1,7 +1,7 @@
"use client"
import type {Icon} from "@tabler/icons-react";
import * as React from "react"
import { type Icon } from "@tabler/icons-react"
import {
SidebarGroup,

7
resources/js/pages/admin/academic-classes/assignments/submissions.tsx
View File

@ -1,7 +1,7 @@
import { Head, router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { Pencil, Plus, Trash2 } from 'lucide-react';
import { ArrowLeft, Pencil, Plus, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { DataTable } from '@/components/data-table';
import { DateTimeField } from '@/components/datetime-field';
@ -161,7 +161,10 @@ export default function SubmissionIndex({
title="Pengumpulan Tugas"
actions={
<Button variant="outline" asChild>
<a href={assignmentIndex.url()}>Kembali</a>
<a href={assignmentIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>

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

@ -1,6 +1,6 @@
import { Head, Link, router } from '@inertiajs/react';
import { format } from 'date-fns';
import { ClipboardCheck, Plus, Trash2 } from 'lucide-react';
import { ClipboardCheck, Pencil, Plus, Trash2, X } from 'lucide-react';
import { useState } from 'react';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { PageHeader } from '@/components/page-header';
@ -123,10 +123,14 @@ export default function AttendanceIndex({ sessions, courseClasses }: Props) {
]).url
}
>
<Pencil className="h-4 w-4" />
Lihat / Edit
</Link>
) : (
<span>Lihat / Edit</span>
<span>
<Pencil className="h-4 w-4" />
Lihat / Edit
</span>
)}
</Button>
<Button
@ -256,6 +260,7 @@ function NewSessionDialog({
variant="outline"
onClick={() => onOpenChange(false)}
>
<X className="h-4 w-4" />
Batal
</Button>
<Button

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

@ -1,6 +1,6 @@
import { Head, router } from '@inertiajs/react';
import { format } from 'date-fns';
import { CheckCircle2, Save, XCircle } from 'lucide-react';
import { ArrowLeft, CheckCircle2, Save, XCircle } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import { PageHeader } from '@/components/page-header';
@ -90,7 +90,10 @@ export default function AttendanceSession({
title="Kehadiran"
actions={
<Button variant="outline" asChild>
<a href={attendanceIndex.url()}>Kembali</a>
<a href={attendanceIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>

7
resources/js/pages/admin/finances/tuition-invoices/payments.tsx
View File

@ -1,7 +1,7 @@
import { Head, router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { Paperclip, Pencil, Plus, Trash2 } from 'lucide-react';
import { ArrowLeft, Paperclip, Pencil, Plus, Trash2 } from 'lucide-react';
import { useState } from 'react';
import { DataTable } from '@/components/data-table';
import { DateTimeField } from '@/components/datetime-field';
@ -176,7 +176,10 @@ export default function TuitionPaymentIndex({ invoice, payments }: Props) {
title="Pembayaran"
actions={
<Button variant="outline" asChild>
<a href={tuitionInvoiceIndex.url()}>Kembali</a>
<a href={tuitionInvoiceIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>

7
resources/js/pages/admin/manage/course-classes/enrollments.tsx
View File

@ -1,7 +1,7 @@
import { Head, router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { Trash2, UserPlus } from 'lucide-react';
import { ArrowLeft, Trash2, UserPlus } from 'lucide-react';
import { useState } from 'react';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
@ -109,7 +109,10 @@ export default function ClassEnrollmentIndex({
title="Peserta Kelas"
actions={
<Button variant="outline" asChild>
<a href={courseClassIndex.url()}>Kembali</a>
<a href={courseClassIndex.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>

2
resources/js/pages/admin/settings/profile.tsx
View File

@ -1,5 +1,6 @@
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { format } from 'date-fns';
import { Save } from 'lucide-react';
import { useState } from 'react';
import ProfileController from '@/actions/App/Http/Controllers/Admin/Settings/ProfileController';
import { DatePicker } from '@/components/date-picker';
@ -368,6 +369,7 @@ export default function Profile({
disabled={processing}
data-test="update-profile-button"
>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

2
resources/js/pages/admin/settings/security.tsx
View File

@ -1,4 +1,5 @@
import { Form, Head } from '@inertiajs/react';
import { Save } from 'lucide-react';
import { useRef } from 'react';
import SecurityController from '@/actions/App/Http/Controllers/Admin/Settings/SecurityController';
import Heading from '@/components/heading';
@ -113,6 +114,7 @@ export default function Security({ passwordRules }: Props) {
disabled={processing}
data-test="update-password-button"
>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

13
resources/js/pages/admin/users/administrators/create.tsx
View File

@ -1,3 +1,7 @@
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
@ -10,9 +14,6 @@ import { PhoneInput } from '@/components/ui/phone-input';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Textarea } from '@/components/ui/textarea';
import { index, store } from '@/routes/admin/users/administrators';
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { useState } from 'react';
type Role = { id: number; name: string };
@ -34,7 +35,10 @@ export default function AdministratorCreate({ roles }: Props) {
title="Tambah Administrator"
actions={
<Button variant="outline" asChild>
<a href={index.url()}>Kembali</a>
<a href={index.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>
@ -148,6 +152,7 @@ export default function AdministratorCreate({ roles }: Props) {
<div className="flex justify-end">
<Button type="submit" disabled={processing}>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

13
resources/js/pages/admin/users/administrators/edit.tsx
View File

@ -1,3 +1,7 @@
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
@ -10,9 +14,6 @@ import { PhoneInput } from '@/components/ui/phone-input';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Textarea } from '@/components/ui/textarea';
import { index, update } from '@/routes/admin/users/administrators';
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { useState } from 'react';
type Role = { id: number; name: string };
@ -45,7 +46,10 @@ export default function AdministratorEdit({ user, roles }: Props) {
title="Edit Administrator"
actions={
<Button variant="outline" asChild>
<a href={index.url()}>Kembali</a>
<a href={index.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>
@ -159,6 +163,7 @@ export default function AdministratorEdit({ user, roles }: Props) {
<div className="flex justify-end">
<Button type="submit" disabled={processing}>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

7
resources/js/pages/admin/users/administrators/index.tsx
View File

@ -1,3 +1,6 @@
import { Head, router } from '@inertiajs/react';
import { Plus, RotateCcw } from 'lucide-react';
import { useState } from 'react';
import { ConfirmDialog } from '@/components/confirm-dialog';
import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
@ -12,9 +15,6 @@ import {
edit,
reset_password
} from '@/routes/admin/users/administrators';
import { Head, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useState } from 'react';
import type { Administrator } from './columns';
import { createAdministratorColumns } from './columns';
@ -135,6 +135,7 @@ export default function AdministratorIndex({ administrators }: Props) {
: ''
}
confirmLabel="Reset"
confirmIcon={<RotateCcw className="h-4 w-4" />}
variant="default"
onConfirm={handleResetPassword}
/>

13
resources/js/pages/admin/users/lecturers/create.tsx
View File

@ -1,3 +1,7 @@
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
@ -10,9 +14,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { index, store } from '@/routes/admin/users/lecturers';
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { useState } from 'react';
type Department = { id: number; name: string };
@ -33,7 +34,10 @@ export default function LecturerCreate({ departments }: Props) {
title="Tambah Dosen"
actions={
<Button variant="outline" asChild>
<a href={index.url()}>Kembali</a>
<a href={index.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>
@ -162,6 +166,7 @@ export default function LecturerCreate({ departments }: Props) {
<div className="flex justify-end">
<Button type="submit" disabled={processing}>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

13
resources/js/pages/admin/users/lecturers/edit.tsx
View File

@ -1,3 +1,7 @@
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
@ -10,9 +14,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { index, update } from '@/routes/admin/users/lecturers';
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { useState } from 'react';
type Department = { id: number; name: string };
@ -44,7 +45,10 @@ export default function LecturerEdit({ user, departments }: Props) {
title="Edit Dosen"
actions={
<Button variant="outline" asChild>
<a href={index.url()}>Kembali</a>
<a href={index.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>
@ -172,6 +176,7 @@ export default function LecturerEdit({ user, departments }: Props) {
<div className="flex justify-end">
<Button type="submit" disabled={processing}>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

5
resources/js/pages/admin/users/lecturers/index.tsx
View File

@ -1,8 +1,8 @@
import { Head, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { Plus, RotateCcw } from 'lucide-react';
import { useState } from 'react';
import type { PaginationState } from '@/components/data-table';
import { ConfirmDialog } from '@/components/confirm-dialog';
import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { PageHeader } from '@/components/page-header';
@ -135,6 +135,7 @@ export default function LecturerIndex({ lecturers }: Props) {
: ''
}
confirmLabel="Reset"
confirmIcon={<RotateCcw className="h-4 w-4" />}
variant="default"
onConfirm={handleResetPassword}
/>

13
resources/js/pages/admin/users/students/create.tsx
View File

@ -1,3 +1,7 @@
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
@ -10,9 +14,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { index, store } from '@/routes/admin/users/students';
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { useState } from 'react';
type Department = { id: number; name: string };
type Lecturer = { id: number; lecturer_number: string; user: { profile: { full_name: string } | null } | null };
@ -35,7 +36,10 @@ export default function StudentCreate({ departments, lecturers }: Props) {
title="Tambah Mahasiswa"
actions={
<Button variant="outline" asChild>
<a href={index.url()}>Kembali</a>
<a href={index.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>
@ -190,6 +194,7 @@ export default function StudentCreate({ departments, lecturers }: Props) {
<div className="flex justify-end">
<Button type="submit" disabled={processing}>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

13
resources/js/pages/admin/users/students/edit.tsx
View File

@ -1,3 +1,7 @@
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { ArrowLeft, Save } from 'lucide-react';
import { useState } from 'react';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
@ -10,9 +14,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { index, update } from '@/routes/admin/users/students';
import { Form, Head } from '@inertiajs/react';
import { format } from 'date-fns';
import { useState } from 'react';
type Department = { id: number; name: string };
type Lecturer = { id: number; lecturer_number: string; user: { profile: { full_name: string } | null } | null };
@ -46,7 +47,10 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
title="Edit Mahasiswa"
actions={
<Button variant="outline" asChild>
<a href={index.url()}>Kembali</a>
<a href={index.url()}>
<ArrowLeft className="h-4 w-4" />
Kembali
</a>
</Button>
}
/>
@ -216,6 +220,7 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
<div className="flex justify-end">
<Button type="submit" disabled={processing}>
<Save className="h-4 w-4" />
Simpan
</Button>
</div>

8
resources/js/pages/admin/users/students/index.tsx
View File

@ -1,8 +1,8 @@
import { Head, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { Plus, RotateCcw } from 'lucide-react';
import { useState } from 'react';
import type { PaginationState } from '@/components/data-table';
import { ConfirmDialog } from '@/components/confirm-dialog';
import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { PageHeader } from '@/components/page-header';
@ -15,7 +15,8 @@ import {
reset_password,
index as studentsIndex,
} from '@/routes/admin/users/students';
import { createStudentColumns, type Student } from './columns';
import { createStudentColumns } from './columns';
import type {Student} from './columns';
type Props = {
students: {
@ -134,6 +135,7 @@ export default function StudentIndex({ students }: Props) {
: ''
}
confirmLabel="Reset"
confirmIcon={<RotateCcw className="h-4 w-4" />}
variant="default"
onConfirm={handleResetPassword}
/>