From f32c844e65f884d0aa7bd6a371ced6bc0401fc2e Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 30 Aug 2026 12:24:09 +0700
Subject: [PATCH] feat: enhance student creation and editing forms with
 combobox for academic advisor selection

---
 .../js/pages/admin/users/students/create.tsx  | 287 ++++++++++++---
 .../js/pages/admin/users/students/edit.tsx    | 332 +++++++++++++++---
 2 files changed, 509 insertions(+), 110 deletions(-)

diff --git a/resources/js/pages/admin/users/students/create.tsx b/resources/js/pages/admin/users/students/create.tsx
index 8589bc1..3f7449f 100644
--- a/resources/js/pages/admin/users/students/create.tsx
+++ b/resources/js/pages/admin/users/students/create.tsx
@@ -7,16 +7,34 @@ import InputError from '@/components/input-error';
 import { PageHeader } from '@/components/page-header';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    Combobox,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxList,
+} from '@/components/ui/combobox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { PhoneInput } from '@/components/ui/phone-input';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { index, store } from '@/routes/admin/users/students';
 
 type Department = { id: number; name: string };
-type Lecturer = { id: number; lecturer_number: string; user: { profile: { full_name: string } | null } | null };
+type Lecturer = {
+    id: number;
+    lecturer_number: string;
+    user: { profile: { full_name: string } | null } | null;
+};
 
 type Props = {
     departments: Department[];
@@ -26,6 +44,7 @@ type Props = {
 export default function StudentCreate({ departments, lecturers }: Props) {
     const [gender, setGender] = useState('');
     const [birthDate, setBirthDate] = useState<Date | undefined>();
+    const [advisor, setAdvisor] = useState<Lecturer | null>(null);
 
     return (
         <>
@@ -54,16 +73,31 @@ export default function StudentCreate({ departments, lecturers }: Props) {
                                 <CardContent className="grid gap-4 md:grid-cols-2">
                                     <div className="grid gap-2">
                                         <Label htmlFor="username">
-                                            Username <span className="text-red-500">*</span>
+                                            Username{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="username" name="username" placeholder="Masukkan username" />
+                                        <Input
+                                            id="username"
+                                            name="username"
+                                            placeholder="Masukkan username"
+                                        />
                                         <InputError message={errors.username} />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label htmlFor="email">
-                                            Email <span className="text-red-500">*</span>
+                                            Email{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="email" name="email" type="email" placeholder="Masukkan email" />
+                                        <Input
+                                            id="email"
+                                            name="email"
+                                            type="email"
+                                            placeholder="Masukkan email"
+                                        />
                                         <InputError message={errors.email} />
                                     </div>
                                 </CardContent>
@@ -76,57 +110,138 @@ export default function StudentCreate({ departments, lecturers }: Props) {
                                 <CardContent className="grid gap-4 md:grid-cols-2">
                                     <div className="grid gap-2">
                                         <Label htmlFor="full_name">
-                                            Nama Lengkap <span className="text-red-500">*</span>
+                                            Nama Lengkap{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="full_name" name="full_name" placeholder="Masukkan nama lengkap" />
-                                        <InputError message={errors.full_name} />
+                                        <Input
+                                            id="full_name"
+                                            name="full_name"
+                                            placeholder="Masukkan nama lengkap"
+                                        />
+                                        <InputError
+                                            message={errors.full_name}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label htmlFor="phone_number">
-                                            Nomor Telepon <span className="text-red-500">*</span>
+                                            Nomor Telepon{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <PhoneInput id="phone_number" name="phone_number" placeholder="08xx xxxx xxxx" />
-                                        <InputError message={errors.phone_number} />
+                                        <PhoneInput
+                                            id="phone_number"
+                                            name="phone_number"
+                                            placeholder="08xx xxxx xxxx"
+                                        />
+                                        <InputError
+                                            message={errors.phone_number}
+                                        />
                                     </div>
                                     <div className="grid gap-4 md:col-span-2 md:grid-cols-3">
                                         <div className="grid gap-2">
                                             <Label>
-                                                Jenis Kelamin <span className="text-red-500">*</span>
+                                                Jenis Kelamin{' '}
+                                                <span className="text-red-500">
+                                                    *
+                                                </span>
                                             </Label>
-                                            <input type="hidden" name="gender" value={gender} />
-                                            <RadioGroup value={gender} onValueChange={setGender} className="flex gap-4">
+                                            <input
+                                                type="hidden"
+                                                name="gender"
+                                                value={gender}
+                                            />
+                                            <RadioGroup
+                                                value={gender}
+                                                onValueChange={setGender}
+                                                className="flex gap-4"
+                                            >
                                                 <div className="flex items-center gap-2">
-                                                    <RadioGroupItem value="male" id="male" />
-                                                    <Label htmlFor="male" className="font-normal">Laki-laki</Label>
+                                                    <RadioGroupItem
+                                                        value="male"
+                                                        id="male"
+                                                    />
+                                                    <Label
+                                                        htmlFor="male"
+                                                        className="font-normal"
+                                                    >
+                                                        Laki-laki
+                                                    </Label>
                                                 </div>
                                                 <div className="flex items-center gap-2">
-                                                    <RadioGroupItem value="female" id="female" />
-                                                    <Label htmlFor="female" className="font-normal">Perempuan</Label>
+                                                    <RadioGroupItem
+                                                        value="female"
+                                                        id="female"
+                                                    />
+                                                    <Label
+                                                        htmlFor="female"
+                                                        className="font-normal"
+                                                    >
+                                                        Perempuan
+                                                    </Label>
                                                 </div>
                                             </RadioGroup>
-                                            <InputError message={errors.gender} />
+                                            <InputError
+                                                message={errors.gender}
+                                            />
                                         </div>
                                         <div className="grid gap-2">
                                             <Label>
-                                                Tempat Lahir <span className="text-red-500">*</span>
+                                                Tempat Lahir{' '}
+                                                <span className="text-red-500">
+                                                    *
+                                                </span>
                                             </Label>
-                                            <Input name="birth_place" placeholder="Masukkan tempat lahir" />
-                                            <InputError message={errors.birth_place} />
+                                            <Input
+                                                name="birth_place"
+                                                placeholder="Masukkan tempat lahir"
+                                            />
+                                            <InputError
+                                                message={errors.birth_place}
+                                            />
                                         </div>
                                         <div className="grid gap-2">
                                             <Label>
-                                                Tanggal Lahir <span className="text-red-500">*</span>
+                                                Tanggal Lahir{' '}
+                                                <span className="text-red-500">
+                                                    *
+                                                </span>
                                             </Label>
-                                            <input type="hidden" name="birth_date" value={birthDate ? format(birthDate, 'yyyy-MM-dd') : ''} />
-                                            <DatePicker value={birthDate} onChange={setBirthDate} />
-                                            <InputError message={errors.birth_date} />
+                                            <input
+                                                type="hidden"
+                                                name="birth_date"
+                                                value={
+                                                    birthDate
+                                                        ? format(
+                                                              birthDate,
+                                                              'yyyy-MM-dd',
+                                                          )
+                                                        : ''
+                                                }
+                                            />
+                                            <DatePicker
+                                                value={birthDate}
+                                                onChange={setBirthDate}
+                                            />
+                                            <InputError
+                                                message={errors.birth_date}
+                                            />
                                         </div>
                                     </div>
                                     <div className="grid gap-2 md:col-span-2">
                                         <Label htmlFor="address">
-                                            Alamat <span className="text-red-500">*</span>
+                                            Alamat{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Textarea id="address" name="address" placeholder="Masukkan alamat" />
+                                        <Textarea
+                                            id="address"
+                                            name="address"
+                                            placeholder="Masukkan alamat"
+                                        />
                                         <InputError message={errors.address} />
                                     </div>
                                 </CardContent>
@@ -139,55 +254,119 @@ export default function StudentCreate({ departments, lecturers }: Props) {
                                 <CardContent className="grid gap-4 md:grid-cols-2">
                                     <div className="grid gap-2">
                                         <Label htmlFor="student_number">
-                                            NIM <span className="text-red-500">*</span>
+                                            NIM{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="student_number" name="student_number" placeholder="Masukkan NIM" />
-                                        <InputError message={errors.student_number} />
+                                        <Input
+                                            id="student_number"
+                                            name="student_number"
+                                            placeholder="Masukkan NIM"
+                                        />
+                                        <InputError
+                                            message={errors.student_number}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label>
-                                            Jurusan <span className="text-red-500">*</span>
+                                            Jurusan{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <input type="hidden" name="department_id" />
+                                        <input
+                                            type="hidden"
+                                            name="department_id"
+                                        />
                                         <Select name="department_id">
                                             <SelectTrigger className="w-full">
                                                 <SelectValue placeholder="Pilih jurusan" />
                                             </SelectTrigger>
                                             <SelectContent>
                                                 {departments.map((dept) => (
-                                                    <SelectItem key={dept.id} value={String(dept.id)}>
+                                                    <SelectItem
+                                                        key={dept.id}
+                                                        value={String(dept.id)}
+                                                    >
                                                         {dept.name}
                                                     </SelectItem>
                                                 ))}
                                             </SelectContent>
                                         </Select>
-                                        <InputError message={errors.department_id} />
+                                        <InputError
+                                            message={errors.department_id}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label htmlFor="enrollment_year">
-                                            Tahun Masuk <span className="text-red-500">*</span>
+                                            Tahun Masuk{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="enrollment_year" name="enrollment_year" type="number" placeholder="Contoh: 2024" />
-                                        <InputError message={errors.enrollment_year} />
+                                        <Input
+                                            id="enrollment_year"
+                                            name="enrollment_year"
+                                            type="number"
+                                            placeholder="Contoh: 2024"
+                                        />
+                                        <InputError
+                                            message={errors.enrollment_year}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label>
-                                            Dosen Wali <span className="text-red-500">*</span>
+                                            Dosen Wali{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <input type="hidden" name="academic_advisor_id" />
-                                        <Select name="academic_advisor_id">
-                                            <SelectTrigger className="w-full">
-                                                <SelectValue placeholder="Pilih dosen wali" />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                {lecturers.map((lect) => (
-                                                    <SelectItem key={lect.id} value={String(lect.id)}>
-                                                        {lect.user?.profile?.full_name ?? 'N/A'} - {lect.lecturer_number}
-                                                    </SelectItem>
-                                                ))}
-                                            </SelectContent>
-                                        </Select>
-                                        <InputError message={errors.academic_advisor_id} />
+                                        <input
+                                            type="hidden"
+                                            name="academic_advisor_id"
+                                            value={advisor?.id ?? ''}
+                                        />
+                                        <Combobox
+                                            items={lecturers}
+                                            value={advisor}
+                                            onValueChange={setAdvisor}
+                                            itemToStringLabel={(lect) =>
+                                                `${lect.user?.profile?.full_name ?? 'N/A'} - ${lect.lecturer_number}`
+                                            }
+                                            isItemEqualToValue={(a, b) =>
+                                                a.id === b.id
+                                            }
+                                        >
+                                            <ComboboxInput
+                                                placeholder="Pilih dosen wali"
+                                                className="w-full"
+                                            />
+                                            <ComboboxContent>
+                                                <ComboboxEmpty>
+                                                    Dosen tidak ditemukan.
+                                                </ComboboxEmpty>
+                                                <ComboboxList>
+                                                    {lecturers.map((lect) => (
+                                                        <ComboboxItem
+                                                            key={lect.id}
+                                                            value={lect}
+                                                        >
+                                                            {lect.user?.profile
+                                                                ?.full_name ??
+                                                                'N/A'}{' '}
+                                                            -{' '}
+                                                            {
+                                                                lect.lecturer_number
+                                                            }
+                                                        </ComboboxItem>
+                                                    ))}
+                                                </ComboboxList>
+                                            </ComboboxContent>
+                                        </Combobox>
+                                        <InputError
+                                            message={errors.academic_advisor_id}
+                                        />
                                     </div>
                                 </CardContent>
                             </Card>
diff --git a/resources/js/pages/admin/users/students/edit.tsx b/resources/js/pages/admin/users/students/edit.tsx
index b61b39a..83ec83e 100644
--- a/resources/js/pages/admin/users/students/edit.tsx
+++ b/resources/js/pages/admin/users/students/edit.tsx
@@ -7,23 +7,53 @@ import InputError from '@/components/input-error';
 import { PageHeader } from '@/components/page-header';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    Combobox,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxList,
+} from '@/components/ui/combobox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { PhoneInput } from '@/components/ui/phone-input';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { index, update } from '@/routes/admin/users/students';
 
 type Department = { id: number; name: string };
-type Lecturer = { id: number; lecturer_number: string; user: { profile: { full_name: string } | null } | null };
+type Lecturer = {
+    id: number;
+    lecturer_number: string;
+    user: { profile: { full_name: string } | null } | null;
+};
 
 type User = {
     id: number;
     username: string;
     email: string;
-    profile: { full_name: string; phone_number: string; address: string; gender: string; birth_date: string; birth_place: string } | null;
-    student: { student_number: string; department_id: number; enrollment_year: number; academic_advisor_id: number; } | null;
+    profile: {
+        full_name: string;
+        phone_number: string;
+        address: string;
+        gender: string;
+        birth_date: string;
+        birth_place: string;
+    } | null;
+    student: {
+        student_number: string;
+        department_id: number;
+        enrollment_year: number;
+        academic_advisor_id: number;
+    } | null;
 };
 
 type Props = {
@@ -35,7 +65,14 @@ type Props = {
 export default function StudentEdit({ user, departments, lecturers }: Props) {
     const [gender, setGender] = useState(user.profile?.gender ?? '');
     const [birthDate, setBirthDate] = useState<Date | undefined>(
-        user.profile?.birth_date ? new Date(user.profile.birth_date) : undefined
+        user.profile?.birth_date
+            ? new Date(user.profile.birth_date)
+            : undefined,
+    );
+    const [advisor, setAdvisor] = useState<Lecturer | null>(
+        lecturers.find(
+            (lect) => lect.id === user.student?.academic_advisor_id,
+        ) ?? null,
     );
 
     return (
@@ -65,16 +102,31 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
                                 <CardContent className="grid gap-4 md:grid-cols-2">
                                     <div className="grid gap-2">
                                         <Label htmlFor="username">
-                                            Username <span className="text-red-500">*</span>
+                                            Username{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="username" name="username" defaultValue={user.username} />
+                                        <Input
+                                            id="username"
+                                            name="username"
+                                            defaultValue={user.username}
+                                        />
                                         <InputError message={errors.username} />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label htmlFor="email">
-                                            Email <span className="text-red-500">*</span>
+                                            Email{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="email" name="email" type="email" defaultValue={user.email} />
+                                        <Input
+                                            id="email"
+                                            name="email"
+                                            type="email"
+                                            defaultValue={user.email}
+                                        />
                                         <InputError message={errors.email} />
                                     </div>
                                 </CardContent>
@@ -87,57 +139,147 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
                                 <CardContent className="grid gap-4 md:grid-cols-2">
                                     <div className="grid gap-2">
                                         <Label htmlFor="full_name">
-                                            Nama Lengkap <span className="text-red-500">*</span>
+                                            Nama Lengkap{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="full_name" name="full_name" defaultValue={user.profile?.full_name ?? ''} />
-                                        <InputError message={errors.full_name} />
+                                        <Input
+                                            id="full_name"
+                                            name="full_name"
+                                            defaultValue={
+                                                user.profile?.full_name ?? ''
+                                            }
+                                        />
+                                        <InputError
+                                            message={errors.full_name}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label htmlFor="phone_number">
-                                            Nomor Telepon <span className="text-red-500">*</span>
+                                            Nomor Telepon{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <PhoneInput id="phone_number" name="phone_number" value={user.profile?.phone_number ?? ''} />
-                                        <InputError message={errors.phone_number} />
+                                        <PhoneInput
+                                            id="phone_number"
+                                            name="phone_number"
+                                            value={
+                                                user.profile?.phone_number ?? ''
+                                            }
+                                        />
+                                        <InputError
+                                            message={errors.phone_number}
+                                        />
                                     </div>
                                     <div className="grid gap-4 md:col-span-2 md:grid-cols-3">
                                         <div className="grid gap-2">
                                             <Label>
-                                                Jenis Kelamin <span className="text-red-500">*</span>
+                                                Jenis Kelamin{' '}
+                                                <span className="text-red-500">
+                                                    *
+                                                </span>
                                             </Label>
-                                            <input type="hidden" name="gender" value={gender} />
-                                            <RadioGroup value={gender} onValueChange={setGender} className="flex gap-4">
+                                            <input
+                                                type="hidden"
+                                                name="gender"
+                                                value={gender}
+                                            />
+                                            <RadioGroup
+                                                value={gender}
+                                                onValueChange={setGender}
+                                                className="flex gap-4"
+                                            >
                                                 <div className="flex items-center gap-2">
-                                                    <RadioGroupItem value="male" id="male" />
-                                                    <Label htmlFor="male" className="font-normal">Laki-laki</Label>
+                                                    <RadioGroupItem
+                                                        value="male"
+                                                        id="male"
+                                                    />
+                                                    <Label
+                                                        htmlFor="male"
+                                                        className="font-normal"
+                                                    >
+                                                        Laki-laki
+                                                    </Label>
                                                 </div>
                                                 <div className="flex items-center gap-2">
-                                                    <RadioGroupItem value="female" id="female" />
-                                                    <Label htmlFor="female" className="font-normal">Perempuan</Label>
+                                                    <RadioGroupItem
+                                                        value="female"
+                                                        id="female"
+                                                    />
+                                                    <Label
+                                                        htmlFor="female"
+                                                        className="font-normal"
+                                                    >
+                                                        Perempuan
+                                                    </Label>
                                                 </div>
                                             </RadioGroup>
-                                            <InputError message={errors.gender} />
+                                            <InputError
+                                                message={errors.gender}
+                                            />
                                         </div>
                                         <div className="grid gap-2">
                                             <Label>
-                                                Tempat Lahir <span className="text-red-500">*</span>
+                                                Tempat Lahir{' '}
+                                                <span className="text-red-500">
+                                                    *
+                                                </span>
                                             </Label>
-                                            <Input name="birth_place" defaultValue={user.profile?.birth_place ?? ''} />
-                                            <InputError message={errors.birth_place} />
+                                            <Input
+                                                name="birth_place"
+                                                defaultValue={
+                                                    user.profile?.birth_place ??
+                                                    ''
+                                                }
+                                            />
+                                            <InputError
+                                                message={errors.birth_place}
+                                            />
                                         </div>
                                         <div className="grid gap-2">
                                             <Label>
-                                                Tanggal Lahir <span className="text-red-500">*</span>
+                                                Tanggal Lahir{' '}
+                                                <span className="text-red-500">
+                                                    *
+                                                </span>
                                             </Label>
-                                            <input type="hidden" name="birth_date" value={birthDate ? format(birthDate, 'yyyy-MM-dd') : ''} />
-                                            <DatePicker value={birthDate} onChange={setBirthDate} />
-                                            <InputError message={errors.birth_date} />
+                                            <input
+                                                type="hidden"
+                                                name="birth_date"
+                                                value={
+                                                    birthDate
+                                                        ? format(
+                                                              birthDate,
+                                                              'yyyy-MM-dd',
+                                                          )
+                                                        : ''
+                                                }
+                                            />
+                                            <DatePicker
+                                                value={birthDate}
+                                                onChange={setBirthDate}
+                                            />
+                                            <InputError
+                                                message={errors.birth_date}
+                                            />
                                         </div>
                                     </div>
                                     <div className="grid gap-2 md:col-span-2">
                                         <Label htmlFor="address">
-                                            Alamat <span className="text-red-500">*</span>
+                                            Alamat{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Textarea id="address" name="address" defaultValue={user.profile?.address ?? ''} />
+                                        <Textarea
+                                            id="address"
+                                            name="address"
+                                            defaultValue={
+                                                user.profile?.address ?? ''
+                                            }
+                                        />
                                         <InputError message={errors.address} />
                                     </div>
                                 </CardContent>
@@ -150,53 +292,131 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
                                 <CardContent className="grid gap-4 md:grid-cols-2">
                                     <div className="grid gap-2">
                                         <Label htmlFor="student_number">
-                                            NIM <span className="text-red-500">*</span>
+                                            NIM{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="student_number" name="student_number" defaultValue={user.student?.student_number ?? ''} />
-                                        <InputError message={errors.student_number} />
+                                        <Input
+                                            id="student_number"
+                                            name="student_number"
+                                            defaultValue={
+                                                user.student?.student_number ??
+                                                ''
+                                            }
+                                        />
+                                        <InputError
+                                            message={errors.student_number}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label>
-                                            Jurusan <span className="text-red-500">*</span>
+                                            Jurusan{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Select name="department_id" defaultValue={user.student?.department_id ? String(user.student.department_id) : undefined}>
+                                        <Select
+                                            name="department_id"
+                                            defaultValue={
+                                                user.student?.department_id
+                                                    ? String(
+                                                          user.student
+                                                              .department_id,
+                                                      )
+                                                    : undefined
+                                            }
+                                        >
                                             <SelectTrigger className="w-full">
                                                 <SelectValue placeholder="Pilih jurusan" />
                                             </SelectTrigger>
                                             <SelectContent>
                                                 {departments.map((dept) => (
-                                                    <SelectItem key={dept.id} value={String(dept.id)}>
+                                                    <SelectItem
+                                                        key={dept.id}
+                                                        value={String(dept.id)}
+                                                    >
                                                         {dept.name}
                                                     </SelectItem>
                                                 ))}
                                             </SelectContent>
                                         </Select>
-                                        <InputError message={errors.department_id} />
+                                        <InputError
+                                            message={errors.department_id}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label htmlFor="enrollment_year">
-                                            Tahun Masuk <span className="text-red-500">*</span>
+                                            Tahun Masuk{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Input id="enrollment_year" name="enrollment_year" type="number" defaultValue={user.student?.enrollment_year ?? ''} />
-                                        <InputError message={errors.enrollment_year} />
+                                        <Input
+                                            id="enrollment_year"
+                                            name="enrollment_year"
+                                            type="number"
+                                            defaultValue={
+                                                user.student?.enrollment_year ??
+                                                ''
+                                            }
+                                        />
+                                        <InputError
+                                            message={errors.enrollment_year}
+                                        />
                                     </div>
                                     <div className="grid gap-2">
                                         <Label>
-                                            Dosen Wali <span className="text-red-500">*</span>
+                                            Dosen Wali{' '}
+                                            <span className="text-red-500">
+                                                *
+                                            </span>
                                         </Label>
-                                        <Select name="academic_advisor_id" defaultValue={user.student?.academic_advisor_id ? String(user.student.academic_advisor_id) : undefined}>
-                                            <SelectTrigger className="w-full">
-                                                <SelectValue placeholder="Pilih dosen wali" />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                {lecturers.map((lect) => (
-                                                    <SelectItem key={lect.id} value={String(lect.id)}>
-                                                        {lect.user?.profile?.full_name ?? 'N/A'} - {lect.lecturer_number}
-                                                    </SelectItem>
-                                                ))}
-                                            </SelectContent>
-                                        </Select>
-                                        <InputError message={errors.academic_advisor_id} />
+                                        <input
+                                            type="hidden"
+                                            name="academic_advisor_id"
+                                            value={advisor?.id ?? ''}
+                                        />
+                                        <Combobox
+                                            items={lecturers}
+                                            value={advisor}
+                                            onValueChange={setAdvisor}
+                                            itemToStringLabel={(lect) =>
+                                                `${lect.user?.profile?.full_name ?? 'N/A'} - ${lect.lecturer_number}`
+                                            }
+                                            isItemEqualToValue={(a, b) =>
+                                                a.id === b.id
+                                            }
+                                        >
+                                            <ComboboxInput
+                                                placeholder="Pilih dosen wali"
+                                                className="w-full"
+                                            />
+                                            <ComboboxContent>
+                                                <ComboboxEmpty>
+                                                    Dosen tidak ditemukan.
+                                                </ComboboxEmpty>
+                                                <ComboboxList>
+                                                    {lecturers.map((lect) => (
+                                                        <ComboboxItem
+                                                            key={lect.id}
+                                                            value={lect}
+                                                        >
+                                                            {lect.user?.profile
+                                                                ?.full_name ??
+                                                                'N/A'}{' '}
+                                                            -{' '}
+                                                            {
+                                                                lect.lecturer_number
+                                                            }
+                                                        </ComboboxItem>
+                                                    ))}
+                                                </ComboboxList>
+                                            </ComboboxContent>
+                                        </Combobox>
+                                        <InputError
+                                            message={errors.academic_advisor_id}
+                                        />
                                     </div>
                                 </CardContent>
                             </Card>