Merge pull request 'feat: enhance UI components with icons and improve navigation links' (#44) from feat/enhance-UI-components-with-icon into dev

Reviewed-on: #44

resources/js/components/app-sidebar.tsx

@@ -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';

resources/js/components/confirm-dialog.tsx

@@ -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>

resources/js/components/form-dialog.tsx

@@ -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>

resources/js/components/nav-main.tsx

@@ -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

resources/js/components/nav-secondary.tsx

@@ -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,

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

@@ -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>
                     }
                 />

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

@@ -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

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

@@ -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>
                     }
                 />

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

@@ -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>
                     }
                 />

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

@@ -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>
                     }
                 />

resources/js/pages/admin/settings/profile.tsx

@@ -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>

resources/js/pages/admin/settings/security.tsx

@@ -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>

resources/js/pages/admin/users/administrators/create.tsx

@@ -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>

resources/js/pages/admin/users/administrators/edit.tsx

@@ -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>

resources/js/pages/admin/users/administrators/index.tsx

@@ -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}
                 />

resources/js/pages/admin/users/lecturers/create.tsx

@@ -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>

resources/js/pages/admin/users/lecturers/edit.tsx

@@ -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>

resources/js/pages/admin/users/lecturers/index.tsx

@@ -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}
                 />

resources/js/pages/admin/users/students/create.tsx

@@ -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>

resources/js/pages/admin/users/students/edit.tsx

@@ -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>

resources/js/pages/admin/users/students/index.tsx

@@ -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}
                 />