Hugging Face's logo

Spaces:
XXXMARK
/
dashcms
Running

App Files Community
dashcms / index.html
XXXMARK's picture
XXXMARK
Add 3 files
1dc43bc verified
raw
history blame contribute delete
84.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TeamFlow CMS 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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
dark: '#0F172A',
light: '#1E293B',
},
accent: '#FBBF24',
}
}
}
}
</script>
<style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1E293B;
}
::-webkit-scrollbar-thumb {
background: #FBBF24;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #D97706;
}
/* Animation for notifications */
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.notification {
animation: slideIn 0.3s ease-out;
}
/* Tab content transition */
.tab-content {
transition: opacity 0.3s ease;
}
</style>
</head>
<body class="bg-primary-dark text-white min-h-screen">
<!-- Notification System -->
<div id="notification-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
<!-- Main Container -->
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 bg-primary-light border-r border-gray-700">
<!-- Logo -->
<div class="flex items-center justify-center h-16 px-4 border-b border-gray-700">
<div class="flex items-center">
<i class="fas fa-users-cog text-accent text-2xl mr-2"></i>
<span class="text-xl font-bold">Team<span class="text-accent">Flow</span></span>
</div>
</div>
<!-- User Profile -->
<div class="flex items-center px-4 py-6 border-b border-gray-700">
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-400">Admin</p>
</div>
</div>
<!-- Navigation -->
<div class="flex-1 overflow-y-auto">
<nav class="px-2 space-y-1">
<!-- Dashboard -->
<a href="#" onclick="showTab('dashboard')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md bg-primary-dark text-white hover:bg-gray-700 hover:text-accent">
<i class="fas fa-tachometer-alt mr-3 text-accent"></i>
Dashboard
</a>
<!-- Teams -->
<a href="#" onclick="showTab('teams')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-users mr-3"></i>
Teams
</a>
<!-- Tasks -->
<a href="#" onclick="showTab('tasks')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-tasks mr-3"></i>
Tasks
</a>
<!-- Affiliates -->
<a href="#" onclick="showTab('affiliates')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-handshake mr-3"></i>
Affiliates
</a>
<!-- Referrals -->
<a href="#" onclick="showTab('referrals')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-user-plus mr-3"></i>
Referrals
</a>
<!-- Payouts -->
<a href="#" onclick="showTab('payouts')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-money-bill-wave mr-3"></i>
Payouts
</a>
<!-- Challenges -->
<a href="#" onclick="showTab('challenges')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-trophy mr-3"></i>
Challenges
</a>
<!-- Rewards -->
<a href="#" onclick="showTab('rewards')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-award mr-3"></i>
Rewards
</a>
<!-- Points -->
<a href="#" onclick="showTab('points')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-coins mr-3"></i>
Points
</a>
<!-- Newsletter -->
<a href="#" onclick="showTab('newsletter')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-newspaper mr-3"></i>
Newsletter
</a>
<!-- Sign Up -->
<a href="#" onclick="showTab('signup')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-user-plus mr-3"></i>
Sign Up
</a>
<!-- AI Assistance -->
<a href="#" onclick="showTab('ai-assistance')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-robot mr-3"></i>
AI Assistance
</a>
<!-- AI Support Chat -->
<a href="#" onclick="showTab('ai-support')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-comments mr-3"></i>
AI Support Chat
</a>
<!-- Marketplace -->
<a href="#" onclick="showTab('marketplace')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-store mr-3"></i>
Marketplace
</a>
<!-- Profile -->
<a href="#" onclick="showTab('profile')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-user-circle mr-3"></i>
Profile
</a>
<!-- Admin Panel -->
<a href="#" onclick="showTab('admin')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-lock mr-3"></i>
Admin Panel
</a>
<!-- Settings -->
<a href="#" onclick="showTab('settings')" class="tab-link group flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-cog mr-3"></i>
Settings
</a>
</nav>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-700 bg-primary-light">
<!-- Mobile menu button -->
<div class="md:hidden">
<button onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Search bar -->
<div class="flex-1 max-w-md mx-4">
<div class="relative">
<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-600 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent" placeholder="Search..." type="search">
</div>
</div>
<!-- Right side icons -->
<div class="flex items-center space-x-4">
<button class="text-gray-300 hover:text-white focus:outline-none">
<i class="fas fa-bell text-xl"></i>
</button>
<button class="text-gray-300 hover:text-white focus:outline-none">
<i class="fas fa-question-circle text-xl"></i>
</button>
<button onclick="toggleDarkMode()" class="text-gray-300 hover:text-white focus:outline-none">
<i class="fas fa-moon text-xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu (hidden by default) -->
<div id="mobile-menu" class="hidden md:hidden bg-primary-light border-b border-gray-700">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" onclick="showTab('dashboard')" class="tab-link block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-gray-700 hover:text-accent">
<i class="fas fa-tachometer-alt mr-2 text-accent"></i>
Dashboard
</a>
<a href="#" onclick="showTab('teams')" class="tab-link block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-users mr-2"></i>
Teams
</a>
<a href="#" onclick="showTab('tasks')" class="tab-link block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-accent">
<i class="fas fa-tasks mr-2"></i>
Tasks
</a>
<!-- Add more mobile menu items as needed -->
</div>
</div>
<!-- Main Content Area -->
<main class="p-4">
<!-- Dashboard Tab Content -->
<div id="dashboard" class="tab-content">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Dashboard Overview</h2>
<button class="bg-accent hover:bg-yellow-500 text-primary-dark font-bold py-2 px-4 rounded flex items-center">
<i class="fas fa-plus mr-2"></i> Quick Action
</button>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-yellow-500 text-accent mr-4">
<i class="fas fa-users text-xl"></i>
</div>
<div>
<p class="text-gray-400 text-sm">Active Teams</p>
<p class="text-xl font-bold">24</p>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-green-500 text-green-400 mr-4">
<i class="fas fa-tasks text-xl"></i>
</div>
<div>
<p class="text-gray-400 text-sm">Completed Tasks</p>
<p class="text-xl font-bold">156</p>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-blue-500 text-blue-400 mr-4">
<i class="fas fa-handshake text-xl"></i>
</div>
<div>
<p class="text-gray-400 text-sm">Affiliates</p>
<p class="text-xl font-bold">42</p>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center">
<div class="p-3 rounded-full bg-opacity-20 bg-purple-500 text-purple-400 mr-4">
<i class="fas fa-coins text-xl"></i>
</div>
<div>
<p class="text-gray-400 text-sm">Points Earned</p>
<p class="text-xl font-bold">1,240</p>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700 mb-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Recent Activity</h3>
<button class="text-accent hover:text-yellow-500 text-sm">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-start">
<img class="h-8 w-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
<div class="flex-1">
<p class="text-sm"><span class="font-medium">Sarah Johnson</span> completed task <span class="text-accent">"Update marketing materials"</span></p>
<p class="text-xs text-gray-400">2 hours ago</p>
</div>
</div>
<div class="flex items-start">
<img class="h-8 w-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
<div class="flex-1">
<p class="text-sm"><span class="font-medium">John Doe</span> created a new team <span class="text-accent">"Content Creators"</span></p>
<p class="text-xs text-gray-400">5 hours ago</p>
</div>
</div>
<div class="flex items-start">
<img class="h-8 w-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar">
<div class="flex-1">
<p class="text-sm"><span class="font-medium">Emily Chen</span> earned <span class="text-accent">150 points</span> for completing a challenge</p>
<p class="text-xs text-gray-400">1 day ago</p>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<h3 class="text-lg font-semibold mb-4">Quick Actions</h3>
<div class="grid grid-cols-2 gap-3">
<button onclick="showTab('tasks')" class="flex flex-col items-center justify-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
<i class="fas fa-tasks text-accent text-xl mb-2"></i>
<span class="text-sm">Create Task</span>
</button>
<button onclick="showTab('teams')" class="flex flex-col items-center justify-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
<i class="fas fa-users text-accent text-xl mb-2"></i>
<span class="text-sm">Add Team</span>
</button>
<button onclick="showTab('challenges')" class="flex flex-col items-center justify-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
<i class="fas fa-trophy text-accent text-xl mb-2"></i>
<span class="text-sm">New Challenge</span>
</button>
<button onclick="showTab('newsletter')" class="flex flex-col items-center justify-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
<i class="fas fa-envelope text-accent text-xl mb-2"></i>
<span class="text-sm">Send Newsletter</span>
</button>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<h3 class="text-lg font-semibold mb-4">Upcoming Deadlines</h3>
<div class="space-y-3">
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div>
<p class="text-sm font-medium">Q2 Marketing Report</p>
<p class="text-xs text-gray-400">Due in 3 days</p>
</div>
<span class="text-xs px-2 py-1 bg-yellow-500 bg-opacity-20 text-accent rounded">Team Task</span>
</div>
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div>
<p class="text-sm font-medium">Affiliate Payouts</p>
<p class="text-xs text-gray-400">Due in 5 days</p>
</div>
<span class="text-xs px-2 py-1 bg-green-500 bg-opacity-20 text-green-400 rounded">Financial</span>
</div>
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div>
<p class="text-sm font-medium">Monthly Newsletter</p>
<p class="text-xs text-gray-400">Due in 2 days</p>
</div>
<span class="text-xs px-2 py-1 bg-blue-500 bg-opacity-20 text-blue-400 rounded">Communication</span>
</div>
</div>
</div>
</div>
</div>
<!-- Teams Tab Content -->
<div id="teams" class="tab-content hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Teams Management</h2>
<button onclick="openTeamModal()" class="bg-accent hover:bg-yellow-500 text-primary-dark font-bold py-2 px-4 rounded flex items-center">
<i class="fas fa-plus mr-2"></i> New Team
</button>
</div>
<!-- Team Filters -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700 mb-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">Search</label>
<input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-accent">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">Department</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-accent">
<option>All Departments</option>
<option>Marketing</option>
<option>Development</option>
<option>Sales</option>
<option>Support</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-1">Status</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-accent">
<option>All Statuses</option>
<option>Active</option>
<option>Inactive</option>
<option>Archived</option>
</select>
</div>
<div class="flex items-end">
<button class="w-full bg-accent hover:bg-yellow-500 text-primary-dark font-bold py-2 px-4 rounded">
Apply Filters
</button>
</div>
</div>
</div>
<!-- Teams Table -->
<div class="bg-primary-light rounded-lg border border-gray-700 overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-gray-800">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Team Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Department</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Members</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-primary-light divide-y divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center text-accent">
<i class="fas fa-users"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium">Marketing Team</div>
<div class="text-sm text-gray-400">Created: 12/05/2023</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-500 bg-opacity-20 text-blue-400">Marketing</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex -space-x-2">
<img class="h-8 w-8 rounded-full border-2 border-primary-light" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
<img class="h-8 w-8 rounded-full border-2 border-primary-light" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<img class="h-8 w-8 rounded-full border-2 border-primary-light" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<div class="h-8 w-8 rounded-full border-2 border-primary-light bg-gray-700 flex items-center justify-center text-xs">+5</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-500 bg-opacity-20 text-green-400">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-accent hover:text-yellow-500 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-blue-400 hover:text-blue-300 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center text-accent">
<i class="fas fa-users"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium">Development Team</div>
<div class="text-sm text-gray-400">Created: 05/03/2023</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-500 bg-opacity-20 text-purple-400">Development</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex -space-x-2">
<img class="h-8 w-8 rounded-full border-2 border-primary-light" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
<img class="h-8 w-8 rounded-full border-2 border-primary-light" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
<div class="h-8 w-8 rounded-full border-2 border-primary-light bg-gray-700 flex items-center justify-center text-xs">+8</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-500 bg-opacity-20 text-green-400">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-accent hover:text-yellow-500 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-blue-400 hover:text-blue-300 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center text-accent">
<i class="fas fa-users"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium">Content Creators</div>
<div class="text-sm text-gray-400">Created: 18/06/2023</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-pink-500 bg-opacity-20 text-pink-400">Content</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex -space-x-2">
<img class="h-8 w-8 rounded-full border-2 border-primary-light" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<img class="h-8 w-8 rounded-full border-2 border-primary-light" src="https://randomuser.me/api/portraits/men/42.jpg" alt="">
<div class="h-8 w-8 rounded-full border-2 border-primary-light bg-gray-700 flex items-center justify-center text-xs">+3</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-500 bg-opacity-20 text-green-400">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-accent hover:text-yellow-500 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-blue-400 hover:text-blue-300 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 flex items-center justify-between border-t border-gray-700">
<div class="text-sm text-gray-400">Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> teams</div>
<div class="flex space-x-2">
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">Previous</button>
<button class="px-3 py-1 rounded-md bg-accent text-primary-dark font-medium">1</button>
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">2</button>
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">3</button>
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">Next</button>
</div>
</div>
</div>
</div>
<!-- Tasks Tab Content -->
<div id="tasks" class="tab-content hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Task Management</h2>
<button onclick="openTaskModal()" class="bg-accent hover:bg-yellow-500 text-primary-dark font-bold py-2 px-4 rounded flex items-center">
<i class="fas fa-plus mr-2"></i> New Task
</button>
</div>
<!-- Task Board -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<!-- To Do Column -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold">To Do</h3>
<span class="text-xs px-2 py-1 bg-gray-700 rounded-full">5 tasks</span>
</div>
<div class="space-y-3">
<div class="bg-gray-700 p-3 rounded-lg border-l-4 border-yellow-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-medium">Update website content</h4>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-white"><i class="fas fa-edit text-xs"></i></button>
<button class="text-gray-400 hover:text-white"><i class="fas fa-trash text-xs"></i></button>
</div>
</div>
<p class="text-xs text-gray-400 mb-2">Update homepage with new products and promotions</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Marketing</span>
<span class="text-xs text-gray-400">Due: Tomorrow</span>
</div>
</div>
<div class="bg-gray-700 p-3 rounded-lg border-l-4 border-yellow-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-medium">Create Q2 report</h4>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-white"><i class="fas fa-edit text-xs"></i></button>
<button class="text-gray-400 hover:text-white"><i class="fas fa-trash text-xs"></i></button>
</div>
</div>
<p class="text-xs text-gray-400 mb-2">Compile all Q2 metrics and prepare presentation</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Analytics</span>
<span class="text-xs text-gray-400">Due: Friday</span>
</div>
</div>
<button class="w-full text-gray-400 hover:text-gray-300 text-sm flex items-center justify-center py-2 border border-dashed border-gray-600 rounded-lg">
<i class="fas fa-plus mr-1"></i> Add Task
</button>
</div>
</div>
<!-- In Progress Column -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold">In Progress</h3>
<span class="text-xs px-2 py-1 bg-gray-700 rounded-full">3 tasks</span>
</div>
<div class="space-y-3">
<div class="bg-gray-700 p-3 rounded-lg border-l-4 border-blue-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-medium">Implement new API</h4>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-white"><i class="fas fa-edit text-xs"></i></button>
<button class="text-gray-400 hover:text-white"><i class="fas fa-trash text-xs"></i></button>
</div>
</div>
<p class="text-xs text-gray-400 mb-2">Integrate payment gateway with new API endpoints</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Development</span>
<span class="text-xs text-gray-400">Due: 2 days</span>
</div>
</div>
<div class="bg-gray-700 p-3 rounded-lg border-l-4 border-blue-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-medium">Design landing page</h4>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-white"><i class="fas fa-edit text-xs"></i></button>
<button class="text-gray-400 hover:text-white"><i class="fas fa-trash text-xs"></i></button>
</div>
</div>
<p class="text-xs text-gray-400 mb-2">Create wireframes and mockups for new campaign</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Design</span>
<span class="text-xs text-gray-400">Due: Monday</span>
</div>
</div>
<button class="w-full text-gray-400 hover:text-gray-300 text-sm flex items-center justify-center py-2 border border-dashed border-gray-600 rounded-lg">
<i class="fas fa-plus mr-1"></i> Add Task
</button>
</div>
</div>
<!-- Review Column -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold">In Review</h3>
<span class="text-xs px-2 py-1 bg-gray-700 rounded-full">2 tasks</span>
</div>
<div class="space-y-3">
<div class="bg-gray-700 p-3 rounded-lg border-l-4 border-purple-500">
<div class="flex justify-between items-start mb-2">
<h4 class="font-medium">Blog post draft</h4>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-white"><i class="fas fa-edit text-xs"></i></button>
<button class="text-gray-400 hover:text-white"><i class="fas fa-trash text-xs"></i></button>
</div>
</div>
<p class="text-xs text-gray-400 mb-2">Review and edit the new blog post about industry trends</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Content</span>
<span class="text-xs text-gray-400">Due: Today</span>
</div>
</div>
<button class="w-full text-gray-400 hover:text-gray-300 text-sm flex items-center justify-center py-2 border border-dashed border-gray-600 rounded-lg">
<i class="fas fa-plus mr-1"></i> Add Task
</button>
</div>
</div>
<!-- Completed Column -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold">Completed</h3>
<span class="text-xs px-2 py-1 bg-gray-700 rounded-full">8 tasks</span>
</div>
<div class="space-y-3">
<div class="bg-gray-700 p-3 rounded-lg border-l-4 border-green-500 opacity-70">
<div class="flex justify-between items-start mb-2">
<h4 class="font-medium">Social media campaign</h4>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-white"><i class="fas fa-edit text-xs"></i></button>
<button class="text-gray-400 hover:text-white"><i class="fas fa-trash text-xs"></i></button>
</div>
</div>
<p class="text-xs text-gray-400 mb-2">Launch summer promotion across all platforms</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Marketing</span>
<span class="text-xs text-green-400">Completed</span>
</div>
</div>
<div class="bg-gray-700 p-3 rounded-lg border-l-4 border-green-500 opacity-70">
<div class="flex justify-between items-start mb-2">
<h4 class="font-medium">Bug fixes</h4>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-white"><i class="fas fa-edit text-xs"></i></button>
<button class="text-gray-400 hover:text-white"><i class="fas fa-trash text-xs"></i></button>
</div>
</div>
<p class="text-xs text-gray-400 mb-2">Resolve reported issues from user feedback</p>
<div class="flex justify-between items-center">
<span class="text-xs px-2 py-1 bg-gray-800 rounded-full">Development</span>
<span class="text-xs text-green-400">Completed</span>
</div>
</div>
<button class="w-full text-gray-400 hover:text-gray-300 text-sm flex items-center justify-center py-2 border border-dashed border-gray-600 rounded-lg">
<i class="fas fa-plus mr-1"></i> Add Task
</button>
</div>
</div>
</div>
</div>
<!-- Affiliates Tab Content -->
<div id="affiliates" class="tab-content hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Affiliate Program</h2>
<button onclick="openAffiliateModal()" class="bg-accent hover:bg-yellow-500 text-primary-dark font-bold py-2 px-4 rounded flex items-center">
<i class="fas fa-plus mr-2"></i> Add Affiliate
</button>
</div>
<!-- Affiliate Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Total Affiliates</p>
<p class="text-xl font-bold">42</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-blue-500 text-blue-400">
<i class="fas fa-handshake text-xl"></i>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Active This Month</p>
<p class="text-xl font-bold">18</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-green-500 text-green-400">
<i class="fas fa-chart-line text-xl"></i>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Total Revenue</p>
<p class="text-xl font-bold">$12,450</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-purple-500 text-purple-400">
<i class="fas fa-dollar-sign text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Affiliates Table -->
<div class="bg-primary-light rounded-lg border border-gray-700 overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-gray-800">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Affiliate</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Referrals</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Conversions</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Earnings</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-primary-light divide-y divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
<div>
<div class="font-medium">Sarah Johnson</div>
<div class="text-sm text-gray-400">sarah@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">156</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">42 (27%)</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium">$2,450</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-500 bg-opacity-20 text-green-400">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-accent hover:text-yellow-500 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-blue-400 hover:text-blue-300 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/54.jpg" alt="">
<div>
<div class="font-medium">Michael Chen</div>
<div class="text-sm text-gray-400">michael@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">98</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">23 (23%)</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium">$1,320</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-500 bg-opacity-20 text-green-400">Active</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-accent hover:text-yellow-500 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-blue-400 hover:text-blue-300 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<div>
<div class="font-medium">Emily Rodriguez</div>
<div class="text-sm text-gray-400">emily@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">76</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">15 (20%)</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium">$890</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-yellow-500 bg-opacity-20 text-yellow-400">Pending</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-accent hover:text-yellow-500 mr-3"><i class="fas fa-edit"></i></button>
<button class="text-blue-400 hover:text-blue-300 mr-3"><i class="fas fa-eye"></i></button>
<button class="text-red-400 hover:text-red-300"><i class="fas fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 flex items-center justify-between border-t border-gray-700">
<div class="text-sm text-gray-400">Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">42</span> affiliates</div>
<div class="flex space-x-2">
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">Previous</button>
<button class="px-3 py-1 rounded-md bg-accent text-primary-dark font-medium">1</button>
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">2</button>
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">3</button>
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600">Next</button>
</div>
</div>
</div>
</div>
<!-- Referrals Tab Content -->
<div id="referrals" class="tab-content hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Referral Program</h2>
<button onclick="openReferralModal()" class="bg-accent hover:bg-yellow-500 text-primary-dark font-bold py-2 px-4 rounded flex items-center">
<i class="fas fa-cog mr-2"></i> Program Settings
</button>
</div>
<!-- Referral Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Total Referrals</p>
<p class="text-xl font-bold">328</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-blue-500 text-blue-400">
<i class="fas fa-user-plus text-xl"></i>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Active Users</p>
<p class="text-xl font-bold">142</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-green-500 text-green-400">
<i class="fas fa-users text-xl"></i>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Conversion Rate</p>
<p class="text-xl font-bold">43.3%</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-purple-500 text-purple-400">
<i class="fas fa-percentage text-xl"></i>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Avg. Value</p>
<p class="text-xl font-bold">$48.75</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-yellow-500 text-accent">
<i class="fas fa-dollar-sign text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Referral Program Details -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-primary-light rounded-lg p-4 border border-gray-700 md:col-span-2">
<h3 class="font-semibold mb-4">Program Overview</h3>
<div class="space-y-4">
<div>
<h4 class="text-sm font-medium text-gray-300 mb-1">Referral Link</h4>
<div class="flex">
<input type="text" class="flex-1 bg-gray-700 border border-gray-600 rounded-l-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-accent" value="https://teamflow.com/ref/johndoe" readonly>
<button class="bg-accent hover:bg-yellow-500 text-primary-dark font-bold px-3 rounded-r-md">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-300 mb-1">Reward Structure</h4>
<div class="bg-gray-700 rounded-md p-3">
<div class="flex justify-between items-center mb-2">
<span class="text-sm">Referrer Bonus</span>
<span class="font-medium text-accent">$25</span>
</div>
<div class="flex justify-between items-center">
<span class="text-sm">Referred User Bonus</span>
<span class="font-medium text-accent">$10</span>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-300 mb-1">Program Terms</h4>
<div class="bg-gray-700 rounded-md p-3 text-sm">
<p class="mb-2">• Referrals must make a minimum purchase of $50 to qualify</p>
<p class="mb-2">• Bonus is paid after 30 days of activity</p>
<p>• Maximum of 10 referrals per month</p>
</div>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<h3 class="font-semibold mb-4">Top Referrers</h3>
<div class="space-y-3">
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
<span class="text-sm">Sarah Johnson</span>
</div>
<span class="text-xs px-2 py-1 bg-yellow-500 bg-opacity-20 text-accent rounded">28</span>
</div>
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<span class="text-sm">Michael Chen</span>
</div>
<span class="text-xs px-2 py-1 bg-yellow-500 bg-opacity-20 text-accent rounded">19</span>
</div>
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<span class="text-sm">Emily Rodriguez</span>
</div>
<span class="text-xs px-2 py-1 bg-yellow-500 bg-opacity-20 text-accent rounded">15</span>
</div>
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
<span class="text-sm">David Wilson</span>
</div>
<span class="text-xs px-2 py-1 bg-yellow-500 bg-opacity-20 text-accent rounded">12</span>
</div>
<div class="flex items-center justify-between p-2 bg-gray-700 rounded">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
<span class="text-sm">Jessica Lee</span>
</div>
<span class="text-xs px-2 py-1 bg-yellow-500 bg-opacity-20 text-accent rounded">10</span>
</div>
</div>
</div>
</div>
<!-- Recent Referrals -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">Recent Referrals</h3>
<button class="text-accent hover:text-yellow-500 text-sm">View All</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-gray-800">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Referrer</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Referred User</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Value</th>
</tr>
</thead>
<tbody class="bg-primary-light divide-y divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
<span>Sarah Johnson</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/42.jpg" alt="">
<span>Robert Taylor</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">Today, 10:42 AM</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-500 bg-opacity-20 text-green-400">Completed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-accent">$35</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<span>Michael Chen</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/24.jpg" alt="">
<span>Amanda Smith</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">Yesterday, 3:15 PM</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-yellow-500 bg-opacity-20 text-yellow-400">Pending</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-accent">$35</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<span>Emily Rodriguez</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/65.jpg" alt="">
<span>James Wilson</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm">Yesterday, 11:20 AM</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-500 bg-opacity-20 text-green-400">Completed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-accent">$35</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Payouts Tab Content -->
<div id="payouts" class="tab-content hidden">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Payout Management</h2>
<button onclick="openPayoutModal()" class="bg-accent hover:bg-yellow-500 text-primary-dark font-bold py-2 px-4 rounded flex items-center">
<i class="fas fa-plus mr-2"></i> New Payout
</button>
</div>
<!-- Payout Stats -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Total Payouts</p>
<p class="text-xl font-bold">$24,850</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-green-500 text-green-400">
<i class="fas fa-money-bill-wave text-xl"></i>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Pending Payouts</p>
<p class="text-xl font-bold">$3,250</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-yellow-500 text-accent">
<i class="fas fa-clock text-xl"></i>
</div>
</div>
</div>
<div class="bg-primary-light rounded-lg p-4 border border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">Next Payout Date</p>
<p class="text-xl font-bold">Jul 15, 2023</p>
</div>
<div class="p-3 rounded-full bg-opacity-20 bg-blue-500 text-blue-400">
<i class="fas fa-calendar-alt text-xl"></i>
</div>
</div>
</div>
</div>
<!-- Payout Methods -->
<div class="bg-primary-light rounded-lg p-4 border border-gray-700 mb-6">
<h3 class="font-semibold mb-4">Payout Methods</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
<div class="flex items-center mb-3">
<i class="fab fa-paypal text-2xl text-blue-400 mr-2"></i>
<span class="font-medium">PayPal</span>
</div>
<p class="text-sm text-gray-400 mb-3">Connected to john.doe@example.com</p>
<button class="text-sm text-accent hover:text-yellow-500">Edit</button>
</div>
<div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
<div class="flex items-center mb-3">
<i class="fas fa-university text-2xl text-green-400 mr-2"></i>
<span class="font-medium">Bank Transfer</span>
</div>
<p class="text-sm text-gray-400 mb-3">**** **** **** 1234</p>
<button class="text-sm text-accent hover:text-yellow-500">Edit</button>
</div>
<div class="bg-gray-700 rounded-lg p-4 border border-gray-600 flex items-center justify-center">
<button class="text-accent hover:text-yellow-500 flex items-center">
<i class="fas fa-plus mr-1"></i> Add Method
</button>
</div>
</div>
</div>
<!-- Payout History -->
<div class="bg-primary-light rounded-lg border border-gray-700 overflow-hidden">
<div class="flex justify-between items-center px-6 py-4 border-b border-gray-700">
<h3 class="text-lg font-semibold">Payout History</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-300 hover:bg-gray-600 text-sm">Export</button>
<button class="px-3 py-1 rounded-md bg-gray-700 text-gray-
</html>