Tabla del admin

<%# Personas de ejemplo (Ui::Demo::Person): la tabla recibe cualquier lista de
    objetos, sin consultas. En tu app: rows: @people y href_for: ->(person) { person_path(person) }. %>
<% now = Time.current %>
<% roles = { "client" => "Cliente", "staff" => "Equipo", "admin" => "Admin" } %>
<% people = [
     [ "Ana", "García", "ana.garcia@correo.mx", "client", true, 2.hours, 14 ],
     [ "Iván", "López", "ivan@lunaestudio.mx", "staff", true, 240.days, 0 ],
     [ "Mariana", "Peña", "mariana.pena@correo.mx", "client", true, 5.hours, 1 ],
     [ "Sofía", "Ruiz", "sofia@lunaestudio.mx", "staff", true, 310.days, 0 ],
     [ "Diego", "Hernández", "diego.hdz@correo.mx", "client", false, 40.days, 23 ],
     [ "Lucía", "Torres", "lucia.torres@correo.mx", "client", true, 1.day, 2 ],
     [ "Regina", "Castro", "regina@lunaestudio.mx", "admin", true, 420.days, 0 ],
     [ "Tomás", "Navarro", "tomas.navarro@correo.mx", "client", true, 6.days, 8 ]
   ].map.with_index(1) do |(first, last, email, role, active, ago, bookings), id|
     Ui::Demo::Person.new(id:, first_name: first, last_name: last, email:, role:, active:, created_at: now - ago, bookings:)
   end %>
<% counts = people.map(&:role).tally %>

<div class="w-full max-w-4xl">
  <%= render Ui::DataTableComponent.new(rows: people, caption: "Personas del estudio",
                                        href_for: ->(person) { "#data-table-persona-#{person.id}" },
                                        row_data: ->(person) { { role: person.role } }) do |t| %>
    <% t.with_toolbar do %>
      <%= render Ui::SegmentedControlComponent.new(label: "Filtrar por rol", selected: "all",
                                                   data: { action: "segmented-control:change->data-table#filter", data_table_key_param: "role" }) do |seg| %>
        <% seg.with_option(label: "Todos", value: "all", count: people.size) %>
        <% seg.with_option(label: "Clientes", value: "client", count: counts["client"]) %>
        <% seg.with_option(label: "Equipo", value: "staff", count: counts["staff"]) %>
        <% seg.with_option(label: "Admins", value: "admin", count: counts["admin"]) %>
      <% end %>
      <%= t.search(placeholder: "Buscar por nombre o correo…", label: "Buscar personas") %>
    <% end %>

    <% t.with_column("Persona") { |person| t.person(person, badge: ("Nuevo" if person.recent?)) } %>
    <% t.with_column("Rol", hide_below: :md) { |person| roles[person.role] } %>
    <% t.with_column("Estado") { |person| t.status(person.active? ? "active" : "inactive", label: person.active? ? "Activo" : "Inactivo", tone: (:danger unless person.active?)) } %>
    <% t.with_column("Reservas", numeric: true, hide_below: :lg) { |person| person.bookings } %>
    <% t.with_column("Registro", align: :right, hide_below: :sm) { |person| t.date(person.created_at) } %>

    <% t.with_empty do %>
      <%= render Ui::EmptyStateComponent.new(title: "Nadie coincide", description: "Prueba con otro nombre, correo o rol.") %>
    <% end %>

    <% t.with_footer do %>
      <p class="tabular-nums">Mostrando <span class="text-foreground">1–8</span> de <span class="text-foreground">47</span></p>
      <nav class="flex items-center gap-1" aria-label="Paginación">
        <%= render Ui::ButtonComponent.new(variant: :outline, size: :sm, disabled: true, "aria-label": "Página anterior") do %>Anterior<% end %>
        <%= render Ui::ButtonComponent.new(variant: :outline, size: :sm, href: "#data-table-pagina-2") do %>Siguiente<% end %>
      </nav>
    <% end %>
  <% end %>
</div>