|
|
<!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> |
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #1E293B; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #FBBF24; |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #D97706; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); } |
|
|
to { transform: translateX(0); } |
|
|
} |
|
|
|
|
|
.notification { |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
|
|
|
.tab-content { |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-primary-dark text-white min-h-screen"> |
|
|
|
|
|
<div id="notification-container" class="fixed top-4 right-4 z-50 space-y-2"></div> |
|
|
|
|
|
|
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="hidden md:flex md:flex-shrink-0"> |
|
|
<div class="flex flex-col w-64 bg-primary-light border-r border-gray-700"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
<nav class="px-2 space-y-1"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<div class="flex items-center justify-between h-16 px-4 border-b border-gray-700 bg-primary-light"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="p-4"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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">[email protected]</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">[email protected]</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">[email protected]</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 [email protected]</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> |
|
|
|
|
|
|
|
|
<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> |
