feat(compliance): add GDPR, HIPAA, SOC2 compliance templates with one-click apply and dashboard
- Add ComplianceTemplate model in app/models.py - Create database migration 027_add_compliance_templates - Add compliance_enabled feature flag to config and settings metadata - Create compliance_service.py with pre-built template definitions and evaluation - Create compliance API endpoints (list, get, apply, status, summary) - Create compliance admin view and dashboard template - Add compliance link to admin navigation (desktop and mobile) - Seed compliance templates at application startup - Add comprehensive tests (29 passing) Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -168,6 +168,9 @@
|
||||
<a href="/admin/scheduled-jobs" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-clock w-4 mr-2 text-indigo-500" aria-hidden="true"></i> Scheduled Jobs
|
||||
</a>
|
||||
<a href="/admin/compliance" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-check-double w-4 mr-2 text-green-500" aria-hidden="true"></i> Compliance
|
||||
</a>
|
||||
<a href="/admin/backup" role="menuitem" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
|
||||
<i class="fas fa-database w-4 mr-2 text-green-600" aria-hidden="true"></i> Backup & Restore
|
||||
</a>
|
||||
@@ -338,6 +341,9 @@
|
||||
<a href="/admin/scheduled-jobs" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-clock mr-2 text-indigo-500" aria-hidden="true"></i> Scheduled Jobs
|
||||
</a>
|
||||
<a href="/admin/compliance" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-check-double mr-2 text-green-500" aria-hidden="true"></i> Compliance
|
||||
</a>
|
||||
<a href="/admin/backup" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">
|
||||
<i class="fas fa-database mr-2 text-green-500" aria-hidden="true"></i> Backup & Restore
|
||||
</a>
|
||||
|
||||
@@ -0,0 +1,300 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Compliance Templates - DocuElevate{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-6" x-data="complianceApp()">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start gap-4 mb-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-1">Compliance Templates</h1>
|
||||
<p class="text-gray-500 text-sm">
|
||||
Pre-built compliance configurations for GDPR, HIPAA, and SOC 2.
|
||||
Apply templates with one click to align your instance with regulatory requirements.
|
||||
</p>
|
||||
</div>
|
||||
<button @click="refreshAll()"
|
||||
class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
:disabled="loading"
|
||||
aria-label="Refresh compliance status">
|
||||
<i class="fas fa-sync-alt mr-2" :class="loading ? 'animate-spin' : ''" aria-hidden="true"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overall Status Banner -->
|
||||
<div class="mb-6 rounded-lg p-5 shadow"
|
||||
:class="{
|
||||
'bg-green-50 border border-green-200': summary.overall_status === 'compliant',
|
||||
'bg-yellow-50 border border-yellow-200': summary.overall_status === 'partial',
|
||||
'bg-red-50 border border-red-200': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="inline-flex items-center justify-center h-12 w-12 rounded-full text-xl"
|
||||
:class="{
|
||||
'bg-green-100 text-green-600': summary.overall_status === 'compliant',
|
||||
'bg-yellow-100 text-yellow-600': summary.overall_status === 'partial',
|
||||
'bg-red-100 text-red-600': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}">
|
||||
<i :class="{
|
||||
'fas fa-check-circle': summary.overall_status === 'compliant',
|
||||
'fas fa-exclamation-triangle': summary.overall_status === 'partial',
|
||||
'fas fa-times-circle': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold"
|
||||
:class="{
|
||||
'text-green-800': summary.overall_status === 'compliant',
|
||||
'text-yellow-800': summary.overall_status === 'partial',
|
||||
'text-red-800': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
|
||||
}">
|
||||
<span x-text="summary.overall_status === 'compliant' ? 'All Checks Passing' :
|
||||
summary.overall_status === 'partial' ? 'Partially Compliant' :
|
||||
'Non-Compliant'"></span>
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600">
|
||||
<span x-text="summary.total_passed"></span> of <span x-text="summary.total_checks"></span> checks passing across all templates
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 text-center">
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-green-700" x-text="summary.total_passed"></div>
|
||||
<div class="text-xs text-gray-500">Passed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-red-700" x-text="summary.total_failed"></div>
|
||||
<div class="text-xs text-gray-500">Failed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-2xl font-bold text-gray-700" x-text="summary.total_checks"></div>
|
||||
<div class="text-xs text-gray-500">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert Messages -->
|
||||
<div x-show="alertMessage" x-cloak
|
||||
class="mb-4 rounded-lg p-4 flex items-center gap-3"
|
||||
:class="alertType === 'success' ? 'bg-green-50 border border-green-200 text-green-800' :
|
||||
'bg-red-50 border border-red-200 text-red-800'"
|
||||
role="alert">
|
||||
<i :class="alertType === 'success' ? 'fas fa-check-circle text-green-500' : 'fas fa-exclamation-circle text-red-500'" aria-hidden="true"></i>
|
||||
<span x-text="alertMessage"></span>
|
||||
<button @click="alertMessage = ''" class="ml-auto text-gray-400 hover:text-gray-600" aria-label="Dismiss alert">
|
||||
<i class="fas fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Template Cards -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
||||
<template x-for="tmpl in templates" :key="tmpl.name">
|
||||
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<!-- Card Header -->
|
||||
<div class="p-5 border-b"
|
||||
:class="{
|
||||
'border-green-200 bg-green-50': tmpl._status === 'compliant',
|
||||
'border-yellow-200 bg-yellow-50': tmpl._status === 'partial',
|
||||
'border-gray-200': tmpl._status === 'not_applied' || tmpl._status === 'non_compliant'
|
||||
}">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-lg font-bold text-gray-800" x-text="tmpl.display_name"></h3>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
|
||||
:class="{
|
||||
'bg-green-100 text-green-800': tmpl._status === 'compliant',
|
||||
'bg-yellow-100 text-yellow-800': tmpl._status === 'partial',
|
||||
'bg-red-100 text-red-800': tmpl._status === 'non_compliant',
|
||||
'bg-gray-100 text-gray-600': tmpl._status === 'not_applied'
|
||||
}">
|
||||
<span x-text="tmpl._status === 'compliant' ? 'Compliant' :
|
||||
tmpl._status === 'partial' ? 'Partial' :
|
||||
tmpl._status === 'non_compliant' ? 'Non-Compliant' :
|
||||
'Not Applied'"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600" x-text="tmpl.description"></p>
|
||||
</div>
|
||||
|
||||
<!-- Check Results (when expanded) -->
|
||||
<div class="p-5" x-show="tmpl._expanded" x-collapse>
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-3">
|
||||
<i class="fas fa-clipboard-check mr-1" aria-hidden="true"></i>
|
||||
Compliance Checks (<span x-text="tmpl._statusData ? tmpl._statusData.passed : '?'"></span>/<span x-text="tmpl._statusData ? tmpl._statusData.total : '?'"></span>)
|
||||
</h4>
|
||||
<ul class="space-y-2">
|
||||
<template x-for="check in (tmpl._statusData ? tmpl._statusData.check_results : [])" :key="check.key">
|
||||
<li class="flex items-start gap-2 text-sm">
|
||||
<span class="mt-0.5 flex-shrink-0">
|
||||
<i :class="check.passing ? 'fas fa-check-circle text-green-500' : 'fas fa-times-circle text-red-500'" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<span class="font-medium" x-text="check.label"></span>
|
||||
<p class="text-xs text-gray-500" x-text="check.description"></p>
|
||||
<p class="text-xs mt-0.5" x-show="!check.passing">
|
||||
<span class="text-red-600">Current: <code x-text="check.actual"></code></span>
|
||||
<span class="text-gray-400 mx-1">→</span>
|
||||
<span class="text-green-600">Expected: <code x-text="check.expected"></code></span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Card Footer -->
|
||||
<div class="px-5 py-4 bg-gray-50 border-t flex items-center justify-between gap-2">
|
||||
<button @click="toggleExpand(tmpl)"
|
||||
class="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
:aria-expanded="tmpl._expanded"
|
||||
:aria-label="'Toggle details for ' + tmpl.display_name">
|
||||
<i class="fas mr-1" :class="tmpl._expanded ? 'fa-chevron-up' : 'fa-chevron-down'" aria-hidden="true"></i>
|
||||
<span x-text="tmpl._expanded ? 'Hide Details' : 'Show Details'"></span>
|
||||
</button>
|
||||
<button @click="applyTemplate(tmpl.name)"
|
||||
:disabled="tmpl._applying"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 min-h-[44px] min-w-[44px]"
|
||||
:class="tmpl._applying ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'"
|
||||
:aria-label="'Apply ' + tmpl.display_name + ' template'">
|
||||
<i class="fas mr-1.5" :class="tmpl._applying ? 'fa-spinner animate-spin' : 'fa-bolt'" aria-hidden="true"></i>
|
||||
<span x-text="tmpl._applying ? 'Applying…' : 'Apply Template'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Applied info -->
|
||||
<div x-show="tmpl.applied_at" class="px-5 py-2 bg-gray-50 border-t text-xs text-gray-500">
|
||||
<i class="fas fa-clock mr-1" aria-hidden="true"></i>
|
||||
Last applied: <span x-text="tmpl.applied_at ? new Date(tmpl.applied_at).toLocaleString() : 'Never'"></span>
|
||||
<span x-show="tmpl.applied_by"> by <span x-text="tmpl.applied_by"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="!loading && templates.length === 0" class="text-center py-12 text-gray-500">
|
||||
<i class="fas fa-shield-alt text-4xl mb-4" aria-hidden="true"></i>
|
||||
<p class="text-lg font-medium">No compliance templates available</p>
|
||||
<p class="text-sm">Templates will appear here after seeding.</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading Spinner -->
|
||||
<div x-show="loading && templates.length === 0" class="text-center py-12">
|
||||
<i class="fas fa-spinner animate-spin text-3xl text-blue-500" aria-hidden="true"></i>
|
||||
<p class="text-gray-500 mt-2">Loading compliance templates…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function complianceApp() {
|
||||
return {
|
||||
templates: [],
|
||||
summary: { overall_status: 'unknown', total_checks: 0, total_passed: 0, total_failed: 0 },
|
||||
loading: true,
|
||||
alertMessage: '',
|
||||
alertType: 'success',
|
||||
|
||||
async init() {
|
||||
await this.refreshAll();
|
||||
},
|
||||
|
||||
async refreshAll() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const [templatesRes, summaryRes] = await Promise.all([
|
||||
fetch('/api/compliance/templates'),
|
||||
fetch('/api/compliance/summary')
|
||||
]);
|
||||
|
||||
if (templatesRes.ok) {
|
||||
const data = await templatesRes.json();
|
||||
this.templates = data.map(t => ({
|
||||
...t,
|
||||
_expanded: false,
|
||||
_applying: false,
|
||||
_status: t.status || 'not_applied',
|
||||
_statusData: null
|
||||
}));
|
||||
|
||||
// Fetch status for each template
|
||||
for (const tmpl of this.templates) {
|
||||
this.fetchTemplateStatus(tmpl);
|
||||
}
|
||||
}
|
||||
|
||||
if (summaryRes.ok) {
|
||||
this.summary = await summaryRes.json();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load compliance data:', err);
|
||||
this.showAlert('error', 'Failed to load compliance data. Please try again.');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async fetchTemplateStatus(tmpl) {
|
||||
try {
|
||||
const res = await fetch(`/api/compliance/templates/${tmpl.name}/status`);
|
||||
if (res.ok) {
|
||||
tmpl._statusData = await res.json();
|
||||
tmpl._status = tmpl._statusData.status;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch status for ${tmpl.name}:`, err);
|
||||
}
|
||||
},
|
||||
|
||||
async toggleExpand(tmpl) {
|
||||
tmpl._expanded = !tmpl._expanded;
|
||||
if (tmpl._expanded && !tmpl._statusData) {
|
||||
await this.fetchTemplateStatus(tmpl);
|
||||
}
|
||||
},
|
||||
|
||||
async applyTemplate(name) {
|
||||
const tmpl = this.templates.find(t => t.name === name);
|
||||
if (!tmpl) return;
|
||||
|
||||
if (!confirm(`Apply the ${tmpl.display_name} compliance template?\n\nThis will update your application settings to meet ${name.toUpperCase()} requirements.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
tmpl._applying = true;
|
||||
this.alertMessage = '';
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/compliance/templates/${name}/apply`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok && data.success) {
|
||||
this.showAlert('success', `${tmpl.display_name} template applied successfully.`);
|
||||
await this.refreshAll();
|
||||
} else {
|
||||
this.showAlert('error', data.detail || data.error || 'Failed to apply template.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(`Failed to apply ${name}:`, err);
|
||||
this.showAlert('error', 'Network error. Please try again.');
|
||||
} finally {
|
||||
tmpl._applying = false;
|
||||
}
|
||||
},
|
||||
|
||||
showAlert(type, message) {
|
||||
this.alertType = type;
|
||||
this.alertMessage = message;
|
||||
if (type === 'success') {
|
||||
setTimeout(() => { this.alertMessage = ''; }, 5000);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user