DMARC Reports Dashboard UI

A React + Vite SPA for viewing and analyzing DMARC reports by domain.

Features

• Domain Selection: Browse all domains with stored DMARC reports
• Grouped Records: View all authentication records grouped by report
• Statistics: See aggregated stats (total reports, records, pass/fail counts)
• Policy Details: Inspect DMARC policy settings for each report
• Responsive Design: Works on desktop and mobile devices
• Real-time Updates: Fetches latest data from the DMARC API

Prerequisites

• Node.js 16+ and npm (or yarn/pnpm)
• DMARC API running on localhost:8080 (or configure via vite.config.js)

Quick Start

Development

# Install dependencies
npm install

# Start dev server (http://localhost:5173)
npm run dev

# The app will proxy API calls to http://localhost:8080

Production Build

# Build for production
npm run build

# Preview build locally
npm run preview

# Deploy dist/ folder to your server

Project Structure

render-dmarc-ui/
├── public/
│   └── index.html              # HTML template
├── src/
│   ├── App.jsx                 # Main app component
│   ├── index.css               # Global styles
│   ├── main.jsx                # React entry point
│   └── components/
│       ├── DomainSelector.jsx  # Domain dropdown
│       ├── ReportsList.jsx     # Reports container
│       ├── ReportCard.jsx      # Report with records
│       └── Stats.jsx           # Statistics cards
├── package.json
├── vite.config.js
└── README.md

API Endpoints Used

• GET /api/reports?limit=1000 - Fetch all reports to extract domains
• GET /api/domains/{domain}/records?limit=2000 - Fetch grouped records for a domain

Deployment

Docker Integration

To serve the UI from the API container:

1. Build the React app:

npm run build

2. Copy dist/ to the API service
3. Add a static file handler to the API (Go http.FileServer)

Standalone Docker Container

Create a Dockerfile:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Configuration

Edit vite.config.js to:

• Change dev server port (default: 5173)
• Update API proxy target (default: http://localhost:8080)
• Adjust build output (default: dist/)

Styling

Uses vanilla CSS with:

• Mobile-responsive grid layout
• Color-coded status badges (pass/fail)
• Expandable report cards
• Professional color scheme

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

License

MIT