Fix report pagination and rebuild saved plan navigation

public/roasts.html

@@ -75,6 +75,11 @@
             </div>
             <div class="panel-body">
               <p class="field-note" id="upload-status" hidden></p>
+              <form class="collection-filters" id="roast-filters" role="search">
+                <label class="field">Search roasts<input type="search" class="field-input" name="q" placeholder="Coffee, file, machine or plan" /></label>
+                <label class="field">Plan<select class="field-input" name="linked"><option value="">All roasts</option><option value="yes">Attached to a plan</option><option value="no">No attached plan</option></select></label>
+                <label class="field">Review<select class="field-input" name="grade"><option value="">All reviews</option><option value="excellent">Excellent</option><option value="good">Good</option><option value="fair">Fair</option><option value="needs-work">Needs work</option><option value="pending">Pending</option></select></label>
+              </form>
               <div class="table-wrap">
                 <table class="data-table" id="roasts-table">
                   <thead>
@@ -90,6 +95,7 @@
                   <tbody id="roasts-body"></tbody>
                 </table>
               </div>
+              <div class="collection-pagination"><p id="roasts-count" role="status"></p><button type="button" class="ghost-btn" id="roasts-prev">Previous</button><button type="button" class="ghost-btn" id="roasts-next">Next</button></div>
               <p class="field-note">
                 Upload finished roasts here (they stay unattached to a plan), or
                 from the planner's Reference curve drawer to attach them to the
@@ -137,6 +143,15 @@
               </div>
               <div id="detail-stats" class="field-grid" style="margin-top:10px"></div>
 
+              <section id="detail-comparison" style="margin-top:18px">
+                <h3>Plan vs Actual</h3>
+                <p class="field-note">Compare the attached plan with recorded milestones. You can add observations here; the uploaded curve and review retain the original file readings. Clear an entry to use its original reading again.</p>
+                <form id="comparison-form">
+                  <div class="table-wrap"><table class="data-table"><thead><tr><th>Milestone</th><th>Plan time</th><th>Plan BT</th><th>Actual time</th><th>Actual BT</th><th>Time difference</th><th>Notes</th></tr></thead><tbody id="comparison-body"></tbody></table></div>
+                  <p class="field-note" id="comparison-plan-note"></p>
+                  <button class="primary-btn" type="submit">Save observations</button><span id="comparison-status" role="status"></span>
+                </form>
+              </section>
               <div id="detail-after" style="margin-top:16px">
                 <h3 style="margin:0 0 4px">After the roast</h3>
                 <p class="field-note" style="margin-top:0">