Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Company Hub | Project Management Dashboard</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-item.active { | |
| border-left: 4px solid #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| .task-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .kanban-column { | |
| min-height: 500px; | |
| } | |
| .avatar-group { | |
| display: flex; | |
| } | |
| .avatar-group-item { | |
| margin-left: -8px; | |
| border: 2px solid white; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| #taskModal, #teamModal, #projectModal { | |
| transition: all 0.3s ease; | |
| } | |
| .modal-overlay { | |
| background-color: rgba(0, 0, 0, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 border-r border-gray-200 bg-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-project-diagram text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-semibold text-gray-800">Company Hub</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow overflow-y-auto"> | |
| <div class="px-4 py-4"> | |
| <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Navigation</div> | |
| <nav class="space-y-1"> | |
| <a href="#" class="sidebar-item active group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-900 bg-blue-50"> | |
| <i class="fas fa-tachometer-alt mr-3 text-blue-500"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <i class="fas fa-tasks mr-3 text-green-500"></i> | |
| Tasks | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <i class="fas fa-users mr-3 text-purple-500"></i> | |
| Teams | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <i class="fas fa-book mr-3 text-yellow-500"></i> | |
| Knowledge Base | |
| </a> | |
| <a href="#" class="sidebar-item group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50"> | |
| <i class="fas fa-folder mr-3 text-indigo-500"></i> | |
| Projects | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="px-4 py-4 border-t border-gray-200"> | |
| <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Quick Actions</div> | |
| <button onclick="openTaskModal()" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 mb-2"> | |
| <i class="fas fa-plus mr-2"></i> New Task | |
| </button> | |
| <button onclick="openProjectModal()" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 mb-2"> | |
| <i class="fas fa-folder-plus mr-2"></i> New Project | |
| </button> | |
| <button onclick="openTeamModal()" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700"> | |
| <i class="fas fa-user-plus mr-2"></i> Add Team Member | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 px-4"> | |
| <div class="relative max-w-md"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Search..." type="search"> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button class="flex items-center max-w-xs text-sm rounded-full focus:outline-none" id="user-menu"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-50"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1> | |
| <p class="text-gray-600">Welcome back! Here's what's happening with your projects.</p> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-tasks text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Tasks</p> | |
| <p class="text-2xl font-semibold text-gray-800">24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-project-diagram text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Projects</p> | |
| <p class="text-2xl font-semibold text-gray-800">5</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Team Members</p> | |
| <p class="text-2xl font-semibold text-gray-800">18</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-book text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Knowledge Articles</p> | |
| <p class="text-2xl font-semibold text-gray-800">127</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <button onclick="switchTab('tasks')" class="tab-button py-4 px-6 border-b-2 font-medium text-sm border-blue-500 text-blue-600">Tasks</button> | |
| <button onclick="switchTab('projects')" class="tab-button py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Projects</button> | |
| <button onclick="switchTab('teams')" class="tab-button py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Teams</button> | |
| <button onclick="switchTab('knowledge')" class="tab-button py-4 px-6 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Knowledge Base</button> | |
| </nav> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Tasks Tab Content --> | |
| <div id="tasks-tab" class="tab-content active"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-medium text-gray-800">Task Management</h2> | |
| <div class="flex space-x-2"> | |
| <select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>All Projects</option> | |
| <option>Website Redesign</option> | |
| <option>Mobile App</option> | |
| <option>Marketing Campaign</option> | |
| </select> | |
| <button onclick="openTaskModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-plus mr-2"></i> New Task | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Kanban Board --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- To Do Column --> | |
| <div class="kanban-column bg-gray-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-700">To Do</h3> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-200 text-gray-700">5</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-lg shadow p-4 cursor-move transition duration-150 ease-in-out"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">High</span> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Move to In Progress</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-2">Design new homepage layout</h4> | |
| <p class="text-sm text-gray-600 mb-3">Create wireframes and mockups for the new homepage design based on client requirements.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700">Website Redesign</span> | |
| </div> | |
| <div class="avatar-group -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-lg shadow p-4 cursor-move transition duration-150 ease-in-out"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Move to In Progress</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-2">Research competitors</h4> | |
| <p class="text-sm text-gray-600 mb-3">Analyze 5 competitor websites and prepare a comparison report.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700">Marketing</span> | |
| </div> | |
| <div class="avatar-group -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- In Progress Column --> | |
| <div class="kanban-column bg-gray-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-700">In Progress</h3> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-200 text-gray-700">3</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-lg shadow p-4 cursor-move transition duration-150 ease-in-out"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Urgent</span> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Move to Done</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-2">Fix login authentication bug</h4> | |
| <p class="text-sm text-gray-600 mb-3">Users are unable to login after password reset. Need to fix the authentication flow.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700">Mobile App</span> | |
| </div> | |
| <div class="avatar-group -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/90.jpg" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Done Column --> | |
| <div class="kanban-column bg-gray-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium text-gray-700">Done</h3> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-200 text-gray-700">7</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Task Card --> | |
| <div class="task-card bg-white rounded-lg shadow p-4 cursor-move transition duration-150 ease-in-out"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Delete</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Move to In Progress</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h4 class="font-medium text-gray-800 mb-2">Create project documentation</h4> | |
| <p class="text-sm text-gray-600 mb-3">Document all API endpoints and database schema for the new project.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-700">Backend</span> | |
| </div> | |
| <div class="avatar-group -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Tab Content --> | |
| <div id="projects-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-medium text-gray-800">Project Management</h2> | |
| <button onclick="openProjectModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700"> | |
| <i class="fas fa-plus mr-2"></i> New Project | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project Card --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-globe"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800">Website Redesign</h3> | |
| </div> | |
| <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Complete redesign of company website with modern UI/UX and improved performance.</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Progress</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="avatar-group -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium">+3</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Due: May 15, 2023</span> | |
| <button class="text-sm font-medium text-blue-600 hover:text-blue-800">View Details</button> | |
| </div> | |
| </div> | |
| <!-- Project Card --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800">Mobile App</h3> | |
| </div> | |
| <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Development of iOS and Android app for customer engagement and sales.</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Progress</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="avatar-group -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/90.jpg" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Due: June 30, 2023</span> | |
| <button class="text-sm font-medium text-purple-600 hover:text-purple-800">View Details</button> | |
| </div> | |
| </div> | |
| <!-- Project Card --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-bullhorn"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800">Marketing Campaign</h3> | |
| </div> | |
| <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Planning</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Q3 marketing campaign targeting new customer acquisition and brand awareness.</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Progress</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 15%"></div> | |
| </div> | |
| </div> | |
| <div class="avatar-group -space-x-2"> | |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| <div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium">+2</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Start: July 1, 2023</span> | |
| <button class="text-sm font-medium text-yellow-600 hover:text-yellow-800">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Teams Tab Content --> | |
| <div id="teams-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-medium text-gray-800">Team Management</h2> | |
| <button onclick="openTeamModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700"> | |
| <i class="fas fa-plus mr-2"></i> Add Team Member | |
| </button> | |
| </div> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Teams Overview</h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500">Manage all teams and members in your organization.</p> | |
| </div> | |
| <div class="bg-white overflow-hidden"> | |
| <ul class="divide-y divide-gray-200"> | |
| <!-- Team Item --> | |
| <li class="px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Design Team</div> | |
| <div class="text-sm text-gray-500">5 members</div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <button class="ml-3 inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> | |
| View Members | |
| </button> | |
| <button class="ml-3 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none"> | |
| Add Member | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Team Item --> | |
| <li class="px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Development Team</div> | |
| <div class="text-sm text-gray-500">8 members</div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <button class="ml-3 inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> | |
| View Members | |
| </button> | |
| <button class="ml-3 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none"> | |
| Add Member | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Team Item --> | |
| <li class="px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-bullhorn"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Marketing Team</div> | |
| <div class="text-sm text-gray-500">4 members</div> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <button class="ml-3 inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"> | |
| View Members | |
| </button> | |
| <button class="ml-3 inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none"> | |
| Add Member | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">All Team Members</h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500">List of all members across all teams.</p> | |
| </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">Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teams</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">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <!-- Member Row --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">sarah@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">UI/UX Designer</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Design</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Dev</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs 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"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Remove</button> | |
| </td> | |
| </tr> | |
| <!-- Member Row --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Michael Chen</div> | |
| <div class="text-sm text-gray-500">michael@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Frontend Developer</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Dev</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs 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"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Remove</button> | |
| </td> | |
| </tr> | |
| <!-- Member Row --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">David Wilson</div> | |
| <div class="text-sm text-gray-500">david@example.com</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Marketing Specialist</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Marketing</span> | |
| <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Design</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs 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"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Remove</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Knowledge Base Tab Content --> | |
| <div id="knowledge-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-lg font-medium text-gray-800">Knowledge Base</h2> | |
| <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-yellow-600 hover:bg-yellow-700"> | |
| <i class="fas fa-plus mr-2"></i> New Article | |
| </button> | |
| </div> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Document Categories</h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500">Browse documentation by category.</p> | |
| </div> | |
| <div class="bg-white overflow-hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6"> | |
| <!-- Category Card --> | |
| <div class="bg-gray-50 rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 bg-blue-600"> | |
| <h3 class="text-lg font-medium text-white">Development</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Technical documentation for developers including API references, coding standards, and deployment guides.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">24 articles</span> | |
| <button class="text-sm font-medium text-blue-600 hover:text-blue-800">View All</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Category Card --> | |
| <div class="bg-gray-50 rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 bg-purple-600"> | |
| <h3 class="text-lg font-medium text-white">Design</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Design system, brand guidelines, UI components library, and design process documentation.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">18 articles</span> | |
| <button class="text-sm font-medium text-purple-600 hover:text-purple-800">View All</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Category Card --> | |
| <div class="bg-gray-50 rounded-lg shadow overflow-hidden"> | |
| <div class="p-4 bg-green-600"> | |
| <h3 class="text-lg font-medium text-white">Marketing</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="text-gray-600 mb-4">Marketing strategies, campaign templates, brand messaging, and social media guidelines.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">32 articles</span> | |
| <button class="text-sm font-medium text-green-600 hover:text-green-800">View All</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow overflow-hidden sm:rounded-lg"> | |
| <div class="px-4 py-5 sm:px-6 border-b border-gray-200"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Articles</h3> | |
| <p class="mt-1 max-w-2xl text-sm text-gray-500">Recently added or updated documentation.</p> | |
| </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">Title</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">Last Updated</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Author</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"> | |
| <!-- Article Row --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">API Authentication Guide</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Development</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">May 12, 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-2"> | |
| <div class="text-sm font-medium text-gray-900">Michael Chen</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-yellow-600 hover:text-yellow-900">Edit</button> | |
| </td> | |
| </tr> | |
| <!-- Article Row --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">UI Component Library</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Design</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">May 10, 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-2"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-yellow-600 hover:text-yellow-900">Edit</button> | |
| </td> | |
| </tr> | |
| <!-- Article Row --> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">Social Media Guidelines</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Marketing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">May 8, 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-2"> | |
| <div class="text-sm font-medium text-gray-900">David Wilson</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-yellow-600 hover:text-yellow-900">Edit</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Task Modal --> | |
| <div id="taskModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity modal-overlay" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Create New Task</h3> | |
| <div class="mt-2 space-y-4"> | |
| <div> | |
| <label for="taskTitle" class="block text-sm font-medium text-gray-700">Task Title</label> | |
| <input type="text" name="taskTitle" id="taskTitle" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="taskDescription" class="block text-sm font-medium text-gray-700">Description</label> | |
| <textarea id="taskDescription" name="taskDescription" rows="3" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="taskProject" class="block text-sm font-medium text-gray-700">Project</label> | |
| <select id="taskProject" name="taskProject" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Website Redesign</option> | |
| <option>Mobile App</option> | |
| <option>Marketing Campaign</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="taskPriority" class="block text-sm font-medium text-gray-700">Priority</label> | |
| <select id="taskPriority" name="taskPriority" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option class="text-blue-600">High</option> | |
| <option class="text-yellow-600">Medium</option> | |
| <option class="text-gray-600">Low</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="taskAssignees" class="block text-sm font-medium text-gray-700">Assign To</label> | |
| <select id="taskAssignees" name="taskAssignees" multiple class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>Sarah Johnson</option> | |
| <option>Michael Chen</option> | |
| <option>David Wilson</option> | |
| <option>Emily Davis</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="taskDueDate" class="block text-sm font-medium text-gray-700">Due Date</label> | |
| <input type="date" id="taskDueDate" name="taskDueDate" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="taskStatus" class="block text-sm font-medium text-gray-700">Status</label> | |
| <select id="taskStatus" name="taskStatus" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"> | |
| <option>To Do</option> | |
| <option>In Progress</option> | |
| <option>Done</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Create Task | |
| </button> | |
| <button type="button" onclick="closeTaskModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Team Member Modal --> | |
| <div id="teamModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity modal-overlay" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Add Team Member</h3> | |
| <div class="mt-2 space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="memberFirstName" class="block text-sm font-medium text-gray-700">First Name</label> | |
| <input type="text" name="memberFirstName" id="memberFirstName" class="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="memberLastName" class="block text-sm font-medium text-gray-700">Last Name</label> | |
| <input type="text" name="memberLastName" id="memberLastName" class="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="memberEmail" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" name="memberEmail" id="memberEmail" class="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="memberRole" class="block text-sm font-medium text-gray-700">Role</label> | |
| <select id="memberRole" name="memberRole" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> | |
| <option>Designer</option> | |
| <option>Developer</option> | |
| <option>Product Manager</option> | |
| <option>Marketing Specialist</option> | |
| <option>QA Engineer</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="memberTeams" class="block text-sm font-medium text-gray-700">Teams</label> | |
| <select id="memberTeams" name="memberTeams" multiple class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> | |
| <option>Design Team</option> | |
| <option>Development Team</option> | |
| <option>Marketing Team</option> | |
| <option>QA Team</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="memberStatus" class="block text-sm font-medium text-gray-700">Status</label> | |
| <select id="memberStatus" name="memberStatus" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"> | |
| <option>Active</option> | |
| <option>Inactive</option> | |
| <option>On Leave</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Add Member | |
| </button> | |
| <button type="button" onclick="closeTeamModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Modal --> | |
| <div id="projectModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity modal-overlay" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Create New Project</h3> | |
| <div class="mt-2 space-y-4"> | |
| <div> | |
| <label for="projectName" class="block text-sm font-medium text-gray-700">Project Name</label> | |
| <input type="text" name="projectName" id="projectName" class="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="projectDescription" class="block text-sm font-medium text-gray-700">Description</label> | |
| <textarea id="projectDescription" name="projectDescription" rows="3" class="shadow-sm focus:ring-green-500 focus:border-green-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="projectStartDate" class="block text-sm font-medium text-gray-700">Start Date</label> | |
| <input type="date" id="projectStartDate" name="projectStartDate" class="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="projectDueDate" class="block text-sm font-medium text-gray-700">Due Date</label> | |
| <input type="date" id="projectDueDate" name="projectDueDate" class="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="projectTeam" class="block text-sm font-medium text-gray-700">Team</label> | |
| <select id="projectTeam" name="projectTeam" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"> | |
| <option>Design Team</option> | |
| <option>Development Team</option> | |
| <option>Marketing Team</option> | |
| <option>Cross-functional</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="projectStatus" class="block text-sm font-medium text-gray-700">Status</label> | |
| <select id="projectStatus" name="projectStatus" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"> | |
| <option>Planning</option> | |
| <option>Active</option> | |
| <option>On Hold</option> | |
| <option>Completed</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Create Project | |
| </button> | |
| <button type="button" onclick="closeProjectModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| function switchTab(tabName) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show the selected tab content | |
| document.getElementById(`${tabName}-tab`).classList.add('active'); | |
| // Update tab button styles | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.classList.remove('border-blue-500', 'text-blue-600'); | |
| button.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| // Highlight the active tab button | |
| const activeButton = Array.from(document.querySelectorAll('.tab-button')).find(button => | |
| button.textContent.toLowerCase().includes(tabName) | |
| ); | |
| if (activeButton) { | |
| activeButton.classList.add('border-blue-500', 'text-blue-600'); | |
| activeButton.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| } | |
| } | |
| // Modal functions | |
| function openTaskModal() { | |
| document.getElementById('taskModal').classList.remove('hidden'); | |
| } | |
| function closeTaskModal() { | |
| document.getElementById('taskModal').classList.add('hidden'); | |
| } | |
| function openTeamModal() { | |
| document.getElementById('teamModal').classList.remove('hidden'); | |
| } | |
| function closeTeamModal() { | |
| document.getElementById('teamModal').classList.add('hidden'); | |
| } | |
| function openProjectModal() { | |
| document.getElementById('projectModal').classList.remove('hidden'); | |
| } | |
| function closeProjectModal() { | |
| document.getElementById('projectModal').classList.add('hidden'); | |
| } | |
| // Dropdown functionality | |
| document.addEventListener('click', function(event) { | |
| if (!event.target.matches('.dropdown button')) { | |
| document.querySelectorAll('.dropdown-menu').forEach(menu => { | |
| menu.classList.add('hidden'); | |
| }); | |
| } | |
| }); | |
| document.querySelectorAll('.dropdown button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const menu = this.parentElement.querySelector('.dropdown-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| }); | |
| // Initialize the dashboard with Tasks tab active | |
| document.addEventListener('DOMContentLoaded', function() { | |
| switchTab('tasks'); | |
| }); | |
| </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=sozonome/company-hub-prototype" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |