8667088c5f
SUMMARY: Completed Phase 2 of admin UI overhaul: Created unified navbar component for simple pages, standardized CSS versioning across all pages, and fixed broken navigation. Pragmatic approach preserves valuable cross-page navigation while ensuring consistency. CHANGES - Simple Pages (Unified Navbar Component): - newsletter-management.html: Replaced custom navbar with component - hooks-dashboard.html: Replaced custom navbar with component - audit-analytics.html: Fixed wrong navbar (was using public site component) CHANGES - Complex Pages (Standardized CSS Only): - case-moderation.html: Added CSS version v=1759833751 - media-triage.html: Added CSS version v=1759833751 - project-manager.html: Updated CSS version to v=1759833751 - rule-manager.html: Updated CSS version to v=1759833751 (These pages retained custom navbars to preserve cross-page navigation UX) COMPONENT ENHANCEMENTS: - navbar-admin.js: Added 'hooks' icon for Framework Hooks Dashboard - Newsletter management JS: Removed manual admin-name and logout handling CSS STANDARDIZATION: Target version: /css/tailwind.css?v=1759833751 - 7 pages now use standardized version (was 3 different versions + missing) RESULTS: - All admin pages now have consistent navbar styling - Simple pages use unified component (3 pages) - Complex pages use standardized custom navbars (6 pages) - All pages have correct CSS versioning - audit-analytics.html fixed (was using wrong component) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
199 lines
9 KiB
HTML
199 lines
9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Project Manager | Multi-Project Governance</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon-new.svg">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
|
<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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-xl font-bold text-gray-900">Project Manager</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/rule-manager.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900">Rules</a>
|
|
<a href="/admin/project-manager.html" class="px-3 py-2 rounded-md text-sm font-medium bg-indigo-50 text-indigo-700">Projects</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/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 flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">Project Management</h1>
|
|
<p class="mt-1 text-sm text-gray-600">Manage projects and their variable values for context-aware governance</p>
|
|
</div>
|
|
<button id="new-project-btn" class="bg-indigo-600 text-white px-6 py-3 rounded-md text-sm font-medium hover:bg-indigo-700 shadow-sm flex items-center">
|
|
<svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
New Project
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<!-- Total Projects -->
|
|
<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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">Total Projects</p>
|
|
<p id="stat-total" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Projects -->
|
|
<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">Active</p>
|
|
<p id="stat-active" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Variables -->
|
|
<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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">Variables</p>
|
|
<p id="stat-variables" class="text-2xl font-semibold text-gray-900">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database Types -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 bg-purple-100 rounded-md p-3">
|
|
<svg aria-hidden="true" class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-500">DB Types</p>
|
|
<p id="stat-databases" 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-3 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</option>
|
|
<option value="true" selected>Active Only</option>
|
|
<option value="false">Inactive Only</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Database Filter -->
|
|
<div>
|
|
<label for="filter-database" class="block text-sm font-medium text-gray-700 mb-1">Database</label>
|
|
<select id="filter-database" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="">All</option>
|
|
<option value="MongoDB">MongoDB</option>
|
|
<option value="PostgreSQL">PostgreSQL</option>
|
|
<option value="MySQL">MySQL</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="name">Name</option>
|
|
<option value="id">Project ID</option>
|
|
<option value="variableCount">Variable Count</option>
|
|
<option value="updatedAt">Last Updated</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>
|
|
|
|
<!-- Projects Grid -->
|
|
<div id="projects-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Loading State -->
|
|
<div class="col-span-full text-center py-12 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 projects...</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Project Editor Modal (will be loaded dynamically) -->
|
|
<div id="modal-container"></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/project-editor.js?v=1760127701"></script>
|
|
<script src="/js/admin/project-manager.js?v=1760127701"></script>
|
|
|
|
</body>
|
|
</html>
|