Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SSA Medical Discovery Platform</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #1a365d; | |
| --primary-light: #2c5282; | |
| --secondary: #2d3748; | |
| --accent: #38a169; | |
| --accent-light: #48bb78; | |
| --warning: #dd6b20; | |
| --danger: #e53e3e; | |
| --success: #38a169; | |
| --info: #3182ce; | |
| --bg-main: #f7fafc; | |
| --bg-card: #ffffff; | |
| --bg-sidebar: #1a202c; | |
| --text-primary: #1a202c; | |
| --text-secondary: #4a5568; | |
| --text-muted: #718096; | |
| --text-light: #e2e8f0; | |
| --border: #e2e8f0; | |
| --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --radius: 8px; | |
| --radius-lg: 12px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: var(--bg-main); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| display: flex; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 260px; | |
| background: var(--bg-sidebar); | |
| min-height: 100vh; | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| padding: 20px 0; | |
| display: flex; | |
| flex-direction: column; | |
| z-index: 100; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo { | |
| padding: 0 24px 24px; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| margin-bottom: 20px; | |
| } | |
| .logo h1 { | |
| color: #fff; | |
| font-size: 18px; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo h1 i { | |
| color: var(--accent); | |
| } | |
| .logo span { | |
| color: var(--accent); | |
| font-size: 12px; | |
| display: block; | |
| margin-top: 4px; | |
| } | |
| .nav-section { | |
| padding: 0 12px; | |
| } | |
| .nav-label { | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| padding: 12px 12px 8px; | |
| font-weight: 600; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| color: var(--text-light); | |
| text-decoration: none; | |
| border-radius: var(--radius); | |
| margin: 2px 0; | |
| transition: all 0.2s; | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .nav-item:hover { | |
| background: rgba(255,255,255,0.1); | |
| color: #fff; | |
| } | |
| .nav-item.active { | |
| background: var(--accent); | |
| color: #fff; | |
| } | |
| .nav-item i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .nav-badge { | |
| margin-left: auto; | |
| background: var(--danger); | |
| color: #fff; | |
| font-size: 10px; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| margin-left: 260px; | |
| flex: 1; | |
| min-height: 100vh; | |
| } | |
| .header { | |
| background: var(--bg-card); | |
| padding: 16px 32px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .header-title h2 { | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .header-title p { | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .search-box { | |
| display: flex; | |
| align-items: center; | |
| background: var(--bg-main); | |
| border-radius: var(--radius); | |
| padding: 8px 16px; | |
| gap: 8px; | |
| width: 280px; | |
| } | |
| .search-box input { | |
| border: none; | |
| background: transparent; | |
| outline: none; | |
| font-size: 14px; | |
| width: 100%; | |
| } | |
| .search-box i { | |
| color: var(--text-muted); | |
| } | |
| .user-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 8px 12px; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| .user-menu:hover { | |
| background: var(--bg-main); | |
| } | |
| .user-avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #fff; | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .user-info { | |
| text-align: left; | |
| } | |
| .user-info strong { | |
| display: block; | |
| font-size: 14px; | |
| } | |
| .user-info span { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* Dashboard Content */ | |
| .content { | |
| padding: 32px; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 24px; | |
| margin-bottom: 32px; | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 16px; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .stat-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: var(--radius); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| } | |
| .stat-icon.blue { background: rgba(49, 130, 206, 0.1); color: var(--info); } | |
| .stat-icon.green { background: rgba(56, 161, 105, 0.1); color: var(--success); } | |
| .stat-icon.orange { background: rgba(221, 107, 32, 0.1); color: var(--warning); } | |
| .stat-icon.red { background: rgba(229, 62, 62, 0.1); color: var(--danger); } | |
| .stat-content h3 { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .stat-content p { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| } | |
| .stat-change { | |
| font-size: 12px; | |
| margin-top: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .stat-change.up { color: var(--success); } | |
| .stat-change.down { color: var(--danger); } | |
| /* Tables */ | |
| .card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .card-header { | |
| padding: 20px 24px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .card-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .card-body { | |
| padding: 0; | |
| } | |
| .table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .table th { | |
| text-align: left; | |
| padding: 14px 24px; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| background: var(--bg-main); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .table td { | |
| padding: 16px 24px; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 14px; | |
| } | |
| .table tr:hover td { | |
| background: rgba(0,0,0,0.02); | |
| } | |
| .table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* Status Badges */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .status-badge.pending { | |
| background: rgba(221, 107, 32, 0.1); | |
| color: var(--warning); | |
| } | |
| .status-badge.active { | |
| background: rgba(56, 161, 105, 0.1); | |
| color: var(--success); | |
| } | |
| .status-badge.completed { | |
| background: rgba(49, 130, 206, 0.1); | |
| color: var(--info); | |
| } | |
| .status-badge.review { | |
| background: rgba(128, 90, 213, 0.1); | |
| color: #805ad5; | |
| } | |
| .status-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: currentColor; | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| border-radius: var(--radius); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| border: none; | |
| transition: all 0.2s; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: #fff; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-light); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-main); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--border); | |
| } | |
| .btn-success { | |
| background: var(--success); | |
| color: #fff; | |
| } | |
| .btn-sm { | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| } | |
| /* Grid Layout */ | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| } | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| @media (max-width: 1200px) { | |
| .grid-3 { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .main-content { | |
| margin-left: 0; | |
| } | |
| .grid-2, .grid-3 { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .header { | |
| padding: 16px; | |
| } | |
| .search-box { | |
| display: none; | |
| } | |
| .content { | |
| padding: 16px; | |
| } | |
| } | |
| /* Progress Bars */ | |
| .progress-bar { | |
| height: 6px; | |
| background: var(--bg-main); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width 0.3s ease; | |
| } | |
| .progress-fill.blue { background: var(--info); } | |
| .progress-fill.green { background: var(--success); } | |
| .progress-fill.orange { background: var(--warning); } | |
| /* Tabs */ | |
| .tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--border); | |
| padding: 0 24px; | |
| } | |
| .tab { | |
| padding: 16px 20px; | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.2s; | |
| } | |
| .tab:hover { | |
| color: var(--text-primary); | |
| } | |
| .tab.active { | |
| color: var(--primary); | |
| border-bottom-color: var(--primary); | |
| } | |
| /* Activity Feed */ | |
| .activity-item { | |
| display: flex; | |
| gap: 12px; | |
| padding: 16px 24px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .activity-item:last-child { | |
| border-bottom: none; | |
| } | |
| .activity-icon { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| flex-shrink: 0; | |
| } | |
| .activity-content { | |
| flex: 1; | |
| } | |
| .activity-content p { | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .activity-content span { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* Database Schema Visual */ | |
| .schema-diagram { | |
| padding: 24px; | |
| background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%); | |
| border-radius: var(--radius-lg); | |
| margin-bottom: 24px; | |
| } | |
| .schema-title { | |
| color: #fff; | |
| font-size: 14px; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .schema-tables { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| .schema-table { | |
| background: rgba(255,255,255,0.1); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| border-radius: var(--radius); | |
| padding: 12px 16px; | |
| color: #fff; | |
| font-size: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .schema-table:hover { | |
| background: rgba(255,255,255,0.2); | |
| transform: translateY(-2px); | |
| } | |
| .schema-table i { | |
| color: var(--accent); | |
| } | |
| .schema-table.primary { | |
| border-color: var(--accent); | |
| background: rgba(56, 161, 105, 0.2); | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-in { | |
| animation: fadeIn 0.4s ease forwards; | |
| } | |
| .delay-1 { animation-delay: 0.1s; } | |
| .delay-2 { animation-delay: 0.2s; } | |
| .delay-3 { animation-delay: 0.3s; } | |
| .delay-4 { animation-delay: 0.4s; } | |
| /* Role Badge */ | |
| .role-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .role-badge.admin { background: #e9d8fd; color: #6b46c1; } | |
| .role-badge.attorney { background: #bee3f8; color: #2b6cb0; } | |
| .role-badge.medical { background: #c6f6d5; color: #276749; } | |
| .role-badge.adjudicator { background: #feebc8; color: #c05621; } | |
| /* Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0,0,0,0.5); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 200; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-lg); | |
| width: 90%; | |
| max-width: 600px; | |
| max-height: 90vh; | |
| overflow: auto; | |
| transform: translateY(20px); | |
| transition: transform 0.3s; | |
| } | |
| .modal-overlay.active .modal { | |
| transform: translateY(0); | |
| } | |
| .modal-header { | |
| padding: 20px 24px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .modal-header h3 { | |
| font-size: 18px; | |
| } | |
| .modal-close { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| .modal-close:hover { | |
| background: var(--bg-main); | |
| } | |
| .modal-body { | |
| padding: 24px; | |
| } | |
| /* Form Elements */ | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-label { | |
| display: block; | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 8px; | |
| color: var(--text-secondary); | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 10px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-size: 14px; | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1); | |
| } | |
| .form-select { | |
| width: 100%; | |
| padding: 10px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-size: 14px; | |
| background: #fff; | |
| cursor: pointer; | |
| } | |
| /* Toast Notifications */ | |
| .toast-container { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 300; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .toast { | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| padding: 16px 20px; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| min-width: 300px; | |
| animation: slideIn 0.3s ease; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| .toast-icon { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| .toast.success .toast-icon { background: rgba(56, 161, 105, 0.1); color: var(--success); } | |
| .toast.error .toast-icon { background: rgba(229, 62, 62, 0.1); color: var(--danger); } | |
| .toast.info .toast-icon { background: rgba(49, 130, 206, 0.1); color: var(--info); } | |
| /* Footer */ | |
| .footer { | |
| padding: 20px 32px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .footer a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| /* Mobile Menu Toggle */ | |
| .mobile-toggle { | |
| display: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: var(--radius); | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| background: var(--bg-main); | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-toggle { | |
| display: flex; | |
| } | |
| } | |
| /* Pagination */ | |
| .pagination { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 24px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .pagination-info { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| } | |
| .pagination-buttons { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .page-btn { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid var(--border); | |
| background: var(--bg-card); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .page-btn:hover { | |
| background: var(--bg-main); | |
| } | |
| .page-btn.active { | |
| background: var(--primary); | |
| color: #fff; | |
| border-color: var(--primary); | |
| } | |
| /* Filter Bar */ | |
| .filter-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px 24px; | |
| background: var(--bg-main); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .filter-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 12px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .filter-chip:hover, .filter-chip.active { | |
| background: var(--primary); | |
| color: #fff; | |
| border-color: var(--primary); | |
| } | |
| /* Entity Tags */ | |
| .entity-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| } | |
| .entity-tag.condition { background: #fed7d7; color: #c53030; } | |
| .entity-tag.medication { background: #e9d8fd; color: #6b46c1; } | |
| .entity-tag.procedure { background: #bee3f8; color: #2b6cb0; } | |
| .entity-tag.symptom { background: #c6f6d5; color: #276749; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="logo"> | |
| <h1><i class="fas fa-heartbeat"></i> SSA Medical Discovery</h1> | |
| <span>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--accent); text-decoration: none;" target="_blank">anycoder</a></span> | |
| </div> | |
| <nav class="nav-section"> | |
| <div class="nav-label">Main</div> | |
| <a class="nav-item active" data-page="dashboard"><i class="fas fa-th-large"></i> Dashboard</a> | |
| <a class="nav-item" data-page="cases"><i class="fas fa-briefcase"></i> Cases</a> | |
| <a class="nav-item" data-page="patients"><i class="fas fa-users"></i> Patients</a> | |
| <a class="nav-item" data-page="findings"><i class="fas fa-file-medical-alt"></i> Medical Findings</a> | |
| </nav> | |
| <nav class="nav-section"> | |
| <div class="nav-label">SSA Resources</div> | |
| <a class="nav-item" data-page="listings"><i class="fas fa-list"></i> SSA Listings</a> | |
| <a class="nav-item" data-page="precedents"><i class="fas fa-gavel"></i> Legal Precedents</a> | |
| <a class="nav-item" data-page="research"><i class="fas fa-book-medical"></i> Research</a> | |
| </nav> | |
| <nav class="nav-section"> | |
| <div class="nav-label">System</div> | |
| <a class="nav-item" data-page="workflows"><i class="fas fa-project-diagram"></i> Workflows <span class="nav-badge">3</span></a> | |
| <a class="nav-item" data-page="audit"><i class="fas fa-history"></i> Audit Trail</a> | |
| <a class="nav-item" data-page="compliance"><i class="fas fa-shield-alt"></i> Compliance</a> | |
| <a class="nav-item" data-page="schema"><i class="fas fa-database"></i> DB Schema</a> | |
| </nav> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <div class="mobile-toggle" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| <div class="header-title"> | |
| <h2 id="page-title">Dashboard</h2> | |
| <p id="page-subtitle">Overview of all cases and recent activity</p> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <div class="search-box"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" placeholder="Search cases, patients..." id="global-search"> | |
| </div> | |
| <button class="btn btn-primary" onclick="openModal('new-case')"> | |
| <i class="fas fa-plus"></i> New Case | |
| </button> | |
| <div class="user-menu"> | |
| <div class="user-avatar">JD</div> | |
| <div class="user-info"> | |
| <strong>John Doe</strong> | |
| <span class="role-badge admin">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content Area --> | |
| <div class="content" id="content"> | |
| <!-- Dashboard Page --> | |
| <div class="page" id="page-dashboard"> | |
| <div class="stats-grid"> | |
| <div class="stat-card animate-in delay-1"> | |
| <div class="stat-icon blue"><i class="fas fa-briefcase"></i></div> | |
| <div class="stat-content"> | |
| <h3>247</h3> | |
| <p>Active Cases</p> | |
| <div class="stat-change up"><i class="fas fa-arrow-up"></i> 12% from last month</div> | |
| </div> | |
| </div> | |
| <div class="stat-card animate-in delay-2"> | |
| <div class="stat-icon green"><i class="fas fa-user-injured"></i></div> | |
| <div class="stat-content"> | |
| <h3>1,842</h3> | |
| <p>Total Patients</p> | |
| <div class="stat-change up"><i class="fas fa-arrow-up"></i> 8% from last month</div> | |
| </div> | |
| </div> | |
| <div class="stat-card animate-in delay-3"> | |
| <div class="stat-icon orange"><i class="fas fa-clock"></i></div> | |
| <div class="stat-content"> | |
| <h3>34</h3> | |
| <p>Pending Review</p> | |
| <div class="stat-change down"><i class="fas fa-arrow-down"></i> 5% from last month</div> | |
| </div> | |
| </div> | |
| <div class="stat-card animate-in delay-4"> | |
| <div class="stat-icon red"><i class="fas fa-check-circle"></i></div> | |
| <div class="stat-content"> | |
| <h3>189</h3> | |
| <p>Completed This Month</p> | |
| <div class="stat-change up"><i class="fas fa-arrow-up"></i> 23% from last month</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid-2"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Recent Cases</h3> | |
| <button class="btn btn-secondary btn-sm">View All</button> | |
| </div> | |
| <div class="card-body"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Case ID</th> | |
| <th>Patient</th> | |
| <th>Status</th> | |
| <th>Updated</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>SSA-2024-001</strong></td> | |
| <td>Jane Smith</td> | |
| <td><span class="status-badge active"><span class="status-dot"></span> Active</span></td> | |
| <td>2 hours ago</td> | |
| </tr> | |
| <tr> | |
| <td><strong>SSA-2024-002</strong></td> | |
| <td>Robert Johnson</td> | |
| <td><span class="status-badge pending"><span class="status-dot"></span> Pending</span></td> | |
| <td>5 hours ago</td> | |
| </tr> | |
| <tr> | |
| <td><strong>SSA-2024-003</strong></td> | |
| <td>Emily Davis</td> | |
| <td><span class="status-badge review"><span class="status-dot"></span> Under Review</span></td> | |
| <td>1 day ago</td> | |
| </tr> | |
| <tr> | |
| <td><strong>SSA-2024-004</strong></td> | |
| <td>Michael Brown</td> | |
| <td><span class="status-badge completed"><span class="status-dot"></span> Completed</span></td> | |
| <td>2 days ago</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Recent Activity</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(56, 161, 105, 0.1); color: var(--success);"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <p><strong>New case created</strong> - SSA-2024-005 for patient William Wilson</p> | |
| <span>10 minutes ago by John Doe</span> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(49, 130, 206, 0.1); color: var(--info);"> | |
| <i class="fas fa-file-medical"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <p><strong>Medical findings extracted</strong> - AI analysis completed for case SSA-2024-001</p> | |
| <span>1 hour ago by System</span> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(221, 107, 32, 0.1); color: var(--warning);"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <p><strong>Compliance alert</strong> - HIPAA validation required for case SSA-2024-003</p> | |
| <span>3 hours ago by System</span> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <div class="activity-icon" style="background: rgba(128, 90, 213, 0.1); color: #805ad5;"> | |
| <i class="fas fa-link"></i> | |
| </div> | |
| <div class="activity-content"> | |
| <p><strong>SSA Listing matched</strong> - 1.04 (Respiratory) for case SSA-2024-002</p> | |
| <span>5 hours ago by System</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card" style="margin-top: 24px;"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Case Status Overview</h3> | |
| </div> | |
| <div class="card-body" style="padding: 24px;"> | |
| <div class="grid-3"> | |
| <div> | |
| <div style="margin-bottom: 8px; font-size: 14px; color: var(--text-secondary);">Disability Determination</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill blue" style="width: 68%;"></div> | |
| </div> | |
| <div style="margin-top: 8px; font-size: 13px; color: var(--text-muted);">68% of cases in determination</div> | |
| </div> | |
| <div> | |
| <div style="margin-bottom: 8px; font-size: 14px; color: var(--text-secondary);">Medical Records Review</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill green" style="width: 85%;"></div> | |
| </div> | |
| <div style="margin-top: 8px; font-size: 13px; color: var(--text-muted);">85% records reviewed</div> | |
| </div> | |
| <div> | |
| <div style="margin-bottom: 8px; font-size: 14px; color: var(--text-secondary);">Awaiting Additional Info</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill orange" style="width: 42%;"></div> | |
| </div> | |
| <div style="margin-top: 8px; font-size: 13px; color: var(--text-muted);">42% awaiting response</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cases Page --> | |
| <div class="page" id="page-cases" style="display: none;"> | |
| <div class="card"> | |
| <div class="filter-bar"> | |
| <span class="filter-chip active">All</span> | |
| <span class="filter-chip">Active</span> | |
| <span class="filter-chip">Pending</span> | |
| <span class="filter-chip">Under Review</span> | |
| <span class="filter-chip">Completed</span> | |
| </div> | |
| <div class="card-header"> | |
| <h3 class="card-title">All Cases</h3> | |
| <div style="display: flex; gap: 12px;"> | |
| <button class="btn btn-secondary btn-sm"><i class="fas fa-download"></i> Export</button> | |
| <button class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> New Case</button> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Case ID</th> | |
| <th>Patient</th> | |
| <th>Assigned To</th> | |
| <th>Status</th> | |
| <th>Created</th> | |
| <th>Last Updated</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>SSA-2024-001</strong></td> | |
| <td>Jane Smith</td> | |
| <td>Dr. Sarah Wilson</td> | |
| <td><span class="status-badge active"><span class="status-dot"></span> Active</span></td> | |
| <td>Jan 15, 2024</td> | |
| <td>2 hours ago</td> | |
| <td><button class="btn btn-secondary btn-sm">View</button></td> | |
| </tr> | |
| <tr> | |
| <td><strong>SSA-2024-002</strong></td> | |
| <td>Robert Johnson</td> | |
| <td>Dr. Michael Chen</td> | |
| <td><span class="status-badge pending"><span class="status-dot"></span> Pending</span></td> | |
| <td>Jan 14, 2024</td> | |
| <td>5 hours ago</td> | |
| <td><button class="btn btn-secondary btn-sm">View</button></td> | |
| </tr> | |
| <tr> | |
| <td><strong>SSA-2024-003</strong></td> | |
| <td>Emily Davis</td> | |
| <td>Dr. Sarah Wilson</td> | |
| <td><span class="status-badge review"><span class="status-dot"></span> Under Review</span></td> | |
| <td>Jan 12, 2024</td> | |
| <td>1 day ago</td> | |
| <td><button class="btn btn-secondary btn-sm">View</button></td> | |
| </tr> | |
| <tr> | |
| <td><strong>SSA-2024-004</strong></td> | |
| <td>Michael Brown</td> | |
| <td>Dr. Lisa Park</td> | |
| <td><span class="status-badge completed"><span class="status-dot"></span> Completed</span></td> | |
| <td>Jan 10, 2024</td> | |
| <td>2 days ago</td> | |
| <td><button class="btn btn-secondary btn-sm">View</button></td> | |
| </tr> | |
| <tr> | |
| <td><strong>SSA-2024-005</strong></td> | |
| <td>William Wilson</td> | |
| <td>Dr. Michael Chen</td> | |
| <td><span class="status-badge active"><span class="status-dot"></span> Active</span></td> | |
| <td>Jan 8, 2024</td> | |
| <td>3 days ago</td> | |
| <td><button class="btn btn-secondary btn-sm">View</button></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="pagination"> | |
| <div class="pagination-info">Showing 1-5 of 247 cases</div> | |
| <div class="pagination-buttons"> | |
| <button class="page-btn"><i class="fas fa-chevron-left"></i></button> | |
| <button class="page-btn active">1</button> | |
| <button class="page-btn">2</button> | |
| <button class="page-btn">3</button> | |
| <button class="page-btn">...</button> | |
| <button class="page-btn">50</button> | |
| <button class="page-btn"><i class="fas fa-chevron-right"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Patients Page --> | |
| <div class="page" id="page-patients" style="display: none;"> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon green"><i class="fas fa-users"></i></div> | |
| <div class="stat-content"> | |
| <h3>1,842</h3> | |
| <p>Total Patients</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon blue"><i class="fas fa-user-plus"></i></div> | |
| <div class="stat-content"> | |
| <h3>47</h3> | |
| <p>New This Month</p> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon orange"><i class="fas fa-user-clock"></i></div> | |
| <div class="stat-content"> | |
| <h3>12</h3> | |
| <p>Pending Contact</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3 class="card-title">Patient Directory</h3> | |
| <button class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Add Patient</button> | |
| </div> | |
| <div class="card-body"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Patient ID</th> | |
| <th>Name</th> | |
| <th>Date of Birth</th> | |
| <th>SSN (Hash)</th> | |
| <th>Contact</th> | |
| <th>Cases</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>P-001</strong></td> | |
| <td>Jane Smith</td> | |
| <td>03/15/1975</td> | |
| <td><code style="background: var(--bg-main); padding: 2px 6px; border-radius: 4px; font-size: 11px;">a1b2c3d4...</code></td> | |
| <td>jane.smith@email.com</td> | |
| <td>3</td> | |
| <td><button class="btn btn-secondary btn-sm">View</button></td> | |
| </tr> | |
| <tr> | |
| <td><strong>P-002</strong></td> | |
| <td>Robert Johnson</td> | |
| <td>07/22/1968</td> |