<div class="flex flex-col justify-center gap-y-8">
<div class="flex flex-col gap-4">
<h2 class="h5">Mes commandes</h2>
<div>
<table class="w-full text-body-sm">
<thead>
<tr class="font-bold min-h-14 border-b border-brand-500">
<th class="p-2 text-left w-auto">N° Commande</th>
<th class="p-2 text-left w-auto">Date</th>
<th class="p-2 text-left w-auto hidden md:table-cell">Total</th>
<th class="p-2 text-left w-auto hidden md:table-cell">Statut</th>
<th class="p-2 text-center w-1">Détail</th>
</tr>
</thead>
<tbody>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/04/2025</td>
<td class="p-2 text-left w-auto hidden md:table-cell">144,00 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">En cours</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">15/O1/2025</td>
<td class="p-2 text-left w-auto hidden md:table-cell">72,00 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">En attente</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
<td class="p-2 text-left w-auto">N°12000000206</td>
<td class="p-2 text-left w-auto">07/11/2024</td>
<td class="p-2 text-left w-auto hidden md:table-cell">95,50 €</td>
<td class="p-2 text-left w-auto hidden md:table-cell">Livré</td>
<td class="p-2 text-left w-1">
<button class="m-2 btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">VOIR</button>
</td>
</tr>
</tbody>
</table>
<div class="flex justify-between items-start pt-6">
<p class="text-body-sm text-black/64">
<span class="font-bold">10</span>
commandes
</p>
<div class="flex items-center">
<div class="flex flex-col w-full gap-y-1 field field-reserved">
<div x-data="selectlimiterOptions" class="input-wrapper input-wrapper-select flex flex-col relative w-full ">
<button type="button" @click="openSelect" x-ref="selectButton" class="form-select w-full peer flex justify-between btn gap-x-2
" :class="selected ? 'option-selected' : ''">
<label for="limiterOptions" class="text-body-xs text-black/72 flex items-center ">
<span>Afficher</span>
</label>
<span class="flex flex-row items-center gap-2">
<template x-if="selected && selected.type === 'leading-icon'">
<img :src="selected.image" :alt="selected.name">
</template>
<span x-text="selected ? selected.name : ''">
</span>
</span>
<span class="transition-all transform flex items-center" :class="{'rotate-180' : show}">
<svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
<div class="dropdown-content relative w-full overflow-auto max-h-screen-40" x-show="show" x-transition x-cloak @click.outside="show = false" x-anchor.bottom-start.offset.0="$refs.selectButton">
<template x-for="option in options">
<div>
<template x-if="option.type === 'group'">
<div class="item-category text-brand-700 font-bold">
<div class="dropdown-item-category p-2">
<span class="flex-1" x-text="option.name"></span>
</div>
</div>
</template>
<template x-if="option.type !== 'group'">
<div @click="select(option.id)" :class="option.checked ? 'selected' : ''">
<template x-if="option.href">
<div>
<a :href="option.href" class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</a>
</div>
</template>
<template x-if="!option.href">
<div class="dropdown-item cursor-pointer p-2">
<template x-if="option.image">
<img :src="option.image" :alt="option.name">
</template>
<span class="flex-1" x-text="option.name"></span>
<template x-if="option.checked">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
</svg>
</template>
</div>
</template>
</div>
</template>
</div>
</template>
</div>
<select class="sr-only " id="limiterOptions" id="limiter">
<option value="" selected disabled hidden></option>
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
</div>
<script>
function selectlimiterOptions() {
return {
rawOptions: [{
"value": "10",
"text": "10",
"selected": true
}, {
"value": "20",
"text": "20"
}, {
"value": "50",
"text": "50"
}],
options: [],
show: false,
selected: null,
init() {
Array.from(this.rawOptions).forEach(option => {
if (!option.disabled) {
this.options.push({
id: option.value,
name: option.text,
checked: option.selected,
image: option.image,
href: option.href,
type: option.type,
})
}
if (option.selected && option.value) {
this.select(option.value);
}
});
},
openSelect() {
this.show = !this.show;
},
select(id) {
this.options = this.options.map(option => {
if (option.id === id) {
option.checked = true;
this.selected = option;
} else {
option.checked = false;
}
return option;
});
document.getElementById('limiterOptions').value = this.selected.id;
this.show = false;
}
}
}
</script>
</div>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<button type="button" class=" btn btn-dark btn-simple btn-size-sm btn-icons">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 13L5.5 8L10.5 3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Retour
</button>
</div>
</div>
<div class="flex flex-col justify-center gap-y-8">
<div class="flex flex-col gap-4">
<h2 class="h5">Mes commandes</h2>
{% if order_items %}
<div>
{% render '@order-item-list' with {
order_items: order_items
} %}
{% render '@account-table-pagination' with {
array_size: order_items|length,
label: "commande",
plural_label: "commandes",
} %}
</div>
{% else %}
<div>
<p class="text-body-base">
Vous n’avez pas de commandes enregistré.
</p>
</div>
{% endif %}
</div>
{% render "@account-action-bar" with {
primary_button: null
} %}
</div>
{
"order_items": [
{
"order_id": "N°12000000206",
"order_date": "07/04/2025",
"order_total": "144,00 €",
"order_status": "En cours"
},
{
"order_id": "N°12000000206",
"order_date": "15/O1/2025",
"order_total": "72,00 €",
"order_status": "En attente"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
},
{
"order_id": "N°12000000206",
"order_date": "07/11/2024",
"order_total": "95,50 €",
"order_status": "Livré"
}
]
}
No notes defined.