Initial commit with contrats and domaines modules

resources/js/Components/Commandes/TransitionModal.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { ref } from 'vue'
+import { useForm, usePage } from '@inertiajs/vue3'
+
+const props = defineProps({
+    show: Boolean,
+    commande: Object,
+    targetStatut: String,
+})
+
+const emit = defineEmits(['close'])
+const page = usePage()
+
+const form = useForm({ statut: '', commentaire: '' })
+
+function submit() {
+    form.statut = props.targetStatut
+    form.patch(route('commandes.transition', props.commande.id), {
+        onSuccess: () => {
+            form.reset()
+            emit('close')
+        },
+    })
+}
+
+function close() {
+    form.reset()
+    emit('close')
+}
+
+const statutLabel = (s) => page.props.config?.statuts?.[s] ?? s
+</script>
+
+<template>
+    <Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-150"
+        leave-to-class="opacity-0" leave-active-class="transition-opacity duration-150">
+        <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center">
+            <div class="absolute inset-0 bg-black/50" @click="close" />
+            <div class="relative w-full max-w-md rounded-xl bg-white p-6 shadow-xl mx-4">
+                <h3 class="text-lg font-semibold text-gray-900">Changer le statut</h3>
+                <p class="mt-1 text-sm text-gray-600">
+                    Commande <strong>{{ commande?.numero_commande }}</strong> →
+                    <strong>{{ statutLabel(targetStatut) }}</strong>
+                </p>
+
+                <form @submit.prevent="submit" class="mt-4 space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700">
+                            Commentaire
+                            <span v-if="targetStatut === 'annulee'" class="text-red-500">*</span>
+                        </label>
+                        <textarea v-model="form.commentaire" rows="3"
+                            :required="targetStatut === 'annulee'"
+                            placeholder="Optionnel — précisez la raison si nécessaire"
+                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+                        <p v-if="form.errors.commentaire" class="mt-1 text-xs text-red-600">{{ form.errors.commentaire }}</p>
+                    </div>
+
+                    <div class="flex justify-end gap-3">
+                        <button type="button" @click="close"
+                            class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
+                            Annuler
+                        </button>
+                        <button type="submit" :disabled="form.processing"
+                            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors">
+                            {{ form.processing ? 'Mise à jour...' : 'Confirmer' }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </Transition>
+</template>