Tomerg7898/annotateflow-data-annotation-command-center
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>AnnotateFlow - Workers</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="components/navbar.js"></script>12 <script src="components/sidebar.js"></script>13 <script src="components/worker-card.js"></script>14</head>15<body class="bg-gray-50">16 <custom-navbar></custom-navbar>17 <div class="flex">18 <custom-sidebar></custom-sidebar>19 20 <main class="flex-1 p-8 ml-0 md:ml-64 mt-16">21 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">22 <div>23 <h1 class="text-2xl font-bold text-gray-800">Workforce Management</h1>24 <p class="text-gray-600">Manage your annotation team members and their tasks</p>25 </div>26 <button class="mt-4 md:mt-0 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">27 <i data-feather="plus" class="mr-2 w-4 h-4"></i>28 Add New Worker29 </button>30 </div>31 <div class="bg-white rounded-xl shadow-md p-6 mb-8">32 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">33 <h2 class="text-xl font-semibold text-gray-800">Worker Statistics</h2>34 <div class="flex space-x-4 mt-4 md:mt-0">35 <div class="text-center">36 <div class="text-2xl font-bold text-blue-500">143</div>37 <div class="text-sm text-gray-500">Total Workers</div>38 </div>39 <div class="text-center">40 <div class="text-2xl font-bold text-green-500">127</div>41 <div class="text-sm text-gray-500">Active Today</div>42 </div>43 <div class="text-center">44 <div class="text-2xl font-bold text-purple-500">8.2</div>45 <div class="text-sm text-gray-500">Avg. Productivity</div>46 </div>47 </div>48 </div>49 50 <div class="mb-8">51 <h3 class="text-lg font-medium text-gray-800 mb-4">Input Logs</h3>52 <div class="bg-gray-50 rounded-lg p-4">53 <div class="flex items-center justify-between mb-4">54 <div class="flex items-center space-x-2">55 <input type="text" placeholder="Search logs..." class="px-4 py-2 border rounded-lg w-64">56 <select class="px-4 py-2 border rounded-lg">57 <option>All Projects</option>58 <option>Autonomous Vehicles</option>59 <option>Medical Imaging</option>60 <option>Text Classification</option>61 </select>62 </div>63 <button class="bg-white border px-4 py-2 rounded-lg flex items-center">64 <i data-feather="filter" class="mr-2 w-4 h-4"></i>65 Filters66 </button>67 </div>68 69 <div class="overflow-x-auto">70 <table class="min-w-full divide-y divide-gray-200">71 <thead class="bg-gray-100">72 <tr>73 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Worker</th>74 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>75 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>76 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Input</th>77 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>78 </tr>79 </thead>80 <tbody class="bg-white divide-y divide-gray-200">81 <tr>82 <td class="px-6 py-4 whitespace-nowrap">John D.</td>83 <td class="px-6 py-4 whitespace-nowrap">Autonomous Vehicles</td>84 <td class="px-6 py-4 whitespace-nowrap">Object Detection</td>85 <td class="px-6 py-4">Labeled 42 objects in frame AV-0042</td>86 <td class="px-6 py-4 whitespace-nowrap">10:42 AM</td>87 </tr>88 <tr>89 <td class="px-6 py-4 whitespace-nowrap">Sarah M.</td>90 <td class="px-6 py-4 whitespace-nowrap">Medical Imaging</td>91 <td class="px-6 py-4 whitespace-nowrap">Tumor Segmentation</td>92 <td class="px-6 py-4">Completed segmentation for patient MRI-8732</td>93 <td class="px-6 py-4 whitespace-nowrap">09:15 AM</td>94 </tr>95 <tr>96 <td class="px-6 py-4 whitespace-nowrap">Alex K.</td>97 <td class="px-6 py-4 whitespace-nowrap">Text Classification</td>98 <td class="px-6 py-4 whitespace-nowrap">Sentiment Analysis</td>99 <td class="px-6 py-4">Classified 128 product reviews</td>100 <td class="px-6 py-4 whitespace-nowrap">11:30 AM</td>101 </tr>102 </tbody>103 </table>104 </div>105 106 <div class="flex justify-between items-center mt-4">107 <div class="text-sm text-gray-500">Showing 1 to 3 of 15 entries</div>108 <div class="flex space-x-2">109 <button class="px-3 py-1 border rounded-lg">Previous</button>110 <button class="px-3 py-1 border rounded-lg bg-blue-500 text-white">1</button>111 <button class="px-3 py-1 border rounded-lg">2</button>112 <button class="px-3 py-1 border rounded-lg">Next</button>113 </div>114 </div>115 </div>116 </div>117 118 <div class="overflow-x-auto">119 <table class="min-w-full divide-y divide-gray-200">120 <thead class="bg-gray-50">121 <tr>122 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>123 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Team</th>124 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projects</th>125 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>126 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>127 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>128 </tr>129 </thead>130</body>131</html>