Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AffableBPM - Policy Management</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 70px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .policy-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| #chart-container { | |
| height: 300px; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: absolute; | |
| z-index: 100; | |
| left: -250px; | |
| } | |
| .sidebar.open { | |
| left: 0; | |
| } | |
| .main-content { | |
| margin-left: 0 ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-indigo-700"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-2xl mr-3"></i> | |
| <span class="sidebar-text text-xl font-bold">AffableBPM</span> | |
| </div> | |
| <button id="toggle-sidebar" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 flex items-center bg-indigo-900"> | |
| <div class="relative w-10 h-10 rounded-full bg-indigo-200 flex items-center justify-center"> | |
| <span class="text-indigo-800 font-bold">AD</span> | |
| </div> | |
| <div class="ml-3 sidebar-text"> | |
| <div class="font-medium">Admin User</div> | |
| <div class="text-xs text-indigo-300">Administrator</div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <div class="text-xs uppercase text-indigo-400 px-4 py-2 sidebar-text">Main Menu</div> | |
| <a href="#" class="block px-4 py-3 text-white bg-indigo-700 rounded-lg mx-2 mb-1"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1"> | |
| <i class="fas fa-file-contract mr-3"></i> | |
| <span class="sidebar-text">Policies</span> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span class="sidebar-text">Users</span> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1"> | |
| <i class="fas fa-tasks mr-3"></i> | |
| <span class="sidebar-text">Workflows</span> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| <span class="sidebar-text">Reports</span> | |
| </a> | |
| </div> | |
| <div class="p-2 mt-4"> | |
| <div class="text-xs uppercase text-indigo-400 px-4 py-2 sidebar-text">Settings</div> | |
| <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="sidebar-text">Settings</span> | |
| </a> | |
| <a href="#" class="block px-4 py-3 text-white hover:bg-indigo-700 rounded-lg mx-2 mb-1"> | |
| <i class="fas fa-question-circle mr-3"></i> | |
| <span class="sidebar-text">Help</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-indigo-700"> | |
| <a href="#" class="flex items-center text-white hover:text-indigo-200"> | |
| <i class="fas fa-sign-out-alt mr-3"></i> | |
| <span class="sidebar-text">Logout</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 overflow-y-auto ml-64 transition-all duration-300"> | |
| <!-- Mobile Header --> | |
| <div class="md:hidden bg-white shadow p-4 flex items-center justify-between"> | |
| <button id="mobile-menu-button" class="text-gray-600 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="text-xl font-bold text-indigo-800">AffableBPM</div> | |
| <div class="w-8"></div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-white shadow p-4 hidden md:block"> | |
| <div class="flex items-center justify-between"> | |
| <h1 class="text-2xl font-bold text-gray-800">Policy Management</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search policies..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span>New Policy</span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Content --> | |
| <main class="p-4"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Policies</p> | |
| <h3 class="text-2xl font-bold text-gray-800">142</h3> | |
| </div> | |
| <div class="bg-indigo-100 p-3 rounded-full"> | |
| <i class="fas fa-file-contract text-indigo-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-500 text-sm font-medium">+12% from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Active Policies</p> | |
| <h3 class="text-2xl font-bold text-gray-800">98</h3> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-green-500 text-sm font-medium">+8% from last month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Pending Review</p> | |
| <h3 class="text-2xl font-bold text-gray-800">24</h3> | |
| </div> | |
| <div class="bg-yellow-100 p-3 rounded-full"> | |
| <i class="fas fa-clock text-yellow-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-500 text-sm font-medium">+3 from last week</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Expired Policies</p> | |
| <h3 class="text-2xl font-bold text-gray-800">20</h3> | |
| </div> | |
| <div class="bg-red-100 p-3 rounded-full"> | |
| <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2"> | |
| <span class="text-red-500 text-sm font-medium">+5 from last month</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Recent Activity --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Compliance Chart --> | |
| <div class="bg-white rounded-lg shadow p-6 lg:col-span-2"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Policy Compliance Overview</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-800 rounded">Month</button> | |
| <button class="px-3 py-1 text-sm bg-white text-gray-600 rounded">Quarter</button> | |
| <button class="px-3 py-1 text-sm bg-white text-gray-600 rounded">Year</button> | |
| </div> | |
| </div> | |
| <div id="chart-container" class="mt-4"> | |
| <canvas id="complianceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Activity</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-file-signature text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">New HR Policy created</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">IT Security Policy approved</p> | |
| <p class="text-xs text-gray-500">Yesterday</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-edit text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Privacy Policy updated</p> | |
| <p class="text-xs text-gray-500">2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-exclamation text-red-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Expired: Travel Policy</p> | |
| <p class="text-xs text-gray-500">3 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-share-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Code of Conduct distributed</p> | |
| <p class="text-xs text-gray-500">5 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-indigo-600 text-sm font-medium hover:text-indigo-800"> | |
| View all activity <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Policy List --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 border-b flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold text-gray-800">All Policies</h2> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border rounded pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>All Categories</option> | |
| <option>HR</option> | |
| <option>IT</option> | |
| <option>Finance</option> | |
| <option>Operations</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i> | |
| </div> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border rounded pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>All Statuses</option> | |
| <option>Active</option> | |
| <option>Pending</option> | |
| <option>Expired</option> | |
| <option>Draft</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 text-xs"></i> | |
| </div> | |
| </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">Policy Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</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">Last Updated</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Employee Handbook</div> | |
| <div class="text-sm text-gray-500">Version 4.2</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-blue-100 text-blue-800">HR</span> | |
| </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">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jan 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">IT Security Policy</div> | |
| <div class="text-sm text-gray-500">Version 3.1</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-purple-100 text-purple-800">IT</span> | |
| </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">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 Feb 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Travel & Expense Policy</div> | |
| <div class="text-sm text-gray-500">Version 2.0</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">Finance</span> | |
| </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">Pending Review</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28 Feb 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Code of Conduct</div> | |
| <div class="text-sm text-gray-500">Version 5.3</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-blue-100 text-blue-800">HR</span> | |
| </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">Active</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Mar 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-indigo-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Data Privacy Policy</div> | |
| <div class="text-sm text-gray-500">Version 1.5</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-purple-100 text-purple-800">IT</span> | |
| </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">Expired</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01 Dec 2022</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button> | |
| <button class="text-yellow-600 hover:text-yellow-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">142</span> policies | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">Previous</button> | |
| <button class="px-3 py-1 border rounded text-sm bg-indigo-600 text-white">1</button> | |
| <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">2</button> | |
| <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">3</button> | |
| <button class="px-3 py-1 border rounded text-sm bg-white text-gray-700 hover:bg-gray-50">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Policy Creation Modal (Hidden by default) --> | |
| <div id="policy-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> | |
| <div class="p-4 border-b flex items-center justify-between"> | |
| <h3 class="text-lg font-semibold text-gray-800">Create New Policy</h3> | |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form> | |
| <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">Policy Name</label> | |
| <input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Category</label> | |
| <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Select category</option> | |
| <option>HR</option> | |
| <option>IT</option> | |
| <option>Finance</option> | |
| <option>Operations</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Effective Date</label> | |
| <input type="date" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Review Cycle</label> | |
| <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Select review cycle</option> | |
| <option>Monthly</option> | |
| <option>Quarterly</option> | |
| <option>Bi-annually</option> | |
| <option>Annually</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea rows="3" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Policy Document</label> | |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> | |
| <div class="space-y-1 text-center"> | |
| <div class="flex text-sm text-gray-600"> | |
| <label class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none"> | |
| <span>Upload a file</span> | |
| <input type="file" class="sr-only"> | |
| </label> | |
| <p class="pl-1">or drag and drop</p> | |
| </div> | |
| <p class="text-xs text-gray-500">PDF, DOCX up to 10MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="p-4 border-t flex justify-end space-x-3"> | |
| <button id="cancel-modal" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Save Policy</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('toggle-sidebar').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| document.querySelector('.main-content').classList.toggle('ml-64'); | |
| document.querySelector('.main-content').classList.toggle('ml-16'); | |
| }); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('open'); | |
| }); | |
| // Modal handling | |
| document.getElementById('close-modal').addEventListener('click', function() { | |
| document.getElementById('policy-modal').classList.add('hidden'); | |
| }); | |
| document.getElementById('cancel-modal').addEventListener('click', function() { | |
| document.getElementById('policy-modal').classList.add('hidden'); | |
| }); | |
| // Chart initialization | |
| const ctx = document.getElementById('complianceChart').getContext('2d'); | |
| const complianceChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['HR', 'IT', 'Finance', 'Operations', 'Legal', 'Other'], | |
| datasets: [ | |
| { | |
| label: 'Compliant', | |
| data: [95, 87, 78, 92, 85, 80], | |
| backgroundColor: '#4F46E5', | |
| borderRadius: 4 | |
| }, | |
| { | |
| label: 'Non-Compliant', | |
| data: [5, 13, 22, 8, 15, 20], | |
| backgroundColor: '#F87171', | |
| borderRadius: 4 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| x: { | |
| stacked: true, | |
| grid: { | |
| display: false | |
| } | |
| }, | |
| y: { | |
| stacked: true, | |
| beginAtZero: true, | |
| max: 100, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': ' + context.raw + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Simulate new policy button click (for demo purposes) | |
| document.querySelector('header button').addEventListener('click', function() { | |
| document.getElementById('policy-modal').classList.remove('hidden'); | |
| }); | |
| </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/policy-management" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |