feat : add dashboard page with container status overview

frontend/pages/dashboard.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { DashboardResponse } from '~/services/dto/dashboard'
+import { getDashboard } from '~/services/dashboard'
+
+const { t } = useI18n()
+
+const data = ref<DashboardResponse | null>(null)
+const loading = ref(true)
+
+async function loadDashboard() {
+    loading.value = true
+    try {
+        data.value = await getDashboard()
+    } finally {
+        loading.value = false
+    }
+}
+
+function statusClass(status: string): string {
+    switch (status) {
+        case 'running': return 'bg-green-100 text-green-700'
+        case 'exited': return 'bg-red-100 text-red-700'
+        case 'restarting': return 'bg-orange-100 text-orange-700'
+        default: return 'bg-neutral-100 text-neutral-500'
+    }
+}
+
+function statusLabel(status: string): string {
+    return t(`dashboard.status.${status}`)
+}
+
+onMounted(loadDashboard)
+</script>
+
+<template>
+    <div class="px-4 py-8 sm:px-8 lg:px-16">
+        <div class="flex items-center justify-between pb-6">
+            <h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ t('dashboard.title') }}</h1>
+            <MalioButton
+                :label="t('dashboard.refresh')"
+                variant="secondary"
+                icon-name="mdi:refresh"
+                icon-position="left"
+                :loading="loading"
+                @click="loadDashboard"
+            />
+        </div>
+
+        <!-- Loading -->
+        <div v-if="loading && !data" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div v-for="i in 3" :key="i" class="rounded-lg bg-tertiary-500 p-5 animate-pulse">
+                <div class="h-6 bg-neutral-300 rounded w-1/3 mb-4" />
+                <div class="h-4 bg-neutral-300 rounded w-2/3 mb-2" />
+                <div class="h-4 bg-neutral-300 rounded w-1/2" />
+            </div>
+        </div>
+
+        <!-- Dashboard cards -->
+        <div v-else-if="data" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <NuxtLink
+                v-for="app in data.applications"
+                :key="app.slug"
+                :to="`/applications/${app.slug}`"
+                class="rounded-lg bg-tertiary-500 p-5 transition hover:shadow-md"
+            >
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold text-neutral-900">{{ app.name }}</h3>
+                    <a
+                        v-if="app.giteaUrl"
+                        :href="app.giteaUrl"
+                        target="_blank"
+                        class="text-neutral-400 hover:text-primary-500"
+                        @click.stop
+                    >
+                        <Icon name="mdi:open-in-new" size="18" />
+                    </a>
+                </div>
+
+                <div v-for="env in app.environments" :key="env.id" class="flex items-center justify-between py-2 border-t border-neutral-200 first:border-t-0">
+                    <span class="text-sm text-neutral-700">{{ env.name }}</span>
+                    <div class="flex items-center gap-3">
+                        <span class="text-xs font-mono text-neutral-400">{{ env.version }}</span>
+                        <span
+                            class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold"
+                            :class="statusClass(env.status)"
+                        >
+                            {{ statusLabel(env.status) }}
+                        </span>
+                    </div>
+                </div>
+
+                <div v-if="!app.environments.length" class="text-sm text-neutral-400">
+                    {{ t('applications.card.noEnvironments') }}
+                </div>
+            </NuxtLink>
+        </div>
+    </div>
+</template>