Cursor App Template #24 — Compliance Checklists

Compliance Checklists

Track audit items, evidence, and compliance status across SOC 2, GDPR, and custom frameworks.

Overview

Compliance Checklists is a single-page browser app for GRC and ops teams who need a practical checklist tool without enterprise audit software. Manage multiple compliance frameworks, mark items compliant or not, log changes, and export progress reports — all in one HTML file.

Key features

Checklist grid

  • AG-Grid table with Item, Description, Category, Responsible, Due Date, Status, and Evidence columns
  • Checkbox column to mark items complete; status auto-updates to Compliant when checked
  • Quick-action buttons: mark Compliant (✓) or Non-Compliant (✗)
  • Color-coded status: Compliant (green), Non-Compliant (red), Pending (amber)
  • Inline cell editing for all fields

Multiple checklists

  • Switch between checklists (e.g. SOC 2 Type II, GDPR Readiness)
  • Create new checklists from the header
  • Add items via sidebar form with category, responsible person, and due date

Category grouping and progress

  • Group grid rows by category (Access Control, Data Protection, etc.)
  • Progress percentage and bar based on compliant items vs total
  • KPI dashboard: total items, compliant, non-compliant, pending counts

Audit log

  • Timestamped history of checklist switches, item adds, status changes, and exports
  • Scrollable log panel showing the 20 most recent entries

Summary dashboard and charts

  • Five KPI cards plus visual progress bar
  • Stacked bar chart showing compliant / non-compliant / pending counts by category

Export

  • Export active checklist to Excel with a Summary sheet (metrics and progress %)

Appearance

  • Dark mode toggle with saved preference
  • AG-Grid adapts to light and dark themes

Data & persistence

  • Checklists, items, and audit log auto-save to localStorage
  • Dark mode preference stored separately
  • Reload to restore session; clear browser storage to reset sample data

Charts & reporting

  • Chart.js stacked bar chart by category and status
  • Excel export includes summary metrics sheet

Built with

Tailwind CSS, AG-Grid Community, Alpine.js, Chart.js, and SheetJS — all from CDN in one HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.

Compliance Checklists — Dark mode & final polish

Compliance Checklists

Track audit items, evidence, and compliance status across frameworks.

Total6
Compliant3
Non-Compliant1
Pending2
Progress50%
ItemCategoryStatusActions
MFA enabledAccess ControlCompliant
Access reviewsAccess ControlPending
Status by category

Leave a Reply