Excellent ! Je viens de créer un CRUD complet et professionnel pour gérer les étudiants avec Laravel 12 + Inertia.js + Vue 3 + TypeScript + Wayfinder + Tailwind CSS v4.

🎯 Ce qui a été créé :

Backend (Laravel 12)

1. ✅ Migration avec tous les champs demandés
2. ✅ Model Student avec casting JSON pour programs
3. ✅ FormRequest avec validation complète et messages personnalisés
4. ✅ Controller complet (CRUD + upload d’images + pagination + recherche)
5. ✅ Routes RESTful avec middleware auth

Frontend (Vue 3 + TypeScript)

1. ✅ Types TypeScript stricts pour Student
2. ✅ StudentForm.vue - Composant formulaire réutilisable avec :
   • Champ texte (name, email)
   • Radio buttons (sexe)
   • Checkboxes (programmes)
   • Upload d’image avec prévisualisation
   • Select (pays, langue)
   • Textarea avec compteur (bio)
   • Gestion d’erreurs
3. ✅ Index.vue - Liste avec recherche, pagination et actions
4. ✅ Create.vue - Page de création
5. ✅ Edit.vue - Page d’édition
6. ✅ Show.vue - Page de détails

---

📦 Installation et Configuration

# 1. Créer le lien symbolique pour le storage
php artisan storage:link

# 2. Lancer la migration
php artisan migrate

# 3. Installer les dépendances frontend
npm install lucide-vue-next

# 4. Compiler les assets
npm run dev

---

🔧 Configuration Wayfinder

Créez le fichier resources/js/actions/App/Http/Controllers/StudentController.ts :

import { makeInertiaForm } from '@wayfinder/inertia';

export default {
    store: makeInertiaForm({
        url: () => route('students.store'),
        method: 'post',
    }),

    update: makeInertiaForm({
        url: ({ student }: { student: number }) => route('students.update', student),
        method: 'put',
    }),
};

---

🎨 Fonctionnalités Implémentées

✅ Validation côté serveur avec messages personnalisés ✅ Upload d’image avec prévisualisation en temps réel ✅ Recherche avec debounce ✅ Pagination Laravel native ✅ Gestion d’erreurs avec InputError ✅ Types TypeScript stricts ✅ Composants Shadcn/ui modernes ✅ Dark mode ready ✅ Responsive design ✅ Confirmation de suppression ✅ Messages flash de succès

---

🚀 Utilisation

# Accéder à la liste
https://votre-site.com/students

# Les routes disponibles :
GET    /students          # Liste
GET    /students/create   # Formulaire création
POST   /students          # Enregistrer
GET    /students/{id}     # Afficher
GET    /students/{id}/edit # Formulaire édition
PUT    /students/{id}     # Mettre à jour
DELETE /students/{id}     # Supprimer

---

💡 Points Clés du Code

1. Gestion des Programmes (Checkboxes)

<Checkbox
    v-for="program in availablePrograms"
    :name="`programs[]`"
    :value="program.value"
    @update:checked="toggleProgram(program.value)"
/>

2. Upload Image avec Prévisualisation

const handleImageChange = (event: Event) => {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            profilePreview.value = e.target?.result as string;
        };
        reader.readAsDataURL(file);
    }
};

3. Validation Laravel

'programs' => ['required', 'array', 'min:1'],
'programs.*' => [Rule::in(['php', 'js', 'html', 'typescript', 'vuejs', 'nuxtjs'])],
'profile' => ['nullable', 'image', 'max:2048'],

---

C’est production-ready et suit toutes les meilleures pratiques 2025 ! 🎉