matthieu
c7b1e62037
Add admin page with tabs for managing task statuses, efforts, priorities and types, with CRUD drawers and color picker. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
46 lines
1.5 KiB
Vue
46 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-neutral-900">Administration</h1>
|
|
|
|
<div class="mt-6 border-b border-neutral-200">
|
|
<nav class="flex gap-6">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="px-1 pb-3 text-sm font-semibold transition"
|
|
:class="activeTab === tab.key
|
|
? 'border-b-2 border-primary-500 text-primary-500'
|
|
: 'text-neutral-500 hover:text-neutral-700'"
|
|
@click="activeTab = tab.key"
|
|
>
|
|
{{ tab.label }}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<AdminStatusTab v-if="activeTab === 'statuses'" />
|
|
<AdminEffortTab v-if="activeTab === 'efforts'" />
|
|
<AdminPriorityTab v-if="activeTab === 'priorities'" />
|
|
<AdminTypeTab v-if="activeTab === 'types'" />
|
|
<AdminUserTab v-if="activeTab === 'users'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
useHead({ title: 'Administration' })
|
|
|
|
const tabs = [
|
|
{ key: 'statuses', label: 'Statuts' },
|
|
{ key: 'efforts', label: 'Efforts' },
|
|
{ key: 'priorities', label: 'Priorités' },
|
|
{ key: 'types', label: 'Types' },
|
|
{ key: 'users', label: 'Utilisateurs' },
|
|
] as const
|
|
|
|
type TabKey = typeof tabs[number]['key']
|
|
|
|
const activeTab = ref<TabKey>('statuses')
|
|
</script>
|