Replace dummy/bogus reports data with real API data on /reports page

Agent-Logs-Url: https://github.com/christianlouis/dmarq/sessions/c6e36fd9-00c9-4000-985f-f7a42e2ba451

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

backend/app/api/api_v1/endpoints/reports.py

@@ -132,6 +132,20 @@ class ReportSummary(BaseModel):
     failed_count: int
 
 
+class AllReportsItem(BaseModel):
+    """Single report item for the cross-domain reports list"""
+
+    report_id: str
+    domain: str
+    org_name: str
+    begin_date: str
+    end_date: str
+    total_count: int
+    passed_count: int
+    failed_count: int
+    pass_rate: float
+
+
 class PaginatedReportResponse(BaseModel):
     """Paginated reports response model"""
 
@@ -216,6 +230,42 @@ async def upload_report(file: UploadFile = File(...)):
         ) from e
 
 
+@router.get("", response_model=List[AllReportsItem])
+async def get_all_reports():
+    """
+    Get all DMARC reports across all domains, sorted by end_date descending.
+    """
+    store = ReportStore.get_instance()
+    domains = store.get_domains()
+
+    all_reports: List[AllReportsItem] = []
+    for domain in domains:
+        domain_reports = store.get_domain_reports(domain)
+        for report in domain_reports:
+            summary = report.get("summary", {})
+            total = summary.get("total_count", 0)
+            passed = summary.get("passed_count", 0)
+            pass_rate = round(passed / total * 100, 1) if total > 0 else 0.0
+            all_reports.append(
+                AllReportsItem(
+                    report_id=report.get("report_id", ""),
+                    domain=domain,
+                    org_name=report.get("org_name", ""),
+                    begin_date=str(report.get("begin_date", "")),
+                    end_date=str(report.get("end_date", "")),
+                    total_count=total,
+                    passed_count=passed,
+                    failed_count=summary.get("failed_count", 0),
+                    pass_rate=pass_rate,
+                )
+            )
+
+    # end_date is stored in ISO 8601 format (YYYY-MM-DDTHH:MM:SS), so lexicographic
+    # sorting produces correct chronological order.
+    all_reports.sort(key=lambda r: r.end_date, reverse=True)
+    return all_reports
+
+
 @router.get("/domains", response_model=List[str])
 async def get_domains():
     """

backend/app/templates/reports.html

@@ -23,14 +23,6 @@
                             </template>
                         </select>
                     </div>
-                    <div class="w-full sm:w-auto">
-                        <label class="block text-sm font-medium mb-1">Report Type</label>
-                        <select class="select select-bordered w-full" x-model="filters.reportType">
-                            <option value="">All Types</option>
-                            <option value="aggregate">Aggregate (RUA)</option>
-                            <option value="forensic">Forensic (RUF)</option>
-                        </select>
-                    </div>
                     <div class="w-full sm:w-auto">
                         <label class="block text-sm font-medium mb-1">Date Range</label>
                         <select class="select select-bordered w-full" x-model="filters.dateRange">
@@ -80,33 +72,34 @@
                         <template x-for="(report, index) in filteredReports" :key="index">
                             {% call tr() %}
                                 {% call td() %}
-                                    <div x-text="formatDate(report.date)"></div>
+                                    <div x-text="formatDate(report.end_date)"></div>
                                 {% endcall %}
                                 {% call td() %}
-                                    <div class="inline-flex items-center px-2 py-1 rounded text-xs" 
+                                    <div class="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800">
-                                         :class="report.type === 'aggregate' ? 'bg-blue-100 text-blue-800' : 'bg-amber-100 text-amber-800'">
+                                        Aggregate
-                                        <span x-text="report.type === 'aggregate' ? 'Aggregate' : 'Forensic'"></span>
                                     </div>
                                 {% endcall %}
                                 {% call td() %}
                                     <div class="font-medium" x-text="report.domain"></div>
                                 {% endcall %}
                                 {% call td() %}
-                                    <div x-text="report.organization"></div>
+                                    <div x-text="report.org_name"></div>
                                 {% endcall %}
                                 {% call td() %}
-                                    <div x-text="report.messages"></div>
+                                    <div x-text="report.total_count"></div>
                                 {% endcall %}
                                 {% call td() %}
                                     <div class="inline-flex items-center px-2 py-1 rounded" 
-                                         :class="getPassRateColor(report.passRate)">
+                                         :class="getPassRateColor(report.pass_rate)">
-                                        <span x-text="report.passRate + '%'"></span>
+                                        <span x-text="report.pass_rate + '%'"></span>
                                     </div>
                                 {% endcall %}
                                 {% call td("text-right") %}
+                                    <a :href="`/reports/${report.report_id}`">
                                         {% call button(variant="outline", size="sm") %}
                                             View Details
                                         {% endcall %}
+                                    </a>
                                 {% endcall %}
                             {% endcall %}
                         </template>
@@ -124,43 +117,14 @@ function reportsApp() {
     return {
         filters: {
             domain: '',
-            reportType: '',
             dateRange: '30'
         },
-        domains: ['example.com', 'mydomain.com'],
+        domains: [],
-        reports: [
+        reports: [],
-            {
+        loading: false,
-                id: 1,
-                date: '2023-04-15',
-                type: 'aggregate',
-                domain: 'example.com',
-                organization: 'Google',
-                messages: 128,
-                passRate: 96
-            },
-            {
-                id: 2,
-                date: '2023-04-15',
-                type: 'aggregate',
-                domain: 'mydomain.com',
-                organization: 'Microsoft',
-                messages: 64,
-                passRate: 100
-            },
-            {
-                id: 3,
-                date: '2023-04-14',
-                type: 'forensic',
-                domain: 'example.com',
-                organization: 'Yahoo',
-                messages: 1,
-                passRate: 0
-            }
-        ],
         
         init() {
-            // When API is ready, fetch reports from server
+            this.fetchReports();
-            // this.fetchReports();
         },
         
         get filteredReports() {
@@ -170,18 +134,13 @@ function reportsApp() {
                     return false;
                 }
                 
-                // Filter by report type
-                if (this.filters.reportType && report.type !== this.filters.reportType) {
-                    return false;
-                }
-                
                 // Filter by date range
                 if (this.filters.dateRange !== 'all') {
                     const days = parseInt(this.filters.dateRange);
                     const cutoff = new Date();
                     cutoff.setDate(cutoff.getDate() - days);
                     
-                    const reportDate = new Date(report.date);
+                    const reportDate = new Date(report.end_date);
                     if (reportDate < cutoff) {
                         return false;
                     }
@@ -203,14 +162,17 @@ function reportsApp() {
         },
         
         async fetchReports() {
+            this.loading = true;
             try {
                 const response = await fetch('/api/v1/reports');
                 this.reports = await response.json();
                 
-                // Extract unique domains
+                // Extract unique domains for the filter dropdown
-                this.domains = [...new Set(this.reports.map(r => r.domain))];
+                this.domains = [...new Set(this.reports.map(r => r.domain))].sort();
             } catch (error) {
                 console.error('Error fetching reports:', error);
+            } finally {
+                this.loading = false;
             }
         }
     }