48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-primary-500">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">
|
|
<AdminClientTab v-if="activeTab === 'clients'" />
|
|
<AdminStatusTab v-if="activeTab === 'statuses'" />
|
|
<AdminEffortTab v-if="activeTab === 'efforts'" />
|
|
<AdminPriorityTab v-if="activeTab === 'priorities'" />
|
|
<AdminTagTab v-if="activeTab === 'tags'" />
|
|
<AdminUserTab v-if="activeTab === 'users'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
useHead({ title: 'Administration' })
|
|
|
|
const tabs = [
|
|
{ key: 'clients', label: 'Clients' },
|
|
{ key: 'statuses', label: 'Statuts' },
|
|
{ key: 'efforts', label: 'Efforts' },
|
|
{ key: 'priorities', label: 'Priorités' },
|
|
{ key: 'tags', label: 'Tags' },
|
|
{ key: 'users', label: 'Utilisateurs' },
|
|
] as const
|
|
|
|
type TabKey = typeof tabs[number]['key']
|
|
|
|
const activeTab = ref<TabKey>('clients')
|
|
</script>
|