chnaged the pagination logic

templates/admin_management/auth_logs.html

@@ -49,14 +49,13 @@
                     </tbody>
                 </table>
               </div>
-              <div class="d-flex justify-content-end mt-3">
-                        <div class="d-flex">
-                            {% if is_paginated %}
-                                {% include 'partials/pagination.html' %}
-                            {% endif %}
-                        </div>
-              </div>
-   {% include 'partials/pagination_audit.html' with q='loginEvents' %}   
+             
+    
+   <div class="d-flex justify-content-end mt-3">
+          <div class="d-flex">
+             {% include 'partials/pagination.html' with q='loginEvents' %}  
+          </div>
+        </div>
                        
     {% else %}
         <p>No authentication audit events found.</p>

templates/admin_management/model_logs.html

@@ -110,7 +110,12 @@
     </table>
     
 </div>
-{% include 'partials/pagination_audit.html' with q='userActions' %}
+
+  <div class="d-flex justify-content-end mt-3">
+          <div class="d-flex">
+            {% include 'partials/pagination.html' with q='userActions' %}
+          </div>
+    </div>
          
 {% else %}
 <p>{% trans "No model change audit events found." %}</p>

templates/admin_management/request_logs.html

@@ -48,7 +48,12 @@
                     </tbody>
                 </table>
             </div>
-   {% include 'partials/pagination_audit.html' with q='userRequests' %}         
+      
+   <div class="d-flex justify-content-end mt-3">
+          <div class="d-flex">
+            {% include 'partials/pagination.html' with q='userRequests' %}   
+          </div>
+    </div>   
     {% else %}
          <p>No request audit events found.</p>
     {% endif %}

templates/partials/pagination.html

@@ -1,39 +1,90 @@
 {% load i18n static %}
 
-<div class="row align-items-center justify-content-end py-4 pe-0 fs-9">
-    <div class="col-auto d-flex">
+<nav aria-label="Page navigation">
+    <ul class="pagination flex items-center justify-center space-x-2 py-4 text-sm">
+        {# First Page Link #}
         {% if page_obj.has_previous %}
-            <button class="page-link" data-list-pagination="prev" onclick="window.location.href='?page={{ page_obj.previous_page_number }}'">
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}"></span>
-            </button>
+            <li class="page-item rounded-md overflow-hidden">
+                <a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page=1{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'First' %}">
+                    <span class="fas fa-angle-double-left" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'First' %}</span>
+                </a>
+            </li>
         {% else %}
-            <button class="page-link" disabled>
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}"></span>
-            </button>
+            <li class="page-item disabled rounded-md overflow-hidden">
+                <span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
+                    <span class="fas fa-angle-double-left" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'First' %}</span>
+                </span>
+            </li>
         {% endif %}
 
-        <ul class="mb-0 pagination">
-            {% for num in page_obj.paginator.page_range %}
-                {% if page_obj.number == num %}
-                    <li class="page-item active">
-                        <span class="page-link">{{ num }}</span>
-                    </li>
-                {% else %}
-                    <li class="page-item">
-                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
-                    </li>
-                {% endif %}
-            {% endfor %}
-        </ul>
+        {# Previous Page Link #}
+        {% if page_obj.has_previous %}
+            <li class="page-item rounded-md overflow-hidden">
+                <a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Previous' %}">
+                    <span class="fas fa-chevron-left" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'Previous' %}</span>
+                </a>
+            </li>
+        {% else %}
+            <li class="page-item disabled rounded-md overflow-hidden">
+                <span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
+                    <span class="fas fa-chevron-left" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'Previous' %}</span>
+                </span>
+            </li>
+        {% endif %}
 
+        {# Page Numbers #}
+        {% for num in page_obj.paginator.page_range %}
+
+            {% if num == 1 or num == page_obj.paginator.num_pages or num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
+                <li class="page-item rounded-md overflow-hidden {% if num == page_obj.number %}bg-blue-600 text-white shadow-md{% else %}bg-white text-blue-600 hover:bg-gray-100{% endif %}">
+                    <a class="page-link block px-3 py-2 border {% if num == page_obj.number %}border-blue-600{% else %}border-gray-300{% endif %} transition-colors duration-200"
+                       href="?page={{ num }}{% if q %}&q={{q}}{% endif %}">
+                        {{ num }}
+                    </a>
+                </li>
+            {% elif num == page_obj.number|add:-3 or num == page_obj.number|add:3 %}
+                <li class="page-item disabled rounded-md overflow-hidden">
+                    <span class="page-link px-3 py-2 border border-gray-300 bg-white text-gray-600 cursor-default">...</span>
+                </li>
+            {% endif %}
+        {% endfor %}
+
+        {# Next Page Link #}
         {% if page_obj.has_next %}
-            <button class="page-link pe-0" data-list-pagination="next" onclick="window.location.href='?page={{ page_obj.next_page_number }}'">
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}left{% else %}right{% endif %}"></span>
-            </button>
+            <li class="page-item rounded-md overflow-hidden">
+                <a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page={{ page_obj.next_page_number }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Next' %}">
+                    <span class="fas fa-chevron-right" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'Next' %}</span>
+                </a>
+            </li>
         {% else %}
-            <button class="page-link pe-0" disabled>
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}left{% else %}right{% endif %}"></span>
-            </button>
+            <li class="page-item disabled rounded-md overflow-hidden">
+                <span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
+                    <span class="fas fa-chevron-right" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'Next' %}</span>
+                </span>
+            </li>
         {% endif %}
-    </div>
-</div>
+
+        {# Last Page Link #}
+        {% if page_obj.has_next %}
+            <li class="page-item rounded-md overflow-hidden">
+                <a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page={{ page_obj.paginator.num_pages }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Last' %}">
+                    <span class="fas fa-angle-double-right" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'Last' %}</span>
+                </a>
+            </li>
+        {% else %}
+            <li class="page-item disabled rounded-md overflow-hidden">
+                <span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
+                    <span class="fas fa-angle-double-right" aria-hidden="true"></span>
+                    <span class="sr-only">{% trans 'Last' %}</span>
+                </span>
+            </li>
+        {% endif %}
+    </ul>
+</nav>

templates/partials/pagination_audit.html

@@ -1,31 +0,0 @@
-{% load i18n static %}
-
-<div class="row align-items-center justify-content-center py-4 pe-0 fs-9">
-    <div class="col-auto d-flex">
-        {# Previous Button #}
-        {% if page_obj.has_previous %}
-            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Previous' %}">
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}" aria-hidden="true"></span>
-                <span>{% trans "Previous" %}</span>
-            </a>
-        {% else %}
-            <span class="page-link disabled" aria-disabled="true">
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}right{% else %}left{% endif %}" aria-hidden="true"></span>
-                <span>{% trans "Previous" %}</span>
-            </span>
-        {% endif %}
-
-       
-        {# Next Button #}
-        {% if page_obj.has_next %}
-            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Next' %}">
-                <span>{% trans "Next" %}</span>
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}left{% else %}right{% endif %}" aria-hidden="true"></span>
-            </a>
-        {% else %}
-            <span class="page-link disabled" aria-disabled="true">
-                <span>{% trans "Next" %}</span>
-                <span class="fas fa-chevron-{% if LANGUAGE_CODE == 'ar' %}left{% else %}right{% endif %}" aria-hidden="true"></span>
-            </span>
-        {% endif %}
-    </div>