Biodata Saya

Lengkapi data kontak dan orang tua/wali untuk memudahkan komunikasi sekolah.

{profile.id && ( <> XLSX DOCX )} {status.label}

Terakhir diperbarui: {profile.updated_at ? new Date(profile.updated_at).toLocaleString('id-ID') : '-'} {' - '} Terakhir diverifikasi: {profile.verified_at ? new Date(profile.verified_at).toLocaleString('id-ID') : '-'}

{profile.revision_notes && (

Catatan revisi

{profile.revision_notes}

)}

Kelengkapan biodata

{completion.percentage}% lengkap

{completion.percentage}%

{completion.missing.length > 0 && (

Masih perlu dilengkapi: {completion.missing.join(', ')}.

)}

Identitas resmi

Data ini berasal dari sinkronisasi sekolah dan tidak dapat diedit di sini.

} title="Kontak siswa" description="Semua kolom pada bagian ini opsional." />

setData('phone', event.target.value)} placeholder="0812..." className="form-input w-full rounded-xl" inputMode="tel" /> setData('whatsapp_phone', event.target.value)} placeholder="0812..." className="form-input w-full rounded-xl" inputMode="tel" /> setData('email', event.target.value)} placeholder="nama@email.com" className="form-input w-full rounded-xl" />

} title="Alamat tempat tinggal" description="Isi alamat yang sedang digunakan sekarang." />

setData('address_line', event.target.value)} rows={3} className="form-input w-full resize-none rounded-xl" />
                        </FormField>
                        <div className="grid grid-cols-2 gap-3 sm:col-span-2 sm:max-w-sm">
                            <FormField label="RT" error={errors.rt}>
                                <input value={data.rt} onChange={(event) => setData('rt', event.target.value)} className="form-input w-full rounded-xl" />
                            </FormField>
                            <FormField label="RW" error={errors.rw}>
                                <input value={data.rw} onChange={(event) => setData('rw', event.target.value)} className="form-input w-full rounded-xl" />
                            </FormField>
                        </div>
                        <FormField label="Desa / Kelurahan" error={errors.village}>
                            <input value={data.village} onChange={(event) => setData('village', event.target.value)} className="form-input w-full rounded-xl" />
                        </FormField>
                        <FormField label="Kecamatan" error={errors.district}>
                            <input value={data.district} onChange={(event) => setData('district', event.target.value)} className="form-input w-full rounded-xl" />
                        </FormField>
                        <FormField label="Kabupaten / Kota" error={errors.city}>
                            <input value={data.city} onChange={(event) => setData('city', event.target.value)} className="form-input w-full rounded-xl" />
                        </FormField>
                        <FormField label="Provinsi" error={errors.province}>
                            <input value={data.province} onChange={(event) => setData('province', event.target.value)} className="form-input w-full rounded-xl" />
                        </FormField>
                        <FormField label="Kode pos" error={errors.postal_code}>
                            <input value={data.postal_code} onChange={(event) => setData('postal_code', event.target.value)} inputMode="numeric" className="form-input w-full rounded-xl" />
                        </FormField>
                        <FormField label="Tinggal bersama" error={errors.living_with}>
                            <input value={data.living_with} onChange={(event) => setData('living_with', event.target.value)} placeholder="Orang tua / wali / lainnya" className="form-input w-full rounded-xl" />
                        </FormField>
                        <FormField label="Transportasi utama" error={errors.transportation}>
                            <input value={data.transportation} onChange={(event) => setData('transportation', event.target.value)} placeholder="Jalan kaki / motor / angkot" className="form-input w-full rounded-xl" />
                        </FormField>
                    </div>
                </section>

<section className="glass rounded-2xl p-4 sm:p-6">
                    <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <SectionTitle icon={<Users className="h-5 w-5" />} title="Orang tua / wali" description="Tambahkan sesuai kondisi keluarga. Tidak harus selalu ayah dan ibu." />
                        <button
                            type="button"
                            onClick={() => setData('guardians', [...data.guardians, emptyGuardian()])}
                            disabled={data.guardians.length >= 5}
                            className="inline-flex items-center justify-center gap-1.5 rounded-xl bg-primary-500/10 px-3 py-2 text-xs font-bold text-primary-300 hover:bg-primary-500/20 disabled:opacity-40"
                        >
                            <Plus className="h-4 w-4" />
                            Tambah kontak
                        </button>
                    </div>

{errors.guardians && <p className="mb-3 rounded-xl bg-rose-500/10 p-3 text-xs text-rose-300">{errors.guardians}</p>}

<div className="space-y-4">
                        {data.guardians.map((guardian, index) => (
                            <div key={index} className="rounded-2xl border border-border bg-surface/40 p-4">
                                <div className="mb-4 flex items-center justify-between">
                                    <p className="text-sm font-bold text-text">Kontak {index + 1}</p>
                                    <div className="flex items-center gap-1">
                                        {whatsappLink(guardian.whatsapp_phone) && (
                                            <a
                                                href={whatsappLink(guardian.whatsapp_phone) ?? undefined}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="rounded-lg p-2 text-emerald-400 hover:bg-emerald-500/10"
                                                aria-label={`Buka WhatsApp kontak ${index + 1}`}
                                            >
                                                <MessageCircle className="h-4 w-4" />
                                            </a>
                                        )}
                                        <button type="button" onClick={() => removeGuardian(index)} className="rounded-lg p-2 text-rose-400 hover:bg-rose-500/10" aria-label={`Hapus kontak ${index + 1}`}>
                                            <Trash2 className="h-4 w-4" />
                                        </button>
                                    </div>
                                </div>
                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <FormField label="Hubungan">
                                        <select value={guardian.relationship} onChange={(event) => updateGuardian(index, 'relationship', event.target.value as GuardianForm['relationship'])} className="form-input w-full rounded-xl">
                                            <option value="father">Ayah</option>
                                            <option value="mother">Ibu</option>
                                            <option value="guardian">Wali</option>
                                            <option value="other">Lainnya</option>
                                        </select>
                                    </FormField>
                                    <FormField label="Nama lengkap" error={(errors as Record<string, string>)[`guardians.${index}.full_name`]}>
                                        <input value={guardian.full_name ?? ''} onChange={(event) => updateGuardian(index, 'full_name', event.target.value)} className="form-input w-full rounded-xl" />
                                    </FormField>
                                    <FormField label="Nomor telepon" error={(errors as Record<string, string>)[`guardians.${index}.phone`]}>
                                        <input value={guardian.phone ?? ''} onChange={(event) => updateGuardian(index, 'phone', event.target.value)} placeholder="0812..." inputMode="tel" className="form-input w-full rounded-xl" />
                                    </FormField>
                                    <FormField label="Nomor WhatsApp" error={(errors as Record<string, string>)[`guardians.${index}.whatsapp_phone`]}>
                                        <input value={guardian.whatsapp_phone ?? ''} onChange={(event) => updateGuardian(index, 'whatsapp_phone', event.target.value)} placeholder="Isi jika nomor dapat dihubungi via WA" inputMode="tel" className="form-input w-full rounded-xl" />
                                    </FormField>
                                    <FormField label="Pekerjaan">
                                        <input value={guardian.occupation ?? ''} onChange={(event) => updateGuardian(index, 'occupation', event.target.value)} className="form-input w-full rounded-xl" />
                                    </FormField>
                                    <div className="flex flex-col justify-end gap-2 pb-1">
                                        <CheckOption checked={guardian.is_primary_contact} onChange={(value) => updateGuardian(index, 'is_primary_contact', value)} label="Kontak utama" />
                                        <CheckOption checked={guardian.is_emergency_contact} onChange={(value) => updateGuardian(index, 'is_emergency_contact', value)} label="Kontak darurat" />
                                        <CheckOption checked={guardian.same_address} onChange={(value) => updateGuardian(index, 'same_address', value)} label="Alamat sama dengan siswa" />
                                    </div>
                                    {!guardian.same_address && (
                                        <FormField label="Alamat orang tua / wali" error={(errors as Record<string, string>)[`guardians.${index}.address`]} className="sm:col-span-2">
                                            <textarea value={guardian.address ?? ''} onChange={(event) => updateGuardian(index, 'address', event.target.value)} rows={2} className="form-input w-full resize-none rounded-xl" />
                                        </FormField>
                                    )}
                                </div>
                            </div>
                        ))}
                    </div>
                </section>

<div className="app-eco-solid-surface mobile-safe-bottom mobile-safe-action-bar fixed inset-x-0 z-30 border-t border-border bg-surface/95 p-3 backdrop-blur-xl sm:static sm:rounded-2xl sm:border">
                    <div className="mx-auto flex max-w-5xl gap-2 sm:justify-end">
                        <Link href="/dashboard" className="inline-flex items-center justify-center rounded-xl border border-border px-3 py-2.5 text-xs font-bold text-text-muted hover:bg-surface-hover sm:px-4">
                            <Home className="mr-1.5 h-4 w-4" />
                            Kembali
                        </Link>
                        <button type="button" onClick={() => save(false)} disabled={processing} className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-primary-500/30 bg-primary-500/10 px-3 py-2.5 text-xs font-bold text-primary-300 hover:bg-primary-500/20 disabled:opacity-50 sm:flex-none sm:px-4">
                            <Save className="h-4 w-4" />
                            Simpan draft
                        </button>
                        <button type="button" onClick={() => save(true)} disabled={processing} className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-xl bg-primary-500 px-3 py-2.5 text-xs font-bold text-white hover:bg-primary-400 disabled:opacity-50 sm:flex-none sm:px-5">
                            <Send className="h-4 w-4" />
                            Ajukan
                        </button>
                    </div>
                </div>

{profile.status === 'verified' && (
                    <div className="flex items-center gap-2 text-xs text-emerald-300">
                        <CheckCircle2 className="h-4 w-4" />
                        Perubahan setelah verifikasi akan diajukan kembali untuk diperiksa.
                    </div>
                )}
            </div>
        </>
    );
}

function ReadOnlyField({ label, value }: { label: string; value: string }) {
    return (
        <div className="rounded-xl border border-border/60 bg-surface/40 px-3 py-2.5">
            <p className="text-[10px] font-bold uppercase tracking-wide text-text-muted">{label}</p>
            <p className="mt-1 break-words font-semibold text-text">{value}</p>
        </div>
    );
}

function whatsappLink(phone: string | null): string | null {
    const digits = (phone ?? '').replace(/\D/g, '');
    const normalized = digits.startsWith('0')
        ? `62${digits.slice(1)}`
        : digits.startsWith('8')
            ? `62${digits}`
            : digits;

return /^628\d{7,12}$/.test(normalized) ? `https://wa.me/${normalized}` : null;
}

StudentProfileEdit.layout = (page: any) => <StudentLayout title="Biodata Saya" hideMobileDock>{page}</StudentLayout>;