new

osinaweb/osinacore/templates/projects-dashboard.html

@@ -1,4 +1,4 @@
-{% extends "main.html" %}
+{% extends "dashboard-main.html" %}
 {% load static %}
 {% block content %}
 
@@ -78,7 +78,7 @@
             {% for staff in staffs %}
             <option value="{{ staff.id }}"
                     {% if staff.id in selected_staff %}selected{% endif %}>
-              {{ staff.name }}
+              {{ staff.user.first_name }} {{ staff.user.last_name }}
             </option>
             {% endfor %}
           </select>
@@ -142,6 +142,32 @@
           {% endfor %}
         </tbody>
       </table>
+   <div class="flex justify-center items-center mt-10">
+            <div class="flex">
+                {% if points.has_previous %}
+                <a href="?page={{ points.previous_page_number }}" class="w-[40px] h-[40px] rounded-l-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+                    </svg>
+                </a>
+                {% endif %}
+                {% for num in page_range %}
+                <a href="?page={{ num }}" class="w-[40px] h-[40px] border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300 {% if points.number == num %} bg-gray-200 {% endif %}">
+                    <p>{{ num }}</p>
+                </a>
+                {% endfor %}
+                {% if points.has_next %}
+                <a href="?page={{ points.next_page_number }}" class="w-[40px] h-[40px] rounded-r-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 h-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                    </svg>
+                </a>
+                {% endif %}
+            </div>
+        </div>
+
     </div>
   </div>
 </div>

osinaweb/osinacore/views.py

@@ -948,10 +948,15 @@ def projects_dashboard(request):
             pointactivity__end_time__date__range=[start_date, end_date]
         ).distinct()
 
+    paginator = Paginator(points, 30)  # Show 10 points per page
+    page_number = request.GET.get('page')  # Get the page number from the GET request
+    page_obj = paginator.get_page(page_number)
+
     context = {
         'projects': all_projects,
         'staffs': all_staff,
-        'points': points,
+        # 'points': points,
+        'points': page_obj,  # Pass the paginated points
         'selected_projects': [int(id) for id in selected_project_ids if id],
         'selected_staff': [int(id) for id in selected_staff_ids if id],
         'start_date': start_date_str if start_date else '',

osinaweb/static/dist/output.css

@@ -995,6 +995,10 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .table {
   display: table;
 }
@@ -1240,6 +1244,10 @@ video {
   width: 0.375rem;
 }
 
+.w-1\/6 {
+  width: 16.666667%;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -1473,10 +1481,6 @@ video {
   max-width: 48rem;
 }
 
-.max-w-\[300px\] {
-  max-width: 300px;
-}
-
 .max-w-\[80\%\] {
   max-width: 80%;
 }
@@ -1761,6 +1765,10 @@ video {
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
 .self-end {
   align-self: flex-end;
 }
@@ -2039,6 +2047,11 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+}
+
 .bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@@ -2099,6 +2112,11 @@ video {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+}
+
 .bg-green-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
@@ -2149,6 +2167,11 @@ video {
   background-color: rgb(233 213 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
@@ -2203,6 +2226,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
 .bg-yellow-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
@@ -2635,6 +2663,11 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .text-fifthosiblue {
   --tw-text-opacity: 1;
   color: rgb(146 156 183 / var(--tw-text-opacity));
@@ -2685,6 +2718,11 @@ video {
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
 
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
+
 .text-orange-500 {
   --tw-text-opacity: 1;
   color: rgb(249 115 22 / var(--tw-text-opacity));
@@ -2700,6 +2738,11 @@ video {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
 .text-secondosiblue {
   --tw-text-opacity: 1;
   color: rgb(55 74 122 / var(--tw-text-opacity));
@@ -2720,6 +2763,11 @@ video {
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
+.text-yellow-800 {
+  --tw-text-opacity: 1;
+  color: rgb(133 77 14 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }