feat/ajout-de-fonctionnalites (#1)

Reviewed-on: #1
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/pages/applications/[slug].vue

@@ -0,0 +1,601 @@
+<script setup lang="ts">
+import type { Application, ApplicationWrite, Environment, EnvironmentWrite } from '~/services/dto/application'
+import { getApplication, updateApplication, deleteApplication } from '~/services/applications'
+import { createEnvironment, updateEnvironment, deleteEnvironment, toggleMaintenance } from '~/services/environments'
+import type { DeployResult } from '~/services/dto/deploy'
+import { getAvailableTags, deploy } from '~/services/deploy'
+import type { EnvironmentHealth } from '~/services/dto/dashboard'
+import { getEnvironmentHealth } from '~/services/dashboard'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const slug = route.params.slug as string
+
+const application = ref<Application | null>(null)
+const loading = ref(true)
+const pendingMaintenanceByEnvId = ref<Record<number, boolean>>({})
+
+// Deploy modal
+const showDeployModal = ref(false)
+const deployEnvId = ref<number | null>(null)
+const deployTags = ref<string[]>([])
+const selectedTag = ref('')
+const loadingTags = ref(false)
+const isDeploying = ref(false)
+const deployResult = ref<DeployResult | null>(null)
+
+// Health data per env
+const healthByEnvId = ref<Record<number, EnvironmentHealth>>({})
+const loadingHealth = ref(false)
+
+// App edit modal
+const showAppModal = ref(false)
+const editForm = ref<ApplicationWrite>({ name: '', slug: '', registryImage: '', description: '', giteaUrl: '' })
+const isSubmittingApp = ref(false)
+
+// Env modal
+const showEnvModal = ref(false)
+const editingEnvId = ref<number | null>(null)
+const envForm = ref<EnvironmentWrite>({
+    name: '',
+    containerName: '',
+    deployScriptPath: '',
+    maintenanceFilePath: '',
+    appUrl: '',
+    logFiles: [],
+})
+const isSubmittingEnv = ref(false)
+
+async function loadApplication() {
+    loading.value = true
+    try {
+        application.value = await getApplication(slug)
+    } finally {
+        loading.value = false
+    }
+    loadHealthData()
+}
+
+// Application edit
+function openEditAppModal() {
+    if (!application.value) return
+    editForm.value = {
+        name: application.value.name,
+        slug: application.value.slug,
+        registryImage: application.value.registryImage,
+        description: application.value.description ?? '',
+        giteaUrl: application.value.giteaUrl ?? '',
+    }
+    showAppModal.value = true
+}
+
+async function saveApp() {
+    isSubmittingApp.value = true
+    try {
+        application.value = await updateApplication(slug, editForm.value)
+        showAppModal.value = false
+        if (editForm.value.slug !== slug) {
+            router.replace(`/applications/${editForm.value.slug}`)
+        }
+    } finally {
+        isSubmittingApp.value = false
+    }
+}
+
+async function handleDeleteApp() {
+    if (!confirm(t('applications.detail.deleteConfirm'))) return
+    await deleteApplication(slug)
+    router.push('/applications')
+}
+
+// Environment CRUD
+function openCreateEnvModal() {
+    editingEnvId.value = null
+    envForm.value = { name: '', containerName: '', deployScriptPath: '', maintenanceFilePath: '', appUrl: '', logFiles: [] }
+    showEnvModal.value = true
+}
+
+function openEditEnvModal(env: Environment) {
+    editingEnvId.value = env.id!
+    envForm.value = {
+        name: env.name,
+        containerName: env.containerName,
+        deployScriptPath: env.deployScriptPath,
+        maintenanceFilePath: env.maintenanceFilePath,
+        appUrl: env.appUrl ?? '',
+        logFiles: env.logFiles.map(lf => ({ label: lf.label, path: lf.path })),
+    }
+    showEnvModal.value = true
+}
+
+async function saveEnv() {
+    isSubmittingEnv.value = true
+    try {
+        if (editingEnvId.value) {
+            await updateEnvironment(editingEnvId.value, envForm.value)
+        } else {
+            await createEnvironment(slug, envForm.value)
+        }
+        showEnvModal.value = false
+        await loadApplication()
+    } finally {
+        isSubmittingEnv.value = false
+    }
+}
+
+async function handleDeleteEnv(envId: number) {
+    if (!confirm(t('environments.deleteConfirm'))) return
+    await deleteEnvironment(envId)
+    await loadApplication()
+}
+
+async function handleToggleMaintenance(env: Environment) {
+    const envId = env.id!
+    pendingMaintenanceByEnvId.value[envId] = true
+    try {
+        await toggleMaintenance(envId, !env.maintenance)
+        await loadApplication()
+    } finally {
+        delete pendingMaintenanceByEnvId.value[envId]
+    }
+}
+
+function addLogFile() {
+    envForm.value.logFiles.push({ label: '', path: '' })
+}
+
+function removeLogFile(index: number) {
+    envForm.value.logFiles.splice(index, 1)
+}
+
+async function openDeployModal(env: Environment) {
+    deployEnvId.value = env.id!
+    selectedTag.value = ''
+    deployResult.value = null
+    deployTags.value = []
+    showDeployModal.value = true
+    loadingTags.value = true
+    try {
+        const response = await getAvailableTags(slug)
+        deployTags.value = response.tags ?? []
+        if (deployTags.value.length > 0) {
+            selectedTag.value = deployTags.value[0]
+        }
+    } finally {
+        loadingTags.value = false
+    }
+}
+
+async function handleDeploy() {
+    if (!deployEnvId.value || !selectedTag.value) return
+    isDeploying.value = true
+    deployResult.value = null
+    try {
+        deployResult.value = await deploy(deployEnvId.value, selectedTag.value)
+        if (deployResult.value.success) {
+            await loadApplication()
+        }
+    } finally {
+        isDeploying.value = false
+    }
+}
+
+function closeDeployModal() {
+    showDeployModal.value = false
+    deployResult.value = null
+}
+
+async function loadHealthData() {
+    if (!application.value?.environments?.length) return
+    loadingHealth.value = true
+    try {
+        const promises = application.value.environments.map(async (env) => {
+            try {
+                const health = await getEnvironmentHealth(env.id!)
+                healthByEnvId.value[env.id!] = health
+            } catch {
+                // silently ignore individual env health failures
+            }
+        })
+        await Promise.all(promises)
+    } finally {
+        loadingHealth.value = false
+    }
+}
+
+function formatUptime(startedAt: string): string {
+    if (!startedAt) return '-'
+    const start = new Date(startedAt)
+    const now = new Date()
+    const diffMs = now.getTime() - start.getTime()
+    const days = Math.floor(diffMs / 86400000)
+    const hours = Math.floor((diffMs % 86400000) / 3600000)
+    const minutes = Math.floor((diffMs % 3600000) / 60000)
+    if (days > 0) return `${days}j ${hours}h`
+    if (hours > 0) return `${hours}h ${minutes}m`
+    return `${minutes}m`
+}
+
+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'
+    }
+}
+
+const envModalTitle = computed(() =>
+    editingEnvId.value ? t('environments.editButton') : t('environments.addButton')
+)
+
+onMounted(loadApplication)
+</script>
+
+<template>
+    <div class="px-4 py-8 sm:px-8 lg:px-16">
+        <!-- Back link -->
+        <NuxtLink to="/applications" class="text-neutral-400 hover:text-primary-500 text-sm mb-6 inline-flex items-center gap-1">
+            <Icon name="mdi:arrow-left" size="16" />
+            {{ t('applications.title') }}
+        </NuxtLink>
+
+        <!-- Loading -->
+        <div v-if="loading" class="animate-pulse mt-4">
+            <div class="h-10 bg-neutral-200 rounded w-1/3 mb-4" />
+            <div class="h-4 bg-neutral-200 rounded w-2/3 mb-2" />
+            <div class="h-4 bg-neutral-200 rounded w-1/2" />
+        </div>
+
+        <template v-else-if="application">
+            <!-- Application header -->
+            <div class="flex items-start justify-between pb-6">
+                <div>
+                    <h1 class="text-2xl font-bold text-primary-500 sm:text-4xl">{{ application.name }}</h1>
+                    <p v-if="application.description" class="text-neutral-500 mt-2">{{ application.description }}</p>
+                </div>
+                <div class="flex gap-2">
+                    <MalioButton
+                        :label="t('applications.detail.editButton')"
+                        variant="secondary"
+                        icon-name="mdi:pencil"
+                        icon-position="left"
+                        @click="openEditAppModal"
+                    />
+                    <MalioButton
+                        :label="t('applications.detail.deleteButton')"
+                        variant="danger"
+                        icon-name="mdi:trash-can-outline"
+                        icon-position="left"
+                        @click="handleDeleteApp"
+                    />
+                </div>
+            </div>
+
+            <!-- Application info -->
+            <div class="rounded-lg bg-tertiary-500 p-5 mb-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                    <div>
+                        <span class="text-neutral-400">{{ t('applications.detail.registryImage') }} :</span>
+                        <span class="text-neutral-800 ml-1 font-mono">{{ application.registryImage }}</span>
+                    </div>
+                    <div v-if="application.giteaUrl">
+                        <span class="text-neutral-400">{{ t('applications.detail.giteaUrl') }} :</span>
+                        <a :href="application.giteaUrl" target="_blank" class="text-primary-500 hover:underline ml-1">
+                            {{ application.giteaUrl }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Environments section -->
+            <div>
+                <div class="flex items-center justify-between pb-4">
+                    <h2 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ t('environments.title') }}</h2>
+                    <MalioButtonIcon
+                        icon="mdi:plus"
+                        aria-label="Retour"
+                        @click="openCreateEnvModal"
+                    />
+                </div>
+
+                <!-- Environments list -->
+                <div v-if="!application.environments?.length" class="rounded-lg border border-neutral-200 bg-white p-6 text-center text-neutral-500">
+                    {{ t('applications.card.noEnvironments') }}
+                </div>
+
+                <div v-for="env in application.environments" :key="env.id" class="rounded-lg bg-tertiary-500 p-5 mb-4">
+                    <div class="flex items-start justify-between">
+                        <div>
+                            <div class="flex items-center gap-3">
+                                <h3 class="text-lg font-semibold text-neutral-900">{{ env.name }}</h3>
+                                <span
+                                    class="inline-block rounded-full px-3 py-1 text-xs font-semibold"
+                                    :class="env.maintenance
+                                        ? 'bg-orange-100 text-orange-700'
+                                        : 'bg-green-100 text-green-700'"
+                                >
+                                    {{ env.maintenance ? t('environments.maintenance.active') : t('environments.maintenance.inactive') }}
+                                </span>
+                            </div>
+                            <p class="text-neutral-400 text-sm mt-1 font-mono">{{ env.containerName }}</p>
+                            <a
+                                v-if="env.appUrl"
+                                :href="env.appUrl"
+                                target="_blank"
+                                class="text-primary-500 hover:underline text-sm mt-1 inline-flex items-center gap-1"
+                            >
+                                {{ env.appUrl }}
+                                <Icon name="mdi:open-in-new" size="14" />
+                            </a>
+                        </div>
+                        <div class="flex gap-2">
+                            <MalioButton
+                                :label="t('environments.deploy.button')"
+                                icon-name="mdi:rocket-launch-outline"
+                                icon-position="left"
+                                @click="openDeployModal(env)"
+                            />
+                            <MalioButton
+                                :label="pendingMaintenanceByEnvId[env.id!]
+                                    ? t('environments.maintenance.pending')
+                                    : env.maintenance
+                                        ? t('environments.maintenance.deactivate')
+                                        : t('environments.maintenance.activate')"
+                                :variant="env.maintenance ? 'danger' : 'primary'"
+                                :icon-name="env.maintenance ? 'mdi:shield-check-outline' : 'mdi:alert-outline'"
+                                icon-position="left"
+                                :loading="!!pendingMaintenanceByEnvId[env.id!]"
+                                @click="handleToggleMaintenance(env)"
+                            />
+                        </div>
+                    </div>
+
+                    <!-- Log files -->
+                    <div v-if="env.logFiles.length" class="mt-4 border-t border-neutral-200 pt-3">
+                        <p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-2">{{ t('environments.logFiles.title') }}</p>
+                        <div v-for="lf in env.logFiles" :key="lf.id" class="text-sm text-neutral-700 flex gap-2">
+                            <span class="font-medium">{{ lf.label }} :</span>
+                            <span class="font-mono text-neutral-400">{{ lf.path }}</span>
+                        </div>
+                    </div>
+
+                    <!-- Health metrics -->
+                    <div v-if="healthByEnvId[env.id!]" class="mt-4 border-t border-neutral-200 pt-3">
+                        <p class="text-xs font-semibold uppercase tracking-wider text-neutral-400 mb-3">{{ t('environments.health.title') }}</p>
+                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+                            <div>
+                                <p class="text-xs text-neutral-400">{{ t('environments.health.status') }}</p>
+                                <span
+                                    class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold mt-1"
+                                    :class="statusClass(healthByEnvId[env.id!].status)"
+                                >
+                                    {{ t(`dashboard.status.${healthByEnvId[env.id!].status}`) }}
+                                </span>
+                            </div>
+                            <div>
+                                <p class="text-xs text-neutral-400">{{ t('environments.health.version') }}</p>
+                                <p class="text-sm font-mono text-neutral-800 mt-1">{{ healthByEnvId[env.id!].version || '-' }}</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-neutral-400">{{ t('environments.health.uptime') }}</p>
+                                <p class="text-sm text-neutral-800 mt-1">{{ formatUptime(healthByEnvId[env.id!].startedAt) }}</p>
+                            </div>
+                            <div>
+                                <p class="text-xs text-neutral-400">{{ t('environments.health.cpu') }}</p>
+                                <p class="text-sm text-neutral-800 mt-1">{{ healthByEnvId[env.id!].cpuPercent }}%</p>
+                            </div>
+                            <div class="col-span-2">
+                                <p class="text-xs text-neutral-400">{{ t('environments.health.memory') }}</p>
+                                <p class="text-sm text-neutral-800 mt-1">
+                                    {{ healthByEnvId[env.id!].memoryUsage }} / {{ healthByEnvId[env.id!].memoryLimit }}
+                                    <span class="text-neutral-400">({{ healthByEnvId[env.id!].memoryPercent }}%)</span>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex justify-center gap-4 mt-4">
+                        <MalioButton
+                            :label="t('environments.editButton')"
+                            variant="secondary"
+                            icon-name="mdi:pencil"
+                            icon-position="left"
+                            @click="openEditEnvModal(env)"
+                        />
+                        <MalioButton
+                            :label="t('environments.deleteButton')"
+                            variant="danger"
+                            icon-name="mdi:trash-can-outline"
+                            icon-position="left"
+                            @click="handleDeleteEnv(env.id!)"
+                        />
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <!-- Edit application modal -->
+        <AppModal
+            v-model="showAppModal"
+            :submit-label="t('applications.form.save')"
+            :cancel-label="t('applications.form.cancel')"
+            :loading="isSubmittingApp"
+            @submit="saveApp"
+        >
+            <template #title>{{ t('applications.detail.editButton') }}</template>
+
+            <form @submit.prevent="saveApp" class="space-y-4">
+                <div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                    <MalioInputText
+                        v-model="editForm.name"
+                        :label="t('applications.form.name')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="editForm.slug"
+                        :label="t('applications.form.slug')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="editForm.registryImage"
+                        :label="t('applications.form.registryImage')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="editForm.giteaUrl"
+                        :label="t('applications.form.giteaUrl')"
+                    />
+                </div>
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-neutral-700">{{ t('applications.form.description') }}</label>
+                    <textarea
+                        v-model="editForm.description"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
+                        rows="3"
+                    />
+                </div>
+            </form>
+        </AppModal>
+
+        <!-- Environment modal -->
+        <AppModal
+            v-model="showEnvModal"
+            :submit-label="t('environments.form.save')"
+            :cancel-label="t('environments.form.cancel')"
+            :loading="isSubmittingEnv"
+            @submit="saveEnv"
+        >
+            <template #title>{{ envModalTitle }}</template>
+
+            <form @submit.prevent="saveEnv" class="space-y-4">
+                <div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                    <MalioInputText
+                        v-model="envForm.name"
+                        :label="t('environments.form.name')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="envForm.containerName"
+                        :label="t('environments.form.containerName')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="envForm.deployScriptPath"
+                        :label="t('environments.form.deployScriptPath')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="envForm.maintenanceFilePath"
+                        :label="t('environments.form.maintenanceFilePath')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="envForm.appUrl"
+                        :label="t('environments.form.appUrl')"
+                    />
+                </div>
+
+                <!-- Log files -->
+                <div>
+                    <div class="flex items-center justify-between mb-2">
+                        <p class="text-sm font-medium text-neutral-700">{{ t('environments.logFiles.title') }}</p>
+                        <button type="button" @click="addLogFile" class="text-primary-500 hover:underline text-sm font-semibold">
+                            + {{ t('environments.logFiles.addButton') }}
+                        </button>
+                    </div>
+                    <div v-for="(lf, index) in envForm.logFiles" :key="index" class="flex gap-2 mb-2">
+                        <MalioInputText v-model="lf.label" :label="t('environments.logFiles.label')" groupClass="mt-0" inputClass="flex-1" required />
+                        <MalioInputText v-model="lf.path" :label="t('environments.logFiles.path')" groupClass="mt-0" inputClass="flex-[2]" required />
+                        <MalioButtonIcon
+                            icon="mdi:delete-outline"
+                            :aria-label="t('environments.logFiles.remove')"
+                            variant="ghost"
+                            icon-size="18"
+                            button-class="text-red-500 hover:bg-red-50 hover:text-red-700 my-1"
+                            @click="removeLogFile(index)"
+                        />
+                    </div>
+                </div>
+            </form>
+        </AppModal>
+
+        <!-- Deploy modal -->
+        <AppModal
+            v-model="showDeployModal"
+            :submit-label="isDeploying ? t('environments.deploy.deploying') : t('environments.deploy.confirm')"
+            :cancel-label="t('applications.form.cancel')"
+            :loading="isDeploying"
+            max-width="xl"
+            @submit="handleDeploy"
+            @update:model-value="!$event && closeDeployModal()"
+        >
+            <template #title>{{ t('environments.deploy.title') }}</template>
+
+            <!-- Tag selection -->
+            <div v-if="!deployResult">
+                <div v-if="loadingTags" class="py-8 text-center text-neutral-400">
+                    <Icon name="mdi:loading" size="24" class="animate-spin" />
+                    <p class="mt-2 text-sm">{{ t('environments.deploy.loadingTags') }}</p>
+                </div>
+
+                <div v-else-if="deployTags.length === 0" class="py-8 text-center text-neutral-400">
+                    <Icon name="mdi:package-variant" size="32" />
+                    <p class="mt-2 text-sm">{{ t('environments.deploy.noTags') }}</p>
+                </div>
+
+                <div v-else>
+                    <label class="mb-1 block text-sm font-medium text-neutral-700">
+                        {{ t('environments.deploy.selectTag') }}
+                    </label>
+                    <select
+                        v-model="selectedTag"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                    >
+                        <option v-for="tag in deployTags" :key="tag" :value="tag">
+                            {{ tag }}
+                        </option>
+                    </select>
+                </div>
+            </div>
+
+            <!-- Deploy result -->
+            <div v-else>
+                <div
+                    class="mb-4 flex items-center gap-2 rounded-lg px-4 py-3"
+                    :class="deployResult.success
+                        ? 'bg-green-50 text-green-700'
+                        : 'bg-red-50 text-red-700'"
+                >
+                    <Icon
+                        :name="deployResult.success ? 'mdi:check-circle' : 'mdi:alert-circle'"
+                        size="20"
+                    />
+                    <span class="text-sm font-semibold">
+                        {{ deployResult.success
+                            ? t('environments.deploy.success')
+                            : t('environments.deploy.error')
+                        }}
+                    </span>
+                    <span class="ml-auto text-xs font-mono">{{ deployResult.tag }}</span>
+                </div>
+
+                <div>
+                    <p class="mb-2 text-xs font-semibold uppercase tracking-wider text-neutral-400">
+                        {{ t('environments.deploy.output') }}
+                    </p>
+                    <pre class="max-h-80 overflow-auto rounded-lg bg-neutral-900 p-4 text-xs text-green-400 font-mono whitespace-pre-wrap">{{ deployResult.output }}</pre>
+                </div>
+            </div>
+
+            <!-- Override footer when showing result -->
+            <template v-if="deployResult" #footer>
+                <MalioButton
+                    :label="t('applications.form.cancel')"
+                    variant="tertiary"
+                    @click="closeDeployModal"
+                />
+            </template>
+        </AppModal>
+    </div>
+</template>

frontend/pages/applications/index.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { Application, ApplicationWrite } from '~/services/dto/application'
+import { getApplications, createApplication } from '~/services/applications'
+
+const { t } = useI18n()
+const router = useRouter()
+
+const applications = ref<Application[]>([])
+const loading = ref(true)
+const showCreateModal = ref(false)
+const createForm = ref<ApplicationWrite>({
+    name: '',
+    slug: '',
+    registryImage: '',
+    description: '',
+    giteaUrl: '',
+})
+const isSubmitting = ref(false)
+
+async function loadApplications() {
+    loading.value = true
+    try {
+        applications.value = await getApplications()
+    } finally {
+        loading.value = false
+    }
+}
+
+function openCreateModal() {
+    createForm.value = { name: '', slug: '', registryImage: '', description: '', giteaUrl: '' }
+    showCreateModal.value = true
+}
+
+async function handleCreate() {
+    isSubmitting.value = true
+    try {
+        const created = await createApplication(createForm.value)
+        showCreateModal.value = false
+        router.push(`/applications/${created.slug}`)
+    } finally {
+        isSubmitting.value = false
+    }
+}
+
+function generateSlug(name: string) {
+    createForm.value.slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+}
+
+onMounted(loadApplications)
+</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('applications.title') }}</h1>
+            <MalioButton
+                :label="t('applications.addButton')"
+                icon-name="mdi:plus"
+                icon-position="left"
+                @click="openCreateModal"
+            />
+        </div>
+
+        <!-- Loading -->
+        <div v-if="loading" class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
+            <div v-for="i in 3" :key="i" class="rounded-lg bg-tertiary-500 p-5 animate-pulse">
+                <div class="h-5 bg-neutral-300 rounded w-1/2 mb-3" />
+                <div class="h-4 bg-neutral-300 rounded w-3/4 mb-2" />
+                <div class="h-4 bg-neutral-300 rounded w-1/3" />
+            </div>
+        </div>
+
+        <!-- Empty state -->
+        <div v-else-if="applications.length === 0" class="rounded-lg border border-neutral-200 bg-white p-6 text-center">
+            <h3 class="text-lg font-medium text-neutral-800">{{ t('applications.emptyTitle') }}</h3>
+            <p class="text-neutral-500 mt-1">{{ t('applications.emptyDescription') }}</p>
+        </div>
+
+        <!-- Application cards -->
+        <div v-else class="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]">
+            <NuxtLink
+                v-for="app in applications"
+                :key="app.slug"
+                :to="`/applications/${app.slug}`"
+                class="rounded-lg bg-tertiary-500 p-5 transition hover:shadow-md"
+            >
+                <div class="flex items-start justify-between">
+                    <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>
+                <p v-if="app.description" class="text-neutral-500 text-sm mt-2 line-clamp-2">{{ app.description }}</p>
+                <p class="text-neutral-400 text-xs mt-4 flex items-center gap-1">
+                    <Icon name="mdi:server" size="14" />
+                    {{ app.environments?.length ?? 0 }} {{ t('applications.card.environments', app.environments?.length ?? 0) }}
+                </p>
+            </NuxtLink>
+        </div>
+
+        <!-- Create modal -->
+        <AppModal
+            v-model="showCreateModal"
+            :submit-label="t('applications.form.save')"
+            :cancel-label="t('applications.form.cancel')"
+            :loading="isSubmitting"
+            @submit="handleCreate"
+        >
+            <template #title>{{ t('applications.addButton') }}</template>
+
+            <form @submit.prevent="handleCreate" class="space-y-4">
+                <div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
+                    <MalioInputText
+                        v-model="createForm.name"
+                        :label="t('applications.form.name')"
+                        @update:model-value="generateSlug"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="createForm.slug"
+                        :label="t('applications.form.slug')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="createForm.registryImage"
+                        :label="t('applications.form.registryImage')"
+                        required
+                    />
+                    <MalioInputText
+                        v-model="createForm.giteaUrl"
+                        :label="t('applications.form.giteaUrl')"
+                    />
+                </div>
+                <div>
+                    <label class="mb-1 block text-sm font-medium text-neutral-700">{{ t('applications.form.description') }}</label>
+                    <textarea
+                        v-model="createForm.description"
+                        class="w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:ring-2 focus:ring-secondary-500/20"
+                        rows="3"
+                    />
+                </div>
+            </form>
+        </AppModal>
+    </div>
+</template>

frontend/pages/dashboard.vue

@@ -0,0 +1,96 @@
+<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>
+            <MalioButtonIcon
+                icon="mdi:refresh"
+                :aria-label="t('dashboard.refresh')"
+                icon-size="22"
+                @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>

frontend/pages/index.vue

@@ -1,176 +0,0 @@
-<template>
-    <div class="flex h-full flex-col gap-6 pb-10">
-        <section class="flex flex-col gap-2">
-            <h1 class="text-2xl font-bold text-neutral-900 sm:text-3xl">
-                {{ t('applications.title') }}
-            </h1>
-            <p class="max-w-3xl text-sm leading-6 text-neutral-500 sm:text-base">
-                {{ t('applications.description') }}
-            </p>
-        </section>
-
-        <section class="min-h-0 rounded-3xl border border-primary-500/15 bg-white shadow-sm">
-            <header class="flex flex-col gap-4 border-b border-primary-500/10 px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
-                <div>
-                    <h2 class="text-xl font-bold text-primary-500">
-                        {{ t('applications.listTitle') }}
-                    </h2>
-                    <p class="mt-1 text-sm text-neutral-500">
-                        {{ t('applications.listDescription') }}
-                    </p>
-                </div>
-
-                <button
-                    class="inline-flex items-center justify-center rounded-xl border border-primary-500/20 px-4 py-2 text-sm font-semibold text-primary-500 transition-colors hover:bg-tertiary-500 disabled:cursor-not-allowed disabled:opacity-60"
-                    :disabled="loading"
-                    @click="loadApplications()"
-                >
-                    <Icon
-                        name="mdi:refresh"
-                        size="18"
-                        class="mr-2"
-                        :class="loading ? 'animate-spin' : ''"
-                    />
-                    {{ t('applications.actions.refresh') }}
-                </button>
-            </header>
-
-            <div v-if="loading" class="grid gap-4 p-6 xl:grid-cols-2">
-                <div
-                    v-for="index in 4"
-                    :key="index"
-                    class="animate-pulse rounded-2xl border border-primary-500/10 p-5"
-                >
-                    <div class="h-4 w-24 rounded bg-neutral-200" />
-                    <div class="mt-4 h-7 w-40 rounded bg-neutral-200" />
-                    <div class="mt-3 h-4 w-full rounded bg-neutral-100" />
-                    <div class="mt-6 h-11 w-44 rounded-xl bg-neutral-200" />
-                </div>
-            </div>
-
-            <div v-else-if="applications.length === 0" class="px-6 py-12 text-center">
-                <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-tertiary-500 text-primary-500">
-                    <Icon name="mdi:server-off" size="28" />
-                </div>
-                <h3 class="mt-4 text-lg font-bold text-primary-500">
-                    {{ t('applications.emptyTitle') }}
-                </h3>
-                <p class="mt-2 text-sm text-neutral-500">
-                    {{ t('applications.emptyDescription') }}
-                </p>
-            </div>
-
-            <div v-else class="grid gap-4 p-6 xl:grid-cols-2">
-                <article
-                    v-for="application in applications"
-                    :key="application.slug"
-                    class="flex h-full min-w-0 flex-col rounded-2xl border p-5 transition-colors"
-                    :class="application.maintenance ? 'border-red-200 bg-red-50/60' : 'border-emerald-200 bg-emerald-50/60'"
-                >
-                    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-                        <div class="min-w-0">
-                            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-neutral-500">
-                                {{ application.slug }}
-                            </p>
-                            <h3 class="mt-2 break-words text-xl font-bold text-primary-500">
-                                {{ application.name }}
-                            </h3>
-                        </div>
-
-                        <span
-                            class="inline-flex w-fit items-center rounded-full px-3 py-1 text-xs font-bold"
-                            :class="application.maintenance ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'"
-                        >
-                            <span
-                                class="mr-2 h-2.5 w-2.5 rounded-full"
-                                :class="application.maintenance ? 'bg-red-500' : 'bg-emerald-500'"
-                            />
-                            {{ application.maintenance ? t('applications.status.active') : t('applications.status.inactive') }}
-                        </span>
-                    </div>
-
-                    <p class="mt-4 flex-1 text-sm leading-6 text-neutral-600">
-                        {{
-                            application.maintenance
-                                ? t('applications.card.activeDescription')
-                                : t('applications.card.inactiveDescription')
-                        }}
-                    </p>
-
-                    <div class="mt-6 flex flex-col gap-3 border-t border-black/5 pt-4 sm:flex-row sm:items-center sm:justify-between">
-                        <p class="text-xs font-medium uppercase tracking-[0.14em] text-neutral-400">
-                            {{ t('applications.card.triggerFile') }}
-                        </p>
-
-                        <button
-                            class="inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-semibold text-white transition-opacity disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto sm:min-w-[220px]"
-                            :class="application.maintenance ? 'bg-red-600 hover:bg-red-700' : 'bg-primary-500 hover:bg-primary-600'"
-                            :disabled="Boolean(pendingBySlug[application.slug])"
-                            @click="toggleMaintenance(application)"
-                        >
-                            <Icon
-                                :name="pendingBySlug[application.slug] ? 'mdi:loading' : (application.maintenance ? 'mdi:shield-check-outline' : 'mdi:alert-outline')"
-                                size="18"
-                                class="mr-2"
-                                :class="pendingBySlug[application.slug] ? 'animate-spin' : ''"
-                            />
-                            {{
-                                pendingBySlug[application.slug]
-                                    ? t('applications.actions.pending')
-                                    : application.maintenance
-                                        ? t('applications.actions.deactivate')
-                                        : t('applications.actions.activate')
-                            }}
-                        </button>
-                    </div>
-                </article>
-            </div>
-        </section>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { ManagedApplication } from '~/services/dto/managed-application'
-import { getManagedApplications, setApplicationMaintenance } from '~/services/managed-applications'
-
-const { t } = useI18n()
-
-const applications = ref<ManagedApplication[]>([])
-const loading = ref(true)
-const pendingBySlug = ref<Record<string, boolean>>({})
-
-async function loadApplications() {
-    loading.value = true
-
-    try {
-        applications.value = await getManagedApplications()
-    } finally {
-        loading.value = false
-    }
-}
-
-async function toggleMaintenance(application: ManagedApplication) {
-    pendingBySlug.value = {
-        ...pendingBySlug.value,
-        [application.slug]: true
-    }
-
-    try {
-        const updatedApplication = await setApplicationMaintenance(application.slug, !application.maintenance)
-        applications.value = applications.value.map((item) => item.slug === updatedApplication.slug ? updatedApplication : item)
-    } finally {
-        pendingBySlug.value = {
-            ...pendingBySlug.value,
-            [application.slug]: false
-        }
-    }
-}
-
-onMounted(() => {
-    loadApplications()
-})
-
-useHead({
-    title: 'Applications'
-})
-</script>