Healthcare Compliance Management UI/UX Structure Stage 1: Compliance Setup Wizard Compliance Onboarding • - User Role: Compliance Officer / Administrator • - Accreditation Selector (e.g., JCAHO, NCQA, CMS, URAC) • - Questionnaire: Type of Facility, Services, States of Operation • - Smart Mapping: Lists relevant compliance areas & associated documentation • - Save & Resume Later option • - Visual timeline of setup progress Requirements Summary • - Auto-generated checklist • - Due dates with color-coded urgency indicators • - Role assignment (e.g., Legal Review, Policy Owner) Stage 2: Documentation & Legal Review Document Hub • - Upload templates or generate using AI • - Tags by Compliance Area, Accreditation, Department • - Status: Draft, In Review, Finalized Legal Review Workflow • - Assign to legal team • - Inline annotation and comments • - Approval flow with eSignature option • - Audit trail and version history Stage 3: Submission & Approval Tracking Compliance Submission Center • - Pre-filled forms based on accreditation body • - Submission method (auto-email, portal integration, manual) • - Status tracker per accreditation requirement • - Alerts for missing documentation Approval Tracker • - Timeline of submitted documents • - Approval status (Pending, Approved, Rejected) • - Comments from reviewing authority Stage 4: Operational Implementation Policy & Workflow Rollout • - Link approved policies to departments/processes • - Notification engine to inform stakeholders • - Embed SOPs and policy documents into relevant workflows Departmental Compliance Dashboard • - Status of each department’s compliance • - Linked documents and audit logs • - Flagged issues or overdue implementations Stage 5: Risk Monitoring & Incident Prevention Compliance Risk Map • - Interactive visualization of all back-office processes • - Risk rating & potential for compliance incidents • - Auto-highlight based on incident history or control failures Incident Tracker • - Log new incidents • - Root cause categorization (human error, system gap, outdated policy) • - Mitigation actions and status • - Links to possible fines associated with each type Stage 6: Fines Analysis & Benchmarking Fines & Penalties Explorer • - Search by regulation, accreditation, geography, and incident type • - Filters: Time period, Facility type, Dollar range • - Show similar public enforcement cases and resolution steps Root Cause Insights • - AI-generated summary of similar fines and root causes • - Recommendations to avoid similar issues • - Crosswalk to internal process or SOP updates needed Stage 7: Training Management Training Needs Matrix • - Map training requirements to roles (e.g., billing, admin, compliance) • - Auto-generate training plan based on gaps and incidents Training Scheduler & Tracker • - Assign training courses (manual/linked LMS) • - Reminders and due dates • - Completion status, scores, and certificates • - Report export for audits Stage 8: Continuous Monitoring & Audit Readiness Compliance Pulse Dashboard • - Real-time compliance scores • - Upcoming deadlines, expiring documents • - Training completion rates • - Alerts on non-compliance risks Audit Center • - Audit trail across all compliance workflows • - Export-ready reports (by body, process, department) • - Checklists and reviewer notes Admin / Settings Admin Settings • - Role-based access control • - Notification preferences • - Accreditation body master data • - System integrations (LMS, Document Management, Reporting) Use the Aptos or Calibri font and #0A829D for the darker teal color, #2c97a7 for lighter teal - Initial Deployment
7102c46 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HealthComply | Healthcare Compliance Management</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Calibri:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Calibri', sans-serif; | |
| } | |
| .sidebar-item.active { | |
| border-left: 4px solid #0A829D; | |
| background-color: rgba(10, 130, 157, 0.1); | |
| } | |
| .progress-dot.active { | |
| background-color: #0A829D; | |
| border-color: #0A829D; | |
| } | |
| .progress-dot.completed { | |
| background-color: #10B981; | |
| border-color: #10B981; | |
| } | |
| .risk-high { | |
| background-color: #FEE2E2; | |
| border-left: 4px solid #EF4444; | |
| } | |
| .risk-medium { | |
| background-color: #FEF3C7; | |
| border-left: 4px solid #F59E0B; | |
| } | |
| .risk-low { | |
| background-color: #D1FAE5; | |
| border-left: 4px solid #10B981; | |
| } | |
| .teal-gradient { | |
| background: linear-gradient(135deg, #0A829D 0%, #2c97a7 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> | |
| <div class="flex items-center justify-center h-16 px-4 teal-gradient"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-white mr-2 text-xl"></i> | |
| <span class="text-white font-bold text-xl">HealthComply</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <div class="sidebar-item active px-3 py-2 rounded-md text-sm font-medium text-gray-900 bg-gray-100"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-home mr-3 text-gray-700"></i> | |
| Dashboard | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-magic mr-3"></i> | |
| Compliance Setup | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-alt mr-3"></i> | |
| Documentation | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-paper-plane mr-3"></i> | |
| Submission Center | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cogs mr-3"></i> | |
| Implementation | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-3"></i> | |
| Risk Monitoring | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Analytics | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-graduation-cap mr-3"></i> | |
| Training | |
| </div> | |
| </div> | |
| <div class="sidebar-item px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clipboard-check mr-3"></i> | |
| Audit Center | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-auto mb-4"> | |
| <div class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </div> | |
| </div> | |
| <div class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-question-circle mr-3"></i> | |
| Help & Support | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="ml-4 text-xl font-semibold text-gray-800">Compliance Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center text-gray-500 focus:outline-none"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <div class="flex items-center"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile"> | |
| <span class="ml-2 text-sm font-medium text-gray-700">Sarah Johnson</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content area --> | |
| <div class="flex-1 overflow-auto p-4"> | |
| <!-- Welcome Banner --> | |
| <div class="teal-gradient rounded-lg p-6 mb-6 text-white"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div> | |
| <h2 class="text-2xl font-bold mb-2">Welcome back, Sarah!</h2> | |
| <p class="mb-4">You have 3 high priority compliance tasks to complete this week.</p> | |
| <button class="bg-white text-teal-800 px-4 py-2 rounded-md font-medium hover:bg-gray-100 transition duration-150"> | |
| View Tasks | |
| </button> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex items-center"> | |
| <div class="mr-4 text-center"> | |
| <div class="text-3xl font-bold">87%</div> | |
| <div class="text-sm opacity-80">Compliance Score</div> | |
| </div> | |
| <div class="w-16 h-16"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="circle-bg" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/> | |
| <path class="circle" stroke-dasharray="87, 100" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compliance Setup Wizard --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Compliance Setup Wizard</h2> | |
| <span class="text-sm text-gray-500">Stage 1 of 8</span> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <div class="flex space-x-6"> | |
| <div class="flex flex-col items-center"> | |
| <div class="progress-dot active w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center"> | |
| <span class="text-xs font-bold">1</span> | |
| </div> | |
| <span class="text-xs mt-1 font-medium">Onboarding</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center"> | |
| <span class="text-xs font-bold">2</span> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">Requirements</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center"> | |
| <span class="text-xs font-bold">3</span> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">Documentation</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center"> | |
| <span class="text-xs font-bold">4</span> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">Submission</span> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="progress-dot w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center"> | |
| <span class="text-xs font-bold">5</span> | |
| </div> | |
| <span class="text-xs mt-1 text-gray-500">Implementation</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-teal-600 h-1.5 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Compliance Onboarding</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Accreditation Body</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> | |
| <option>Select accreditation</option> | |
| <option>JCAHO</option> | |
| <option>NCQA</option> | |
| <option>CMS</option> | |
| <option>URAC</option> | |
| <option>HIPAA</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Facility Type</label> | |
| <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500"> | |
| <option>Select facility type</option> | |
| <option>Hospital</option> | |
| <option>Clinic</option> | |
| <option>Long-term Care</option> | |
| <option>Home Health</option> | |
| <option>Laboratory</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Services Offered</label> | |
| <div class="mt-1 space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"> | |
| <label class="ml-2 text-sm text-gray-700">Emergency Services</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"> | |
| <label class="ml-2 text-sm text-gray-700">Surgical Services</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded"> | |
| <label class="ml-2 text-sm text-gray-700">Diagnostic Imaging</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">States of Operation</label> | |
| <select multiple class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 h-24"> | |
| <option>California</option> | |
| <option>New York</option> | |
| <option>Texas</option> | |
| <option>Florida</option> | |
| <option>Illinois</option> | |
| <option>Pennsylvania</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center pt-4 border-t border-gray-200"> | |
| <button class="text-gray-600 hover:text-gray-800 flex items-center"> | |
| <i class="fas fa-save mr-2"></i> Save & Resume Later | |
| </button> | |
| <button class="bg-teal-600 text-white px-4 py-2 rounded-md font-medium hover:bg-teal-700 transition duration-150"> | |
| Continue to Requirements <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions & Status --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <!-- Documentation Status --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-800">Documentation Status</h3> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">3 New</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div> | |
| <span class="text-sm">HIPAA Policy Update</span> | |
| </div> | |
| <span class="text-xs text-gray-500">Due Today</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div> | |
| <span class="text-sm">JCAHO Documentation</span> | |
| </div> | |
| <span class="text-xs text-gray-500">Due in 3 days</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-sm">Staff Training Records</span> | |
| </div> | |
| <span class="text-xs text-gray-500">Completed</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full text-center text-teal-600 text-sm font-medium hover:text-teal-800"> | |
| View All Documents <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <!-- Risk Alerts --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-800">Risk Alerts</h3> | |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">2 Critical</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="p-2 rounded risk-high"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm font-medium">Medication Errors</span> | |
| <span class="text-xs bg-white text-red-600 px-1 rounded">High</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">3 incidents reported this week</p> | |
| </div> | |
| <div class="p-2 rounded risk-medium"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm font-medium">Patient Data Access</span> | |
| <span class="text-xs bg-white text-yellow-600 px-1 rounded">Medium</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">Unauthorized access detected</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full text-center text-teal-600 text-sm font-medium hover:text-teal-800"> | |
| View Risk Dashboard <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <!-- Training Needs --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-800">Training Needs</h3> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">5 Overdue</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-user-md text-blue-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">Clinical Staff</p> | |
| <p class="text-xs text-gray-500">Infection Control</p> | |
| </div> | |
| </div> | |
| <span class="text-xs text-red-600">Overdue</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-user-nurse text-green-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">Nursing Staff</p> | |
| <p class="text-xs text-gray-500">HIPAA Refresher</p> | |
| </div> | |
| </div> | |
| <span class="text-xs text-yellow-600">Due Soon</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full text-center text-teal-600 text-sm font-medium hover:text-teal-800"> | |
| Schedule Training <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Compliance Timeline --> | |
| <div class="bg-white rounded-lg shadow-sm p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Compliance Timeline</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50">Week</button> | |
| <button class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50">Month</button> | |
| <button class="px-3 py-1 text-sm bg-teal-600 text-white rounded-md hover:bg-teal-700">Quarter</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Milestone</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Owner</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Annual Policy Review</div> | |
| <div class="text-sm text-gray-500">HIPAA Compliance</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Overdue</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Legal Team</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-teal-600 hover:text-teal-900">Remind</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-chart-bar text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Quarterly Audit</div> | |
| <div class="text-sm text-gray-500">JCAHO Standards</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">In Progress</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 30, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Compliance Team</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-teal-600 hover:text-teal-900">View</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-graduation-cap text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Staff Training</div> | |
| <div class="text-sm text-gray-500">Infection Control</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Scheduled</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 10, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">HR Department</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-teal-600 hover:text-teal-900">Details</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Department Compliance --> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-800">Department Compliance Status</h2> | |
| <button class="text-teal-600 hover:text-teal-800 text-sm font-medium"> | |
| View Full Report <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Clinical Services</h3> | |
| <p class="text-2xl font-bold mt-1">92%</p> | |
| </div> | |
| <div class="w-12 h-12"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="circle-bg" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/> | |
| <path class="circle" stroke-dasharray="92, 100" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#10B981" stroke-width="3" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> | |
| <span>On track</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Billing</h3> | |
| <p class="text-2xl font-bold mt-1">85%</p> | |
| </div> | |
| <div class="w-12 h-12"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="circle-bg" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/> | |
| <path class="circle" stroke-dasharray="85, 100" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#3B82F6" stroke-width="3" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="w-2 h-2 bg-yellow-500 rounded-full mr-2"></span> | |
| <span>2 issues</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">IT Services</h3> | |
| <p class="text-2xl font-bold mt-1">78%</p> | |
| </div> | |
| <div class="w-12 h-12"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="circle-bg" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/> | |
| <path class="circle" stroke-dasharray="78, 100" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#F59E0B" stroke-width="3" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span> | |
| <span>Security audit needed</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-medium text-gray-500">Administration</h3> | |
| <p class="text-2xl font-bold mt-1">95%</p> | |
| </div> | |
| <div class="w-12 h-12"> | |
| <svg viewBox="0 0 36 36" class="circular-chart"> | |
| <path class="circle-bg" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="3"/> | |
| <path class="circle" stroke-dasharray="95, 100" d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#8B5CF6" stroke-width="3" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> | |
| <span>Fully compliant</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple script to handle mobile menu toggle | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| const sidebar = document.querySelector('.hidden.md\\:flex'); | |
| if (mobileMenuButton) { | |
| mobileMenuButton.addEventListener('click', function() { | |
| sidebar.classList.toggle('hidden'); | |
| }); | |
| } | |
| // Add active class to sidebar items on click | |
| const sidebarItems = document.querySelectorAll('.sidebar-item'); | |
| sidebarItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| sidebarItems.forEach(i => i.classList.remove('active', 'bg-gray-100', 'text-gray-900')); | |
| this.classList.add('active', 'bg-gray-100', 'text-gray-900'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SamABFlow/affablebpm-compliance-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |