Merge pull request #82 from christianlouis/copilot/add-dmarc-report-deletion

feat: Add delete button UI for DMARC reports with re-import support

backend/app/templates/report_detail.html

@@ -51,6 +51,10 @@
                     <a :href="'/domains/' + report.domain" class="btn btn-outline btn-sm">
                         Back to Domain
                     </a>
+                    <button class="btn btn-error btn-sm"
+                            @click="deleteReport(report.domain, report.report_id)">
+                        Delete Report
+                    </button>
                 </div>
             </div>
 
@@ -247,6 +251,27 @@ function reportDetailApp(reportId) {
             }
         },
 
+        async deleteReport(domain, reportId) {
+            if (!confirm(`Delete report "${reportId}" for domain "${domain}"?\n\nThis will remove the report from the system. You can re-import it afterwards.`)) {
+                return;
+            }
+            try {
+                const response = await fetch(
+                    `/api/v1/reports/domain/${encodeURIComponent(domain)}/reports/${encodeURIComponent(reportId)}`,
+                    { method: 'DELETE' }
+                );
+                if (response.ok) {
+                    window.location.href = '/reports';
+                } else {
+                    const data = await response.json().catch(() => ({}));
+                    alert('Failed to delete report: ' + (data.detail || response.statusText));
+                }
+            } catch (error) {
+                console.error('Error deleting report:', error);
+                alert('Network error — could not delete report.');
+            }
+        },
+
         formatDate(timestamp) {
             if (!timestamp) return '—';
             return new Date(timestamp * 1000).toLocaleString();

backend/app/templates/reports.html

@@ -95,11 +95,17 @@
                                     </div>
                                 {% endcall %}
                                 {% call td("text-right") %}
-                                    <a :href="`/reports/${report.report_id}`">
+                                    <div class="inline-flex gap-2 justify-end">
-                                        {% call button(variant="outline", size="sm") %}
+                                        <a :href="`/reports/${report.report_id}`">
-                                            View Details
+                                            {% call button(variant="outline", size="sm") %}
-                                        {% endcall %}
+                                                View Details
-                                    </a>
+                                            {% endcall %}
+                                        </a>
+                                        <button class="btn btn-error btn-sm"
+                                                @click="deleteReport(report.domain, report.report_id)">
+                                            Delete
+                                        </button>
+                                    </div>
                                 {% endcall %}
                             {% endcall %}
                         </template>
@@ -174,6 +180,32 @@ function reportsApp() {
             } finally {
                 this.loading = false;
             }
+        },
+
+        async deleteReport(domain, reportId) {
+            if (!confirm(`Delete report "${reportId}" for domain "${domain}"?\n\nThis will remove the report from the system. You can re-import it afterwards.`)) {
+                return;
+            }
+            try {
+                const response = await fetch(
+                    `/api/v1/reports/domain/${encodeURIComponent(domain)}/reports/${encodeURIComponent(reportId)}`,
+                    { method: 'DELETE' }
+                );
+                if (response.ok) {
+                    this.reports = this.reports.filter(
+                        r => !(r.domain === domain && r.report_id === reportId)
+                    );
+                    if (!this.reports.some(r => r.domain === domain)) {
+                        this.domains = this.domains.filter(d => d !== domain);
+                    }
+                } else {
+                    const data = await response.json().catch(() => ({}));
+                    alert('Failed to delete report: ' + (data.detail || response.statusText));
+                }
+            } catch (error) {
+                console.error('Error deleting report:', error);
+                alert('Network error — could not delete report.');
+            }
         }
     }
 }