jeremy/dsi-commander
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit with contrats and domaines modules

Browse Source
This commit is contained in:
mrKamoo
2026-04-08 18:07:08 +02:00
commit 092a6a0484
191 changed files with 24639 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
resources/js/Pages/Commandes/Create.vue Normal file
View File

@@ -0,0 +1,160 @@
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import LignesCommandeForm from '@/Components/Commandes/LignesCommandeForm.vue'
import { Head, Link, useForm } from '@inertiajs/vue3'
const props = defineProps({
services: Array,
fournisseurs: Array,
categories: Array,
articles: Array,
})
const form = useForm({
service_id: '',
fournisseur_id: '',
objet: '',
description: '',
justification: '',
priorite: 'normale',
reference_fournisseur: '',
imputation_budgetaire: '',
date_demande: new Date().toISOString().slice(0, 10),
date_souhaitee: '',
date_livraison_prevue: '',
notes: '',
notes_fournisseur: '',
lignes: [],
})
function submit() {
form.post(route('commandes.store'))
}
</script>
<template>
<Head title="Nouvelle commande" />
<AuthenticatedLayout>
<template #header>
<div class="flex items-center gap-3">
<Link :href="route('commandes.index')" class="text-gray-400 hover:text-gray-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</Link>
<h1 class="text-xl font-semibold text-gray-900">Nouvelle commande</h1>
</div>
</template>
<form @submit.prevent="submit" class="space-y-6 max-w-5xl">
<!-- Informations générales -->
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Informations générales</h2>
<div class="grid gap-4 sm:grid-cols-2">
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700">Objet <span class="text-red-500">*</span></label>
<input v-model="form.objet" type="text" required
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.objet" class="mt-1 text-xs text-red-600">{{ form.errors.objet }}</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Service <span class="text-red-500">*</span></label>
<select v-model="form.service_id" required
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">
<option value="">Sélectionner...</option>
<option v-for="s in services" :key="s.id" :value="s.id">{{ s.nom }}</option>
</select>
<p v-if="form.errors.service_id" class="mt-1 text-xs text-red-600">{{ form.errors.service_id }}</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Fournisseur</label>
<select v-model="form.fournisseur_id"
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">
<option value="">— Non défini —</option>
<option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Priorité</label>
<select v-model="form.priorite"
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">
<option value="normale">Normale</option>
<option value="haute">Haute</option>
<option value="urgente">Urgente</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Date de demande <span class="text-red-500">*</span></label>
<input v-model="form.date_demande" type="date" required
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Date souhaitée</label>
<input v-model="form.date_souhaitee" type="date"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Référence fournisseur</label>
<input v-model="form.reference_fournisseur" type="text"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Imputation budgétaire</label>
<input v-model="form.imputation_budgetaire" type="text"
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" />
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700">Description</label>
<textarea v-model="form.description" rows="2"
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" />
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700">Justification</label>
<textarea v-model="form.justification" rows="2"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Notes internes</label>
<textarea v-model="form.notes" rows="2"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Notes fournisseur</label>
<textarea v-model="form.notes_fournisseur" rows="2"
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" />
</div>
</div>
</div>
<!-- Lignes de commande -->
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Lignes de commande</h2>
<LignesCommandeForm v-model="form.lignes" :categories="categories" :articles="articles" />
<p v-if="form.errors.lignes" class="mt-2 text-xs text-red-600">{{ form.errors.lignes }}</p>
</div>
<!-- Actions -->
<div class="flex justify-end gap-3">
<Link :href="route('commandes.index')"
class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
Annuler
</Link>
<button type="submit" :disabled="form.processing"
class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors">
{{ form.processing ? 'Création...' : 'Créer la commande' }}
</button>
</div>
</form>
</AuthenticatedLayout>
</template>

148
resources/js/Pages/Commandes/Edit.vue Normal file
View File

@@ -0,0 +1,148 @@
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import LignesCommandeForm from '@/Components/Commandes/LignesCommandeForm.vue'
import StatutBadge from '@/Components/Commandes/StatutBadge.vue'
import { Head, Link, useForm } from '@inertiajs/vue3'
const props = defineProps({
commande: Object,
services: Array,
fournisseurs: Array,
categories: Array,
articles: Array,
})
const form = useForm({
service_id: props.commande.service_id,
fournisseur_id: props.commande.fournisseur_id ?? '',
objet: props.commande.objet,
description: props.commande.description ?? '',
justification: props.commande.justification ?? '',
priorite: props.commande.priorite,
reference_fournisseur: props.commande.reference_fournisseur ?? '',
imputation_budgetaire: props.commande.imputation_budgetaire ?? '',
date_demande: props.commande.date_demande,
date_souhaitee: props.commande.date_souhaitee ?? '',
date_livraison_prevue: props.commande.date_livraison_prevue ?? '',
notes: props.commande.notes ?? '',
notes_fournisseur: props.commande.notes_fournisseur ?? '',
lignes: props.commande.lignes ?? [],
})
function submit() {
form.put(route('commandes.update', props.commande.id))
}
const showReceived = ['commandee','partiellement_recue','recue_complete'].includes(props.commande.statut)
</script>
<template>
<Head :title="`Modifier — ${commande.numero_commande}`" />
<AuthenticatedLayout>
<template #header>
<div class="flex items-center gap-3">
<Link :href="route('commandes.show', commande.id)" class="text-gray-400 hover:text-gray-600">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</Link>
<h1 class="text-xl font-semibold text-gray-900">Modifier {{ commande.numero_commande }}</h1>
<StatutBadge :statut="commande.statut" />
</div>
</template>
<form @submit.prevent="submit" class="space-y-6 max-w-5xl">
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Informations générales</h2>
<div class="grid gap-4 sm:grid-cols-2">
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700">Objet <span class="text-red-500">*</span></label>
<input v-model="form.objet" type="text" required
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" />
<p v-if="form.errors.objet" class="mt-1 text-xs text-red-600">{{ form.errors.objet }}</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Service <span class="text-red-500">*</span></label>
<select v-model="form.service_id" required
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">
<option v-for="s in services" :key="s.id" :value="s.id">{{ s.nom }}</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Fournisseur</label>
<select v-model="form.fournisseur_id"
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">
<option value="">— Non défini —</option>
<option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Priorité</label>
<select v-model="form.priorite"
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">
<option value="normale">Normale</option>
<option value="haute">Haute</option>
<option value="urgente">Urgente</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Date de demande</label>
<input v-model="form.date_demande" type="date"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Date souhaitée</label>
<input v-model="form.date_souhaitee" type="date"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Référence fournisseur</label>
<input v-model="form.reference_fournisseur" type="text"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Imputation budgétaire</label>
<input v-model="form.imputation_budgetaire" type="text"
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" />
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700">Description</label>
<textarea v-model="form.description" rows="2"
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" />
</div>
<div class="sm:col-span-2">
<label class="block text-sm font-medium text-gray-700">Justification</label>
<textarea v-model="form.justification" rows="2"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Notes internes</label>
<textarea v-model="form.notes" rows="2"
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" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Notes fournisseur</label>
<textarea v-model="form.notes_fournisseur" rows="2"
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" />
</div>
</div>
</div>
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Lignes de commande</h2>
<LignesCommandeForm v-model="form.lignes" :categories="categories" :articles="articles" :show-received="showReceived" />
</div>
<div class="flex justify-end gap-3">
<Link :href="route('commandes.show', commande.id)"
class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
Annuler
</Link>
<button type="submit" :disabled="form.processing"
class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors">
{{ form.processing ? 'Enregistrement...' : 'Enregistrer les modifications' }}
</button>
</div>
</form>
</AuthenticatedLayout>
</template>

200
resources/js/Pages/Commandes/Index.vue Normal file
View File

@@ -0,0 +1,200 @@
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import StatutBadge from '@/Components/Commandes/StatutBadge.vue'
import PrioriteBadge from '@/Components/Commandes/PrioriteBadge.vue'
import Pagination from '@/Components/Pagination.vue'
import ConfirmModal from '@/Components/ConfirmModal.vue'
import { Head, Link, router, useForm, usePage } from '@inertiajs/vue3'
import { ref, reactive } from 'vue'
const props = defineProps({
commandes: Object,
services: Array,
fournisseurs: Array,
filters: Object,
})
const page = usePage()
const statuts = page.props.config?.statuts ?? {}
const filters = reactive({ ...props.filters })
const deleteTarget = ref(null)
function applyFilters() {
router.get(route('commandes.index'), filters, { preserveState: true, replace: true })
}
function resetFilters() {
Object.keys(filters).forEach(k => filters[k] = '')
applyFilters()
}
function confirmDelete(cmd) {
deleteTarget.value = cmd
}
const deleteForm = useForm({})
function doDelete() {
deleteForm.delete(route('commandes.destroy', deleteTarget.value.id), {
onSuccess: () => deleteTarget.value = null,
})
}
function formatDate(d) {
if (!d) return '—'
return new Intl.DateTimeFormat('fr-FR').format(new Date(d))
}
function formatCurrency(v) {
if (v == null) return '—'
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(v)
}
</script>
<template>
<Head title="Commandes" />
<AuthenticatedLayout>
<template #header>
<div class="flex items-center justify-between">
<h1 class="text-xl font-semibold text-gray-900">Commandes</h1>
<Link v-if="$page.props.auth.user?.roles?.some(r => ['admin','responsable','acheteur'].includes(r.name))"
:href="route('commandes.create')"
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors">
+ Nouvelle commande
</Link>
</div>
</template>
<div class="space-y-4">
<!-- Filtres -->
<div class="rounded-xl bg-white p-4 shadow-sm border border-gray-100">
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
<input v-model="filters.search" @input="applyFilters" type="text" placeholder="Recherche..."
class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none xl:col-span-2" />
<select v-model="filters.service_id" @change="applyFilters"
class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
<option value="">Tous les services</option>
<option v-for="s in services" :key="s.id" :value="s.id">{{ s.nom }}</option>
</select>
<select v-model="filters.fournisseur_id" @change="applyFilters"
class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
<option value="">Tous les fournisseurs</option>
<option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
</select>
<select v-model="filters.statut" @change="applyFilters"
class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
<option value="">Tous les statuts</option>
<option v-for="(label, key) in statuts" :key="key" :value="key">{{ label }}</option>
</select>
<select v-model="filters.priorite" @change="applyFilters"
class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
<option value="">Toutes priorités</option>
<option value="urgente">Urgente</option>
<option value="haute">Haute</option>
<option value="normale">Normale</option>
</select>
</div>
<div class="mt-3 grid gap-3 sm:grid-cols-3">
<input v-model="filters.date_from" @change="applyFilters" type="date" placeholder="Du"
class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
<input v-model="filters.date_to" @change="applyFilters" type="date" placeholder="Au"
class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
<button @click="resetFilters"
class="rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
Réinitialiser les filtres
</button>
</div>
</div>
<!-- Table -->
<div class="rounded-xl bg-white shadow-sm border border-gray-100 overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-100 text-sm">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">N°</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Objet</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Fournisseur</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Priorité</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Demandé le</th>
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Souhaité le</th>
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Montant TTC</th>
<th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-50">
<tr v-for="cmd in commandes.data" :key="cmd.id"
:class="['hover:bg-gray-50 transition-colors', cmd.est_en_retard ? 'bg-red-50/30' : '']">
<td class="px-4 py-3 font-medium">
<Link :href="route('commandes.show', cmd.id)" class="text-blue-600 hover:underline whitespace-nowrap">
{{ cmd.numero_commande }}
</Link>
</td>
<td class="px-4 py-3 max-w-xs">
<p class="truncate text-gray-800">{{ cmd.objet }}</p>
</td>
<td class="px-4 py-3 whitespace-nowrap text-gray-600">{{ cmd.service?.nom }}</td>
<td class="px-4 py-3 whitespace-nowrap text-gray-600">{{ cmd.fournisseur?.nom ?? '—' }}</td>
<td class="px-4 py-3"><StatutBadge :statut="cmd.statut" /></td>
<td class="px-4 py-3"><PrioriteBadge :priorite="cmd.priorite" /></td>
<td class="px-4 py-3 whitespace-nowrap text-gray-600">{{ formatDate(cmd.date_demande) }}</td>
<td class="px-4 py-3 whitespace-nowrap" :class="cmd.est_en_retard ? 'text-red-600 font-medium' : 'text-gray-600'">
{{ formatDate(cmd.date_souhaitee) }}
<span v-if="cmd.est_en_retard" class="ml-1 text-xs">⚠</span>
</td>
<td class="px-4 py-3 text-right font-medium whitespace-nowrap text-gray-900">
{{ formatCurrency(cmd.montant_ttc) }}
</td>
<td class="px-4 py-3 text-center">
<div class="flex items-center justify-center gap-2">
<Link :href="route('commandes.show', cmd.id)"
class="text-gray-400 hover:text-blue-600 transition-colors" title="Voir">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</Link>
<Link v-if="['brouillon','en_attente_validation'].includes(cmd.statut)"
:href="route('commandes.edit', cmd.id)"
class="text-gray-400 hover:text-indigo-600 transition-colors" title="Modifier">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</Link>
<button v-if="$page.props.auth.user?.roles?.some(r => r.name === 'admin')" @click="confirmDelete(cmd)"
class="text-gray-400 hover:text-red-600 transition-colors" title="Supprimer">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="!commandes.data.length" class="py-12 text-center text-gray-400">
Aucune commande trouvée.
</div>
<div class="border-t border-gray-100 px-4 py-3">
<Pagination :links="commandes.links" :meta="commandes.meta" />
</div>
</div>
</div>
<ConfirmModal :show="!!deleteTarget"
title="Supprimer la commande"
:message="`Supprimer définitivement la commande ${deleteTarget?.numero_commande} ?`"
:processing="deleteForm.processing"
@confirm="doDelete"
@cancel="deleteTarget = null" />
</AuthenticatedLayout>
</template>

218
resources/js/Pages/Commandes/Show.vue Normal file
View File

@@ -0,0 +1,218 @@
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import StatutBadge from '@/Components/Commandes/StatutBadge.vue'
import PrioriteBadge from '@/Components/Commandes/PrioriteBadge.vue'
import HistoriqueTimeline from '@/Components/Commandes/HistoriqueTimeline.vue'
import TransitionModal from '@/Components/Commandes/TransitionModal.vue'
import LignesCommandeForm from '@/Components/Commandes/LignesCommandeForm.vue'
import PiecesJointesSection from '@/Components/Commandes/PiecesJointesSection.vue'
import { Head, Link, usePage } from '@inertiajs/vue3'
import { ref, computed } from 'vue'
const props = defineProps({
commande: Object,
transitionsDisponibles: Array,
})
const page = usePage()
const statuts = page.props.config?.statuts ?? {}
const showTransitionModal = ref(false)
const targetStatut = ref(null)
function openTransition(statut) {
targetStatut.value = statut
showTransitionModal.value = true
}
function formatDate(d, withTime = false) {
if (!d) return '—'
const opts = withTime
? { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }
: { day: '2-digit', month: '2-digit', year: 'numeric' }
return new Intl.DateTimeFormat('fr-FR', opts).format(new Date(d))
}
function formatCurrency(v) {
if (v == null) return '—'
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(v)
}
const transitionColors = {
en_attente_validation: 'bg-yellow-50 border-yellow-300 text-yellow-800 hover:bg-yellow-100',
validee: 'bg-blue-50 border-blue-300 text-blue-800 hover:bg-blue-100',
commandee: 'bg-indigo-50 border-indigo-300 text-indigo-800 hover:bg-indigo-100',
brouillon: 'bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100',
partiellement_recue: 'bg-orange-50 border-orange-300 text-orange-800 hover:bg-orange-100',
recue_complete: 'bg-green-50 border-green-300 text-green-800 hover:bg-green-100',
cloturee: 'bg-slate-50 border-slate-300 text-slate-700 hover:bg-slate-100',
annulee: 'bg-red-50 border-red-300 text-red-800 hover:bg-red-100',
}
</script>
<template>
<Head :title="commande.numero_commande" />
<AuthenticatedLayout>
<template #header>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<Link :href="route('commandes.index')" class="text-gray-400 hover:text-gray-600 transition-colors">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</Link>
<div>
<h1 class="text-xl font-semibold text-gray-900">{{ commande.numero_commande }}</h1>
<p class="text-sm text-gray-500">{{ commande.objet }}</p>
</div>
<StatutBadge :statut="commande.statut" size="lg" />
<PrioriteBadge :priorite="commande.priorite" />
</div>
<div class="flex items-center gap-2">
<a :href="route('commandes.pdf', commande.id)" target="_blank" rel="noopener noreferrer"
class="rounded-lg bg-gray-800 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700 transition-colors flex items-center gap-2">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
PDF
</a>
<Link v-if="['brouillon','en_attente_validation'].includes(commande.statut)"
:href="route('commandes.edit', commande.id)"
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
Modifier
</Link>
</div>
</div>
</template>
<div class="grid gap-6 lg:grid-cols-3">
<!-- Left column (2/3) -->
<div class="space-y-6 lg:col-span-2">
<!-- Infos générales -->
<div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Informations générales</h2>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<p class="text-xs text-gray-500">Service demandeur</p>
<p class="mt-0.5 font-medium text-gray-900">{{ commande.service?.nom ?? '—' }}</p>
</div>
<div>
<p class="text-xs text-gray-500">Fournisseur</p>
<p class="mt-0.5 font-medium text-gray-900">{{ commande.fournisseur?.nom ?? '—' }}</p>
</div>
<div>
<p class="text-xs text-gray-500">Demandeur</p>
<p class="mt-0.5 font-medium text-gray-900">{{ commande.demandeur?.name ?? '—' }}</p>
</div>
<div>
<p class="text-xs text-gray-500">Validateur</p>
<p class="mt-0.5 font-medium text-gray-900">{{ commande.validateur?.name ?? '—' }}</p>
</div>
<div>
<p class="text-xs text-gray-500">Date de demande</p>
<p class="mt-0.5 font-medium text-gray-900">{{ formatDate(commande.date_demande) }}</p>
</div>
<div>
<p class="text-xs text-gray-500">Date souhaitée</p>
<p class="mt-0.5 font-medium" :class="commande.est_en_retard ? 'text-red-600' : 'text-gray-900'">
{{ formatDate(commande.date_souhaitee) }}
<span v-if="commande.est_en_retard" class="ml-1 text-xs">⚠ En retard</span>
</p>
</div>
<div v-if="commande.date_commande">
<p class="text-xs text-gray-500">Date commande</p>
<p class="mt-0.5 font-medium text-gray-900">{{ formatDate(commande.date_commande, true) }}</p>
</div>
<div v-if="commande.date_livraison_prevue">
<p class="text-xs text-gray-500">Livraison prévue</p>
<p class="mt-0.5 font-medium text-gray-900">{{ formatDate(commande.date_livraison_prevue) }}</p>
</div>
<div v-if="commande.reference_fournisseur">
<p class="text-xs text-gray-500">Référence fournisseur</p>
<p class="mt-0.5 font-medium text-gray-900">{{ commande.reference_fournisseur }}</p>
</div>
<div v-if="commande.imputation_budgetaire">
<p class="text-xs text-gray-500">Imputation budgétaire</p>
<p class="mt-0.5 font-medium text-gray-900">{{ commande.imputation_budgetaire }}</p>
</div>
</div>
<!-- Montants -->
<div class="mt-4 flex gap-6 rounded-lg bg-gray-50 p-4">
<div>
<p class="text-xs text-gray-500">Montant HT</p>
<p class="text-lg font-bold text-gray-900">{{ formatCurrency(commande.montant_ht) }}</p>
</div>
<div>
<p class="text-xs text-gray-500">Montant TTC</p>
<p class="text-lg font-bold text-blue-700">{{ formatCurrency(commande.montant_ttc) }}</p>
</div>
</div>
</div>
<!-- Lignes de commande -->
<div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Lignes de commande</h2>
<LignesCommandeForm
:model-value="commande.lignes"
:categories="[]"
:articles="[]"
:readonly="true"
:show-received="['commandee','partiellement_recue','recue_complete','cloturee'].includes(commande.statut)" />
</div>
<!-- Notes -->
<div v-if="commande.description || commande.justification || commande.notes || commande.notes_fournisseur"
class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Notes et commentaires</h2>
<div class="space-y-3">
<div v-if="commande.description">
<p class="text-xs font-medium text-gray-500">Description</p>
<p class="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{{ commande.description }}</p>
</div>
<div v-if="commande.justification">
<p class="text-xs font-medium text-gray-500">Justification</p>
<p class="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{{ commande.justification }}</p>
</div>
<div v-if="commande.notes">
<p class="text-xs font-medium text-gray-500">Notes internes</p>
<p class="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{{ commande.notes }}</p>
</div>
<div v-if="commande.notes_fournisseur">
<p class="text-xs font-medium text-gray-500">Notes fournisseur</p>
<p class="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{{ commande.notes_fournisseur }}</p>
</div>
</div>
</div>
<!-- Pièces jointes -->
<div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
<PiecesJointesSection :commande="commande" />
</div>
</div>
<!-- Right column (1/3) -->
<div class="space-y-6">
<!-- Transitions -->
<div v-if="transitionsDisponibles.length" class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
<h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">Actions</h2>
<div class="space-y-2">
<button v-for="statut in transitionsDisponibles" :key="statut"
@click="openTransition(statut)"
:class="['w-full rounded-lg border px-4 py-2.5 text-sm font-medium transition-colors text-left', transitionColors[statut] ?? 'bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100']">
→ {{ statuts[statut] ?? statut }}
</button>
</div>
</div>
<!-- Historique -->
<div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Historique</h2>
<HistoriqueTimeline :historique="commande.historique" />
</div>
</div>
</div>
<TransitionModal :show="showTransitionModal" :commande="commande" :target-statut="targetStatut"
@close="showTransitionModal = false" />
</AuthenticatedLayout>
</template>