feat(events): Add comprehensive events management with dynamic fetching and UI

- Integrate Reka UI Tabs component for event browsing
- Create useEvents composable for event data management
- Implement events API integration with error handling
- Add events page with upcoming and past events sections
- Configure environment variables for API connection
- Add internationalization support for events navigation

src/pages/events.vue

@@ -0,0 +1,115 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+import { useEvents } from '@/composables/useEvents'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Button } from '@/components/ui/button'
+import { format } from 'date-fns'
+
+const { upcomingEvents, pastEvents, isLoading, error, refresh } = useEvents()
+
+function formatDate(dateStr: string) {
+  return format(new Date(dateStr), 'PPP')
+}
+</script>
+
+<template>
+  <div class="container mx-auto py-8 px-4">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold">Events</h1>
+      <Button variant="outline" @click="refresh" :disabled="isLoading">
+        <i-heroicons-arrow-path class="w-4 h-4 mr-2" :class="{ 'animate-spin': isLoading }" />
+        Refresh
+      </Button>
+    </div>
+
+    <Tabs default-value="upcoming" class="w-full">
+      <TabsList class="grid w-full grid-cols-2">
+        <TabsTrigger value="upcoming">Upcoming Events</TabsTrigger>
+        <TabsTrigger value="past">Past Events</TabsTrigger>
+      </TabsList>
+
+      <div v-if="error" class="mt-4 p-4 bg-destructive/15 text-destructive rounded-lg">
+        {{ error.message }}
+      </div>
+
+      <TabsContent value="upcoming">
+        <ScrollArea class="h-[600px] w-full pr-4" v-if="upcomingEvents.length">
+          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <Card v-for="event in upcomingEvents" :key="event.id" class="flex flex-col">
+              <CardHeader>
+                <CardTitle>{{ event.name }}</CardTitle>
+                <CardDescription>{{ event.info }}</CardDescription>
+              </CardHeader>
+              <CardContent class="flex-grow">
+                <div class="space-y-2">
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">Start Date:</span>
+                    <span>{{ formatDate(event.event_start_date) }}</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">End Date:</span>
+                    <span>{{ formatDate(event.event_end_date) }}</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">Tickets Available:</span>
+                    <span>{{ event.amount_tickets - event.sold }}</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">Price:</span>
+                    <span>{{ event.price_per_ticket }} {{ event.currency }}</span>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button class="w-full" :disabled="event.amount_tickets <= event.sold">
+                  Buy Ticket
+                </Button>
+              </CardFooter>
+            </Card>
+          </div>
+        </ScrollArea>
+        <div v-else-if="!isLoading" class="text-center py-8 text-muted-foreground">
+          No upcoming events found
+        </div>
+      </TabsContent>
+
+      <TabsContent value="past">
+        <ScrollArea class="h-[600px] w-full pr-4" v-if="pastEvents.length">
+          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <Card v-for="event in pastEvents" :key="event.id" class="flex flex-col opacity-75">
+              <CardHeader>
+                <CardTitle>{{ event.name }}</CardTitle>
+                <CardDescription>{{ event.info }}</CardDescription>
+              </CardHeader>
+              <CardContent class="flex-grow">
+                <div class="space-y-2">
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">Start Date:</span>
+                    <span>{{ formatDate(event.event_start_date) }}</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">End Date:</span>
+                    <span>{{ formatDate(event.event_end_date) }}</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">Total Tickets:</span>
+                    <span>{{ event.amount_tickets }}</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-muted-foreground">Tickets Sold:</span>
+                    <span>{{ event.sold }}</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </ScrollArea>
+        <div v-else-if="!isLoading" class="text-center py-8 text-muted-foreground">
+          No past events found
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>