adds per page

templates/dashboard.html

@@ -14,6 +14,18 @@
   </div>
   {% endif %}
 
+  <!-- Per Page Dropdown -->
+  <div class="mb-4 flex items-center">
+    <label for="perPage" class="mr-2 text-sm font-medium text-slate-700">Items per page:</label>
+    <select id="perPage" x-model="perPage" @change="window.location.href = `/dashboard/1?per_page=${$data.perPage}${$data.case_email_sim ? '&case_email=' + encodeURIComponent($data.case_email_sim) : ''}`"
+      class="px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+      <option value="10">10</option>
+      <option value="25">25</option>
+      <option value="50">50</option>
+      <option value="100">100</option>
+    </select>
+  </div>
+
   <!-- Configure Visible Columns Link -->
   <div class="mb-4">
     <button @click="showColumnModal = true" class="text-blue-600 hover:text-blue-800 text-sm font-medium underline">
@@ -516,6 +528,7 @@
       return {
         showColumnModal: false,
         case_email_sim: '',
+        perPage: 25,
         columns: [
           'Matter Num',
           'Matter Description',
@@ -573,12 +586,16 @@
         init() {
           this.loadColumnSettings();
 
-          // Extract case_email from URL query parameter
+          // Extract case_email and per_page from URL query parameter
           const urlParams = new URLSearchParams(window.location.search);
           const caseEmail = urlParams.get('case_email');
+          const perPage = urlParams.get('per_page');
           if (caseEmail) {
             this.case_email_sim = caseEmail;
           }
+          if (perPage) {
+            this.perPage = parseInt(perPage);
+          }
         },
 
         isColumnVisible(columnName) {