frontend/src/views/configuracoes/ConfiguracoesView.vue

<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import LayoutSistema from "../../layout/LayoutSistema.vue";
import BotaoAlterarTema from "../../components/BotaoAlterarTema.vue";
import { useAuth } from "../../composables/useAuth.js";

const router = useRouter();
const { user } = useAuth();
const isAdmin = computed(() => String(user.value?.Nivel) === "3");

function irParaUsuarios() {
  router.push({ name: "usuarios" });
}
</script>

<template>
  <LayoutSistema>
    <div
      class="min-h-[calc(100vh-var(--layout-header-height))] flex items-start justify-center px-4 pt-8 pb-12"
    >
      <div class="w-full max-w-[640px] space-y-6">
        <section
          class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50"
        >
          <div class="flex items-center gap-4">
            <div
              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary dark:bg-primary/20"
            >
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 21v-7" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 10V3" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-9" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8V3" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M20 21v-5" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M20 12V3" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M1 14h6" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 8h6" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M17 16h6" />
              </svg>
            </div>
            <div class="min-w-0">
              <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
                Configurações do Sistema
              </h2>
              <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                Gerencie usuários e preferências da plataforma.
              </p>
            </div>
          </div>
        </section>

        <section v-if="isAdmin">
          <div class="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">
            Usuários & Acesso
          </div>

          <button
            type="button"
            class="w-full rounded-2xl border border-gray-200 !bg-none bg-background/70 p-5 text-left shadow-sm dark:border-gray-700 dark:bg-background/20"
            @click="irParaUsuarios"
          >
            <div class="flex items-center justify-between gap-4">
              <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary dark:bg-primary/20">
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 19a4 4 0 0 0-8 0" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 12a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 18.5A3.5 3.5 0 0 0 4 15" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.5A3.5 3.5 0 0 1 20 15" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12a2.25 2.25 0 1 0 0-4.5A2.25 2.25 0 0 0 5 12Z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 12a2.25 2.25 0 1 0 0-4.5A2.25 2.25 0 0 0 19 12Z" />
                  </svg>
                </div>
                <div>
                  <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Gerenciar Usuários</div>
                  <div class="text-xs text-gray-500 dark:text-gray-400">Cadastre e gerencie usuários, perfis e níveis de acesso.</div>
                </div>
              </div>
              <span class="inline-flex items-center justify-center rounded-md !p-2 !bg-none !bg-transparent !border-0 !text-current hover:!bg-black/10 dark:hover:!bg-white/10 motion-safe:transition-colors">
                <svg class="h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m9 6 6 6-6 6" />
                </svg>
              </span>
            </div>
          </button>
        </section>

        <section>
          <div class="mb-3 text-xs font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">
            Aparência
          </div>

          <div class="w-full rounded-2xl border border-gray-200 bg-background/70 p-5 shadow-sm dark:border-gray-700 dark:bg-background/20">
            <div class="flex items-center justify-between gap-4">
              <div class="flex items-center gap-3">
                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary dark:bg-primary/20">
                  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
                  </svg>
                </div>
                <div>
                  <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Tema</div>
                  <div class="text-xs text-gray-500 dark:text-gray-400">Alternar entre tema claro e escuro</div>
                </div>
              </div>
              <BotaoAlterarTema />
            </div>
          </div>
        </section>
      </div>
    </div>
  </LayoutSistema>
</template>