feat: tables page

lib/gallium/ticketing.ex

@@ -20,6 +20,32 @@ defmodule Gallium.Ticketing do
     |> Repo.preload([:payment, :accompany, user: :ticket])
   end
 
+  @doc """
+  Groups attendees (and their accompanies) by `table_preference`.
+  """
+  def list_tables_with_attendees do
+    Attendee
+    |> where([a], not is_nil(a.table_preference) and a.table_preference != "")
+    |> order_by([a], asc: a.table_preference, asc: a.inserted_at)
+    |> Repo.all()
+    |> Repo.preload(:accompany)
+    |> Enum.group_by(& &1.table_preference)
+    |> Enum.map(fn {table, attendees} -> {table, table_people(attendees)} end)
+    |> Enum.sort_by(fn {table, _} -> table end)
+  end
+
+  defp table_people(attendees) do
+    Enum.flat_map(attendees, &attendee_and_accompany/1)
+  end
+
+  defp attendee_and_accompany(%Attendee{accompany: nil} = attendee) do
+    [%{full_name: attendee.full_name}]
+  end
+
+  defp attendee_and_accompany(%Attendee{accompany: accompany} = attendee) do
+    [%{full_name: attendee.full_name}, %{full_name: accompany.full_name}]
+  end
+
   @doc """
   Returns the list of accompanies.
 

lib/gallium_web/live/backoffice/components/sidebar.ex

@@ -7,17 +7,23 @@ defmodule GalliumWeb.BackOffice.Components.Sidebar do
 
   def sidebar(assigns) do
     menu_items = [
-      %{
-        action: :members,
-        icon: "hero-arrow-up-tray",
-        label: "Adicionar Membros",
-        path: ~p"/dashboard/members"
-      },
       %{
         action: :attendees,
         icon: "hero-users",
         label: "Inscrições",
         path: ~p"/dashboard/attendees"
+      },
+      %{
+        action: :tables,
+        icon: "hero-rectangle-group",
+        label: "Mesas",
+        path: ~p"/dashboard/tables"
+      },
+      %{
+        action: :members,
+        icon: "hero-arrow-up-tray",
+        label: "Sócios",
+        path: ~p"/dashboard/members"
       }
     ]
 
@@ -29,7 +35,7 @@ defmodule GalliumWeb.BackOffice.Components.Sidebar do
       if(@sidebar_open, do: "translate-x-0", else: "-translate-x-full md:translate-x-0")
     ]}>
       <div class="md:hidden px-4 py-3 border-b border-gray-200 flex items-center justify-between">
-        <h2 class="font-bold font-amarante text-black">Menu</h2>
+        <h2 class="font-bold font-amarante text-black"></h2>
         <button
           phx-click="toggle_sidebar"
           class="hover:bg-gray-300 px-2 py-1 rounded-md"

lib/gallium_web/live/backoffice/tables_live/index.ex

@@ -0,0 +1,104 @@
+defmodule GalliumWeb.BackOffice.TablesLive.Index do
+  @moduledoc """
+  LiveView showing seating arrangement: one rectangle per table with avatars
+  for each person around it.
+  """
+  use GalliumWeb, :live_view
+
+  import GalliumWeb.BackOffice.Components.BackofficeLayout
+
+  alias Gallium.Ticketing
+
+  attr :name, :string, required: true
+  attr :people, :list, required: true
+
+  def table_card(assigns) do
+    {top, bottom} = split_people(assigns.people)
+    assigns = assigns |> assign(:top, top) |> assign(:bottom, bottom)
+
+    ~H"""
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm px-6 py-8">
+      <div class="flex flex-col items-center gap-3">
+        <div class="flex justify-center gap-3 min-h-10">
+          <.avatar :for={person <- @top} person={person} />
+        </div>
+
+        <div class="w-full max-w-md h-28 rounded-lg bg-olive text-white flex items-center justify-center shadow-inner">
+          <span class="font-amarante text-2xl uppercase tracking-widest">{@name}</span>
+        </div>
+
+        <div class="flex justify-center gap-3 min-h-10">
+          <.avatar :for={person <- @bottom} person={person} />
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  attr :person, :map, required: true
+
+  defp avatar(assigns) do
+    ~H"""
+    <div class="relative group">
+      <div
+        class="w-10 h-10 rounded-full bg-olive-100 text-olive-700 border border-olive-200 flex items-center justify-center font-amarante text-sm font-bold cursor-default select-none"
+        title={@person.full_name}
+      >
+        {@person.initials}
+      </div>
+      <span class="pointer-events-none absolute left-1/2 -translate-x-1/2 -top-9 whitespace-nowrap rounded bg-gray-900 text-white text-xs px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity font-cormorant z-10">
+        {@person.full_name}
+      </span>
+    </div>
+    """
+  end
+
+  defp split_people(people) do
+    count = length(people)
+    half = div(count + 1, 2)
+    Enum.split(people, half)
+  end
+
+  def mount(_params, _session, socket) do
+    tables =
+      Ticketing.list_tables_with_attendees()
+      |> Enum.map(fn {name, people} ->
+        %{
+          name: name,
+          people: Enum.map(people, fn p -> Map.put(p, :initials, initials(p.full_name)) end)
+        }
+      end)
+
+    socket =
+      socket
+      |> assign(:current_page, :tables)
+      |> assign(:sidebar_open, false)
+      |> assign(:tables, tables)
+
+    {:ok, socket}
+  end
+
+  def handle_event("toggle_sidebar", _params, socket) do
+    {:noreply, assign(socket, :sidebar_open, !socket.assigns.sidebar_open)}
+  end
+
+  defp initials(nil), do: "?"
+
+  defp initials(full_name) do
+    parts =
+      full_name
+      |> String.split(~r/\s+/, trim: true)
+      |> Enum.reject(&(&1 == ""))
+
+    case parts do
+      [] ->
+        "?"
+
+      [one] ->
+        String.upcase(String.slice(one, 0, 1))
+
+      list ->
+        String.upcase(String.slice(List.first(list), 0, 1) <> String.slice(List.last(list), 0, 1))
+    end
+  end
+end

lib/gallium_web/live/backoffice/tables_live/index.html.heex

@@ -0,0 +1,25 @@
+<.backoffice_layout sidebar_open={@sidebar_open} current_page={@current_page} flash={@flash}>
+  <div class="w-full">
+    <div class="flex flex-col gap-6">
+      <div class="mb-2">
+        <h1 class="text-4xl font-bold text-gray-content font-amarante">Mesas</h1>
+        <p class="text-gray mt-2 font-cormorant">
+          Distribuição de convidados por mesa.
+        </p>
+      </div>
+
+      <%= if @tables == [] do %>
+        <div class="flex flex-col items-center justify-center py-24 text-gray-300 font-cormorant bg-white rounded-xl border border-gray-200 shadow-sm">
+          <.icon name="hero-rectangle-group" class="size-14 mb-4" />
+          <p class="text-lg">Ainda não há mesas atribuídas.</p>
+        </div>
+      <% else %>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
+          <%= for table <- @tables do %>
+            <.table_card name={table.name} people={table.people} />
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</.backoffice_layout>

lib/gallium_web/router.ex

@@ -60,9 +60,10 @@ defmodule GalliumWeb.Router do
         {GalliumWeb.UserAuth, :require_authenticated},
         {GalliumWeb.UserAuth, :require_admin}
       ] do
-      live "/", BackOffice.MembersLive.Index
+      live "/", BackOffice.AttendeesLive.Index
       live "/members", BackOffice.MembersLive.Index
       live "/attendees", BackOffice.AttendeesLive.Index
+      live "/tables", BackOffice.TablesLive.Index
     end
   end
 

priv/repo/seeds/ticketing.exs

@@ -35,6 +35,32 @@ defmodule Gallium.Repo.Seeds.Ticketing do
     10 => "a100010"
   }
 
+  @full_names %{
+    1  => "Ana Maria Silva",
+    2  => "Bruno Costa Pereira",
+    3  => "Catarina Dias Lobo",
+    4  => "Diogo Ferreira",
+    5  => "Eva Marques Sousa",
+    6  => "Filipe Almeida",
+    7  => "Gabriela Nunes",
+    8  => "Hugo Ramos Antunes",
+    9  => "Inês Carvalho",
+    10 => "João Lobo"
+  }
+
+  @table_preferences %{
+    1  => "Mesa 1",
+    2  => "Mesa 1",
+    3  => "Mesa 1",
+    4  => "Mesa 2",
+    5  => "Mesa 2",
+    6  => "Mesa 2",
+    7  => "Mesa 3",
+    8  => "Mesa 3",
+    9  => "Mesa 3",
+    10 => "Mesa 3"
+  }
+
   @accompany_data %{
     1 => %{full_name: "Acompanhante de Ana",      email: "acomp1@example.com", phone_number: "+351910000001"},
     2 => %{full_name: "Acompanhante de Bruno",    email: "acomp2@example.com", phone_number: "+351910000002"},
@@ -78,12 +104,13 @@ defmodule Gallium.Repo.Seeds.Ticketing do
     is_member = index <= 5
 
     attrs = %{
-      full_name:        "Attendee #{index}",
-      phone_number:     "+35191000000#{index}",
-      is_cesium_member: is_member,
-      user_id:          user_id,
-      student_number:   @student_numbers[index],
-      nif:              "20000000#{index}"
+      full_name:         @full_names[index] || "Attendee #{index}",
+      phone_number:      "+35191000000#{index}",
+      is_cesium_member:  is_member,
+      user_id:           user_id,
+      student_number:    @student_numbers[index],
+      nif:               "20000000#{index}",
+      table_preference:  @table_preferences[index]
     }
 
     case Ticketing.create_attendee(attrs) do