feat: Refactor pagination components across multiple managers to improve UI consistency and enhance user experience with better navigation controls

2025-08-08 10:24:41 +07:00
parent 82e15e708f
commit 64dbe621be
6 changed files with 293 additions and 89 deletions
@@ -724,34 +724,39 @@ function BillingManager() {
              <div className="text-muted">
                Показано {((currentPage - 1) * pageSize) + 1} - {Math.min(currentPage * pageSize, filteredData.length)} из {filteredData.length}
              </div>
-              <div className="btn-group">
-                <button
-                  className="btn btn-outline-secondary"
-                  onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
-                  disabled={currentPage === 1}
-                >
-                  Предыдущая
-                </button>
-                {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                  const page = i + 1;
-                  return (
-                    <button
-                      key={page}
-                      className={`btn ${currentPage === page ? 'btn-primary' : 'btn-outline-secondary'}`}
-                      onClick={() => setCurrentPage(page)}
-                    >
-                      {page}
-                    </button>
-                  );
-                })}
-                <button
-                  className="btn btn-outline-secondary"
-                  onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
-                  disabled={currentPage === totalPages}
-                >
-                  Следующая
-                </button>
-              </div>
+              <ul className="pagination m-0">
+                <li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
+                  <button className="page-link" onClick={() => setCurrentPage(1)} disabled={currentPage === 1}>Первая</button>
+                </li>
+                <li className={`page-item${currentPage === 1 ? ' disabled' : ''}`}>
+                  <button className="page-link" onClick={() => setCurrentPage(currentPage - 1)} disabled={currentPage === 1}>Назад</button>
+                </li>
+                {(() => {
+                  const pages = [];
+                  let start = Math.max(1, currentPage - 2);
+                  let end = Math.min(totalPages, currentPage + 2);
+                  if (currentPage <= 3) end = Math.min(totalPages, 5);
+                  if (currentPage >= totalPages - 2) start = Math.max(1, totalPages - 4);
+                  if (start > 1) pages.push('start-ellipsis');
+                  for (let p = start; p <= end; p++) pages.push(p);
+                  if (end < totalPages) pages.push('end-ellipsis');
+                  return pages.map((p) => (
+                    p === 'start-ellipsis' || p === 'end-ellipsis' ? (
+                      <li key={p} className="page-item disabled"><span className="page-link">…</span></li>
+                    ) : (
+                      <li key={p} className={`page-item${currentPage === p ? ' active' : ''}`}>
+                        <button className="page-link" onClick={() => setCurrentPage(p)}>{p}</button>
+                      </li>
+                    )
+                  ));
+                })()}
+                <li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
+                  <button className="page-link" onClick={() => setCurrentPage(currentPage + 1)} disabled={currentPage === totalPages}>Вперед</button>
+                </li>
+                <li className={`page-item${currentPage === totalPages ? ' disabled' : ''}`}>
+                  <button className="page-link" onClick={() => setCurrentPage(totalPages)} disabled={currentPage === totalPages}>Последняя</button>
+                </li>
+              </ul>
            </div>
          )}
        </div>