Wave changes

home/wird-tracker.org

@@ -281,7 +281,61 @@ This page tracks my daily awrād and spiritual practices.
       </div>
     </form>
   </dialog>
-
+<dialog id="export-modal" aria-labelledby="export-modal-title">
+  <form id="export-form" method="dialog">
+    <h3 id="export-modal-title">Export Wird Report</h3>
+    <div class="modal-body">
+ 
+      <p class="export-modal-desc">
+        Choose a date range to include in the PDF report.
+        The report will show all logged wirds, targets, and notes.
+      </p>
+ 
+      <div class="export-date-row">
+        <div class="field-group">
+          <label for="export-from">From</label>
+          <input type="date" id="export-from" required>
+        </div>
+        <div class="export-date-sep" aria-hidden="true">→</div>
+        <div class="field-group">
+          <label for="export-to">To</label>
+          <input type="date" id="export-to" required>
+        </div>
+      </div>
+ 
+      <div class="export-presets" role="group" aria-label="Quick date range presets">
+        <button type="button" class="export-preset" data-preset="7">Last 7 days</button>
+        <button type="button" class="export-preset" data-preset="30">Last 30 days</button>
+        <button type="button" class="export-preset" data-preset="90">Last 90 days</button>
+        <button type="button" class="export-preset" data-preset="365">This year</button>
+      </div>
+ 
+      <div class="export-options">
+        <label class="export-option-row">
+          <input type="checkbox" id="export-include-nafl" checked>
+          <span>Include nafl prayers</span>
+        </label>
+        <label class="export-option-row">
+          <input type="checkbox" id="export-include-khatm" checked>
+          <span>Include khatm completions</span>
+        </label>
+        <label class="export-option-row">
+          <input type="checkbox" id="export-include-motalah" checked>
+          <span>Include mutālaʿah sessions</span>
+        </label>
+      </div>
+ 
+    </div>
+    <div id="export-modal-actions">
+      <button type="button" id="export-cancel">Cancel</button>
+      <button type="submit" id="export-submit" class="btn-primary">
+        <span id="export-btn-label">Download PDF</span>
+      </button>
+    </div>
+  </form>
+</dialog>
+ 
+ 
   <!-- Heatmap -->
   <section id="heatmap-panel" class="wird-panel">
     <div class="wird-panel-header">
@@ -359,10 +413,18 @@ This page tracks my daily awrād and spiritual practices.
           <tr><td colspan="5" class="loading-cell">Loading…</td></tr>
         </tbody>
       </table>
+      <button id="export-pdf-btn" class="btn-export" aria-label="Export wird history to PDF">
+  <svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true" focusable="false">
+    <path d="M6.5 1v7M3.5 5.5l3 3 3-3M1.5 10h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  Export PDF
+</button>
     </div>
   </section>
 
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-#+END_EXPORT
+<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jspdf-autotable@3.8.2/dist/jspdf.plugin.autotable.min.js"></script>
+#+END_EXPORT