9d390da76b
Update UI across all pages with: - New favicon and brand icons (favicon-new.svg, tractatus-icon-new.svg) - Theme CSS integration (tractatus-theme.min.css) - Correct GitHub repository links (AgenticGovernance/tractatus) - PWA manifest updates - Consistent branding colors and gradients 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
323 lines
15 KiB
HTML
323 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Media Triage | Tractatus Admin</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
|
<link rel="stylesheet" href="/css/tailwind.css">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css">
|
|
<script src="/js/admin/auth-check.js"></script>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 flex items-center">
|
|
<div class="h-8 w-8 bg-indigo-600 rounded-lg flex items-center justify-center">
|
|
<svg aria-hidden="true" class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-xl font-bold text-gray-900">Media Triage</span>
|
|
</div>
|
|
<div class="ml-10 flex items-baseline space-x-4">
|
|
<a href="/admin/dashboard.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900">Dashboard</a>
|
|
<a href="/admin/blog-curation.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900">Blog</a>
|
|
<a href="/admin/media-triage.html" class="px-3 py-2 rounded-md text-sm font-medium bg-indigo-50 text-indigo-700">Media Triage</a>
|
|
<a href="/admin/project-manager.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900">Projects</a>
|
|
<a href="/admin/audit-analytics.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900">Audit</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span id="admin-name" class="text-sm text-gray-600 mr-4"></span>
|
|
<button id="logout-btn" class="text-sm font-medium text-gray-700 hover:text-gray-900">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900">Media Inquiry Triage</h1>
|
|
<p class="mt-1 text-sm text-gray-600">AI-powered media inquiry triage with human oversight (Priority 4)</p>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
|
|
<!-- Total Inquiries -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
|
|
<svg aria-hidden="true" class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">Total</p>
|
|
<p id="stat-total" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Inquiries -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">
|
|
<svg aria-hidden="true" class="h-6 w-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">New</p>
|
|
<p id="stat-new" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Triaged -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
|
|
<svg aria-hidden="true" class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">Triaged</p>
|
|
<p id="stat-triaged" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Values Involved -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 bg-red-100 rounded-md p-3">
|
|
<svg aria-hidden="true" class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">Values</p>
|
|
<p id="stat-values" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Responded -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 bg-green-100 rounded-md p-3">
|
|
<svg aria-hidden="true" class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">Responded</p>
|
|
<p id="stat-responded" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="bg-white rounded-lg shadow mb-6">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">Filters</h3>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<!-- Status Filter -->
|
|
<div>
|
|
<label for="filter-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
|
|
<select id="filter-status" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="">All Inquiries</option>
|
|
<option value="new" selected>New (Untriaged)</option>
|
|
<option value="triaged">Triaged (Awaiting Response)</option>
|
|
<option value="responded">Responded</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Urgency Filter -->
|
|
<div>
|
|
<label for="filter-urgency" class="block text-sm font-medium text-gray-700 mb-1">Urgency</label>
|
|
<select id="filter-urgency" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="">All Levels</option>
|
|
<option value="high">High</option>
|
|
<option value="medium">Medium</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Values Involvement Filter -->
|
|
<div>
|
|
<label for="filter-values" class="block text-sm font-medium text-gray-700 mb-1">Values Involvement</label>
|
|
<select id="filter-values" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="">All</option>
|
|
<option value="true">Values-Sensitive Only</option>
|
|
<option value="false">Operational Only</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Sort By -->
|
|
<div>
|
|
<label for="sort-by" class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
|
|
<select id="sort-by" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="received_at">Date Received</option>
|
|
<option value="urgency_score">Urgency Score</option>
|
|
<option value="deadline">Deadline</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex justify-between items-center">
|
|
<button id="clear-filters-btn" class="text-sm text-gray-600 hover:text-gray-900">
|
|
Clear Filters
|
|
</button>
|
|
<span id="filter-results" class="text-sm text-gray-600">
|
|
<!-- Results count will appear here -->
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Inquiries List -->
|
|
<div id="inquiries-container">
|
|
<!-- Loading State -->
|
|
<div class="bg-white rounded-lg shadow p-12 text-center text-gray-500">
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mb-4"></div>
|
|
<p>Loading media inquiries...</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Inquiry Details Modal -->
|
|
<div id="details-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto z-50">
|
|
<div class="flex items-center justify-center min-h-screen px-4 py-6">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full">
|
|
<!-- Modal Header -->
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<h3 class="text-xl font-bold text-gray-900">Inquiry Details</h3>
|
|
<button id="close-details-modal" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Content -->
|
|
<div id="details-modal-content" class="px-6 py-4 max-h-[70vh] overflow-y-auto">
|
|
<!-- Content will be populated dynamically -->
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
|
|
<button id="details-modal-close-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
Close
|
|
</button>
|
|
<button id="details-modal-triage-btn" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
|
|
Run AI Triage
|
|
</button>
|
|
<button id="details-modal-respond-btn" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700">
|
|
Respond to Inquiry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Response Modal -->
|
|
<div id="response-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto z-50">
|
|
<div class="flex items-center justify-center min-h-screen px-4 py-6">
|
|
<div class="bg-white rounded-lg shadow-xl max-w-4xl w-full">
|
|
<!-- Modal Header -->
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
<h3 class="text-xl font-bold text-gray-900">Respond to Inquiry</h3>
|
|
<button id="close-response-modal" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Content -->
|
|
<div class="px-6 py-4">
|
|
<!-- Contact Info -->
|
|
<div id="response-contact-info" class="mb-4 p-4 bg-gray-50 rounded-lg">
|
|
<!-- Will be populated dynamically -->
|
|
</div>
|
|
|
|
<!-- AI Draft Response (if available) -->
|
|
<div id="ai-draft-section" class="hidden mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<div class="flex items-start">
|
|
<svg class="h-5 w-5 text-blue-600 mt-0.5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-blue-900 mb-2">AI-Generated Draft (Review Required)</p>
|
|
<div id="ai-draft-content" class="text-sm text-blue-800 whitespace-pre-wrap"></div>
|
|
<button id="use-draft-btn" class="mt-3 text-sm font-medium text-blue-600 hover:text-blue-700">
|
|
Use this draft as starting point →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Response Editor -->
|
|
<div class="mb-4">
|
|
<label for="response-content" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Your Response
|
|
<span class="text-red-600">*</span>
|
|
</label>
|
|
<textarea id="response-content" rows="12" required
|
|
class="w-full text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="Write your response here..."></textarea>
|
|
<p class="mt-1 text-xs text-gray-500">This response will be sent to the media contact.</p>
|
|
</div>
|
|
|
|
<!-- BoundaryEnforcer Warning (if applicable) -->
|
|
<div id="values-warning" class="hidden mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
|
<div class="flex items-start">
|
|
<svg class="h-5 w-5 text-red-600 mt-0.5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-red-900 mb-1">⚠️ BoundaryEnforcer: Values-Sensitive Topic</p>
|
|
<p id="values-warning-text" class="text-sm text-red-800"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
|
|
<button id="response-modal-cancel-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200">
|
|
Cancel
|
|
</button>
|
|
<button id="send-response-btn" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700">
|
|
Send Response
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notifications -->
|
|
<div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2">
|
|
<!-- Toast messages will appear here -->
|
|
</div>
|
|
|
|
<script src="/js/admin/media-triage.js"></script>
|
|
|
|
</body>
|
|
</html>
|