Arrumar a tela de pagamento pendente colocando paginação

app/views/dashboard/index.html.erb

@@ -386,9 +386,9 @@
                   <th class="py-2 pl-3 font-medium text-right">Valor</th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody id="pagamentos-pendentes-tbody">
                 <% @pagamentos_pendentes.each do |cm| %>
-                  <tr class="border-b border-white/5">
+                  <tr class="border-b border-white/5 pagamento-pendente-row">
                     <td class="py-2.5 pr-3 text-white"><%= cm.motorista_nome %></td>
                     <td class="py-2.5 px-3">
                       <%= link_to cm.consolidacao.nome, consolidacao_path(cm.consolidacao),
@@ -400,6 +400,10 @@
               </tbody>
             </table>
           </div>
+          <div id="pagamentos-pendentes-paginacao" class="flex items-center justify-between mt-3 hidden">
+            <p class="text-gray-400 text-xs" id="pagamentos-pendentes-info"></p>
+            <div class="flex gap-1" id="pagamentos-pendentes-abas"></div>
+          </div>
         <% else %>
           <p class="text-gray-400 text-sm py-3">Nenhuma pendência no período. 🎉</p>
         <% end %>
@@ -477,22 +481,22 @@
   })();
 </script>
 
-<%# Paginação client-side da tabela de pagamentos realizados (10 por página) %>
+<%# Paginação client-side das tabelas de pagamentos (10 por página) %>
 <script>
   (function () {
-    function initPaginacaoPagamentos() {
-      const tbody = document.getElementById('pagamentos-feitos-tbody');
-      const nav   = document.getElementById('pagamentos-feitos-paginacao');
+    function paginarTabela(prefixo, classeLinha, rotulo) {
+      const tbody = document.getElementById(prefixo + '-tbody');
+      const nav   = document.getElementById(prefixo + '-paginacao');
       if (!tbody || !nav || nav.dataset.iniciado) return;
       nav.dataset.iniciado = '1';
 
       const porPagina = 10;
-      const linhas    = Array.from(tbody.querySelectorAll('.pagamento-feito-row'));
+      const linhas    = Array.from(tbody.querySelectorAll('.' + classeLinha));
       const paginas   = Math.ceil(linhas.length / porPagina);
       if (paginas <= 1) return;
 
-      const abas = document.getElementById('pagamentos-feitos-abas');
-      const info = document.getElementById('pagamentos-feitos-info');
+      const abas = document.getElementById(prefixo + '-abas');
+      const info = document.getElementById(prefixo + '-info');
       nav.classList.remove('hidden');
 
       function mostrarPagina(p) {
@@ -501,7 +505,7 @@
         });
         const de  = (p - 1) * porPagina + 1;
         const ate = Math.min(p * porPagina, linhas.length);
-        info.textContent = de + '–' + ate + ' de ' + linhas.length + ' pagamentos';
+        info.textContent = de + '–' + ate + ' de ' + linhas.length + ' ' + rotulo;
         abas.querySelectorAll('button').forEach(function (b) {
           const ativa = Number(b.dataset.pagina) === p;
           b.className = 'px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors ' +
@@ -521,6 +525,11 @@
       mostrarPagina(1);
     }
 
+    function initPaginacaoPagamentos() {
+      paginarTabela('pagamentos-feitos', 'pagamento-feito-row', 'pagamentos');
+      paginarTabela('pagamentos-pendentes', 'pagamento-pendente-row', 'pendências');
+    }
+
     initPaginacaoPagamentos();
     document.addEventListener('turbo:load', initPaginacaoPagamentos);
   })();