The-Workers-Club/templates/tpl_dashboard_body.html

<section class="grid gap-4">
  <div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-4 flex items-center justify-between">
    <div>
      <h1 class="text-xl font-bold">Welcome, {{ user.username }}</h1>
      <p class="text-slate-300">Role: <span class="font-semibold uppercase">{{ user.role }}</span></p>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-brand-600 opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
    </svg>
  </div>

  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Member tiles -->

    <a href="{{ url_for('info_page') }}" class="group relative rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2 focus:ring-offset-slate-950 col-span-full">
  <div class="flex items-center gap-3">
    <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-semibold">Department / Store Info</h3>
      <p class="mt-1 text-sm text-slate-400">Phones, extensions, support contacts, and notes.</p>
    </div>
  </div>
</a>

    <a href="{{ url_for('availability') }}" class="group relative rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2 focus:ring-offset-slate-950">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10m-7 4h4m-9 5h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v11a2 2 0 002 2z" />
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold">Your Availability</h3>
          <p class="mt-1 text-sm text-slate-400">Set your weekly pattern.</p>
        </div>
      </div>
    </a>

    <a href="{{ url_for('request_off') }}" class="group relative rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 17l4 4 4-4m0-5l-4-4-4 4" />
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold">Request Off</h3>
          <p class="mt-1 text-sm text-slate-400">Ask for specific days off.</p>
        </div>
      </div>
    </a>

    <a href="{{ url_for('secret_santa') }}" class="group relative rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.5 0-3 1-3 3 0 1.1.9 2 2 2h2v1a2 2 0 01-2 2H8m4-8c1.5 0 3 1 3 3 0 1.1-.9 2-2 2h-2v1a2 2 0 002 2h4" />
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold">Secret Santa</h3>
          <p class="mt-1 text-sm text-slate-400">Fill out your gift preferences.</p>
        </div>
      </div>
    </a>

    {% if user.role == 'admin' %}
    <!-- Admin tiles -->
    <a href="{{ url_for('admin_availability') }}" class="group rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold">Team Availability</h3>
          <p class="mt-1 text-sm text-slate-400">View weekly patterns by user.</p>
        </div>
      </div>
    </a>

    <a href="{{ url_for('admin_requests') }}" class="group rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2" />
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold">Time-off Requests</h3>
          <p class="mt-1 text-sm text-slate-400">Approve or deny requests.</p>
        </div>
      </div>
    </a>

    <a href="{{ url_for('admin_secret_santa') }}" class="group rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 22s8-4 8-10V5a8 8 0 10-16 0v7c0 6 8 10 8 10z" />
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold">Secret Santa (Admin)</h3>
          <p class="mt-1 text-sm text-slate-400">Browse entries and export data.</p>
        </div>
      </div>
    </a>

    <a href="{{ url_for('admin_users') }}" class="group rounded-2xl border border-slate-800 bg-slate-900/60 p-5 hover:border-brand-600/60 hover:shadow-xl hover:shadow-brand-600/10 transition-all duration-200">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-xl bg-brand-600/10 border border-brand-600/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A4 4 0 017 17h10a4 4 0 011.879.804M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold">User Management</h3>
          <p class="mt-1 text-sm text-slate-400">Create accounts and set roles.</p>
        </div>
      </div>
    </a>
    {% endif %}
  </div>
</section>