sgse-app/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte

<script lang="ts">
	import { resolve } from '$app/paths';
  const menuItems = [
    {
      categoria: "Gestão de Ausências",
      descricao: "Gerencie solicitações de ausências e aprovações",
      icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>`,
      gradient: "from-orange-500/10 to-orange-600/20",
      accentColor: "text-orange-600",
      bgIcon: "bg-orange-500/20",
      opcoes: [
        {
          nome: "Gestão de Ausências",
          descricao: "Visualizar e gerenciar solicitações de ausências",
          href: "/secretaria-executiva/gestao-ausencias",
          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>`,
        },
      ],
    },
  ];
</script>

<main class="container mx-auto px-4 py-4">
  <!-- Breadcrumb -->
  <div class="text-sm breadcrumbs mb-4">
    <ul>
      <li><a href={resolve('/')} class="text-primary hover:underline">Dashboard</a></li>
      <li>Secretaria Executiva</li>
    </ul>
  </div>

  <!-- Cabeçalho -->
  <div class="mb-8">
    <h1 class="text-4xl font-bold text-primary mb-2">Secretaria Executiva</h1>
    <p class="text-lg text-base-content/70">
      Gerencie processos executivos e administrativos
    </p>
  </div>

  <!-- Menu de Opções -->
  <div class="space-y-8">
    {#each menuItems as categoria}
      <div
        class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300"
      >
        <div class="card-body">
          <!-- Cabeçalho da Categoria -->
          <div class="flex items-start gap-6 mb-6">
            <div class="p-4 {categoria.bgIcon} rounded-2xl">
              <div class={categoria.accentColor}>
                {@html categoria.icon}
              </div>
            </div>
            <div class="flex-1">
              <h2 class="card-title text-2xl mb-2 {categoria.accentColor}">
                {categoria.categoria}
              </h2>
              <p class="text-base-content/70">{categoria.descricao}</p>
            </div>
          </div>

          <!-- Grid de Opções -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {#each categoria.opcoes as opcao}
              <a
                href={opcao.href}
                class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
              >
                <div class="flex flex-col h-full">
                  <div class="flex items-start justify-between mb-4">
                    <div
                      class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
                    >
                      <div
                        class="{categoria.accentColor} group-hover:text-white"
                      >
                        {@html opcao.icon}
                      </div>
                    </div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 5l7 7-7 7"
                      />
                    </svg>
                  </div>
                  <h3
                    class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
                  >
                    {opcao.nome}
                  </h3>
                  <p class="text-sm text-base-content/70 flex-1">
                    {opcao.descricao}
                  </p>
                </div>
              </a>
            {/each}
          </div>
        </div>
      </div>
    {/each}
  </div>

  <!-- Card de Ajuda -->
  <div class="alert alert-info shadow-lg mt-8">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      class="stroke-current shrink-0 w-6 h-6"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      ></path>
    </svg>
    <div>
      <h3 class="font-bold">Precisa de ajuda?</h3>
      <div class="text-sm">
        Entre em contato com o suporte técnico ou consulte a documentação do
        sistema para mais informações sobre as funcionalidades da Secretaria
        Executiva.
      </div>
    </div>
  </div>
</main>

<style>
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card {
    animation: fadeInUp 0.5s ease-out;
  }
</style>