event maquette

components/Ui/EventList.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <v-list>
+
+      <v-list-item
+        class="event-item"
+        v-for="event in events"
+        :key="event.id"
+        :subtitle="formatDate(event.date)"
+        :title="event.name"
+      >
+        <template v-slot:prepend>
+          <v-avatar color="grey-lighten-1">
+            <v-img :src="event.image" alt="Image de l'événement" />
+          </v-avatar>
+        </template>
+
+        <template v-slot:append>
+          <v-avatar color="primary" @click="$emit('edit', event.id)">
+            <v-icon>fas fa-pencil</v-icon>
+          </v-avatar>
+          <v-avatar color="error" @click="$emit('delete', event.id)">
+            <v-icon>fas fa-trash</v-icon>
+          </v-avatar>
+        </template>
+      </v-list-item>
+
+    </v-list>
+
+    <div class="d-flex justify-space-between px-4 py-2">
+      <v-btn variant="outlined" @click="$emit('load-prev')">Précédents</v-btn>
+      <v-btn variant="outlined" @click="$emit('load-next')">Suivants</v-btn>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits } from 'vue'
+
+interface Event {
+  id: number
+  name: string
+  date: string
+  location: string
+  image: string
+}
+
+const props = defineProps<{ events: Event[] }>()
+const emits = defineEmits(['edit', 'delete', 'load-next', 'load-prev'])
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('fr-FR', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+</script>
+
+<style scoped>
+.event-item {
+  margin-top: 20px;
+}
+</style>

pages/freemium/events.vue

@@ -1,7 +1,57 @@
 <template>
-  <div class="d-flex flex-column align-center">
-    <h2 class="ma-4">Freemium</h2>
-  </div>
+  <v-container fluid>
+    <v-row>
+      <!-- Bloc événements -->
+      <v-col cols="12" md="8">
+        <v-card>
+          <v-tabs v-model="tab">
+            <v-tab value="future">À venir</v-tab>
+            <v-tab value="past">Passés</v-tab>
+          </v-tabs>
+
+          <v-tabs-window v-model="tab">
+            <v-tabs-window-item value="future">
+              <UiEventList
+                :events="upcomingEvents"
+                @load-next="loadNextUpcoming"
+                @load-prev="loadPrevUpcoming"
+                @edit="editEvent"
+                @delete="deleteEvent"
+              />
+            </v-tabs-window-item>
+            <v-tabs-window-item value="past">
+              <UiEventList
+                :events="pastEvents"
+                @load-next="loadNextPast"
+                @load-prev="loadPrevPast"
+                @edit="editEvent"
+                @delete="deleteEvent"
+              />
+            </v-tabs-window-item>
+          </v-tabs-window>
+
+          <v-card-actions>
+            <v-btn color="primary" @click="addEvent">Ajouter un événement</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+
+      <!-- Bloc structure -->
+      <v-col cols="12" md="4">
+        <v-card>
+          <v-card-title>Structure</v-card-title>
+          <v-card-text>
+            <div><strong>Nom:</strong> {{ structure.name }}</div>
+            <div><strong>Adresse:</strong> {{ structure.address }}</div>
+            <div><strong>Email:</strong> {{ structure.email }}</div>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn color="secondary" @click="editStructure">Modifier la structure</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script setup lang="ts">
@@ -10,4 +60,96 @@ definePageMeta({
   name: 'freemium_events_page',
 })
 
+import { ref } from 'vue'
+
+const tab = ref(null)
+
+// Pagination state
+const upcomingPage = ref(1)
+const pastPage = ref(1)
+
+const upcomingEvents = ref<Event[]>([{
+  'id': 1,
+  'name': "Mon événement",
+  'date': "2025/10/25",
+  'location': "Cluses",
+  'image': "https://www.ville-lecastellet.fr/wp-content/uploads/sites/2/2022/04/declaration-devenements.jpg"
+},
+  {
+    'id': 2,
+    'name': "Noel",
+    'date': "2025/12/25",
+    'location': "Thyez",
+    'image': "https://www.maisonvictor.fr/img/cms/sapin%20de%20noel.jpg"
+  }
+  ])
+const pastEvents = ref<Event[]>([{
+  'id': 3,
+  'name': "Musique en stock",
+  'date': "2025/07/03",
+  'location': "Scionzier",
+  'image': "https://musiquesenstock.fr/wp-content/uploads/MES2025_AFF_H-1024x695.jpg"
+}])
+
+const structure = ref({
+  name: 'École de musique Demo',
+  address: '123 rue de la Musique',
+  email: 'contact@musique.fr'
+})
+
+function loadNextUpcoming() {
+  upcomingPage.value++
+  fetchUpcoming()
+}
+
+function loadPrevUpcoming() {
+  if (upcomingPage.value > 1) upcomingPage.value--
+  fetchUpcoming()
+}
+
+function loadNextPast() {
+  pastPage.value++
+  fetchPast()
+}
+
+function loadPrevPast() {
+  if (pastPage.value > 1) pastPage.value--
+  fetchPast()
+}
+
+function fetchUpcoming() {
+  // TODO: call API with page=upcomingPage
+  console.log('fetch upcoming events page', upcomingPage.value)
+}
+
+function fetchPast() {
+  // TODO: call API with page=pastPage
+  console.log('fetch past events page', pastPage.value)
+}
+
+function editEvent(eventId: number) {
+  // TODO: navigate to event edit page
+  console.log('edit event', eventId)
+}
+
+function deleteEvent(eventId: number) {
+  // TODO: call delete API then refresh
+  console.log('delete event', eventId)
+}
+
+function addEvent() {
+  // TODO: navigate to add event page
+  console.log('add new event')
+}
+
+function editStructure() {
+  // TODO: navigate to edit structure page
+  console.log('edit structure')
+}
 </script>
+
+<style scoped>
+.v-card {
+  margin-bottom: 16px;
+}
+</style>