|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NeonCRM - Modern CRM Solution</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .nav-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .user-info { |
|
|
display: none; |
|
|
} |
|
|
.content { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.content.expanded { |
|
|
margin-left: 70px; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.deal-progress { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.deal-progress-bar { |
|
|
height: 100%; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.notification-badge { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
right: -5px; |
|
|
font-size: 10px; |
|
|
min-width: 18px; |
|
|
height: 18px; |
|
|
} |
|
|
.active-nav-item { |
|
|
background-color: rgba(99, 102, 241, 0.1); |
|
|
border-left: 3px solid #6366f1; |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 2px solid #6366f1; |
|
|
color: #6366f1; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
} |
|
|
.contact-avatar { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
color: white; |
|
|
} |
|
|
.deal-stage { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
margin-right: 5px; |
|
|
} |
|
|
.task-checkbox:checked + .task-label { |
|
|
text-decoration: line-through; |
|
|
color: #9ca3af; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div id="sidebar" class="sidebar bg-white shadow-lg w-64 h-full fixed flex flex-col"> |
|
|
<div class="p-4 flex items-center"> |
|
|
<div class="bg-indigo-600 text-white p-2 rounded-lg"> |
|
|
<i class="fas fa-bolt text-xl"></i> |
|
|
</div> |
|
|
<span class="logo-text ml-3 text-xl font-bold text-gray-800">NeonCRM</span> |
|
|
</div> |
|
|
|
|
|
<div class="user-info px-4 py-3 border-b border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full" alt="User"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Sarah Johnson</p> |
|
|
<p class="text-xs text-gray-500">Admin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="flex-1 overflow-y-auto py-4"> |
|
|
<div class="px-2 space-y-1"> |
|
|
<a href="#" id="dashboard-nav" class="active-nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-tachometer-alt text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Dashboard</span> |
|
|
</a> |
|
|
<a href="#" id="contacts-nav" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-users text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Contacts</span> |
|
|
</a> |
|
|
<a href="#" id="companies-nav" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-building text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Companies</span> |
|
|
</a> |
|
|
<a href="#" id="deals-nav" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-handshake text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Deals</span> |
|
|
<span class="ml-auto inline-block px-2 py-0.5 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800">5</span> |
|
|
</a> |
|
|
<a href="#" id="tasks-nav" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-tasks text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Tasks</span> |
|
|
</a> |
|
|
<a href="#" id="reports-nav" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-chart-bar text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Reports</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="px-2 mt-8"> |
|
|
<p class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Settings</p> |
|
|
<div class="mt-2 space-y-1"> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-cog text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Settings</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group"> |
|
|
<i class="fas fa-question-circle text-gray-500 group-hover:text-indigo-600 mr-3"></i> |
|
|
<span class="nav-text">Help</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="p-4 border-t border-gray-200"> |
|
|
<button id="toggle-sidebar" class="w-full flex items-center justify-center text-gray-500 hover:text-indigo-600"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
<span class="nav-text ml-2">Collapse</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="content" class="content flex-1 flex flex-col overflow-hidden ml-64"> |
|
|
|
|
|
<header class="bg-white shadow-sm z-10"> |
|
|
<div class="px-6 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<h1 class="text-lg font-semibold text-gray-900" id="page-title">Dashboard</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<button id="notifications-btn" class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none relative"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="notification-badge bg-red-500 text-white rounded-full flex items-center justify-center">3</span> |
|
|
</button> |
|
|
<div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-50"> |
|
|
<div class="px-4 py-2 border-b border-gray-200"> |
|
|
<p class="text-sm font-medium text-gray-900">Notifications</p> |
|
|
</div> |
|
|
<div class="max-h-60 overflow-y-auto"> |
|
|
<a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-handshake text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">New deal added</p> |
|
|
<p class="text-xs text-gray-500">Acme Corp - $12,000</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
|
|
<i class="fas fa-tasks text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">Task overdue</p> |
|
|
<p class="text-xs text-gray-500">Follow up with client</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full"> |
|
|
<i class="fas fa-users text-green-600"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="font-medium">New contact added</p> |
|
|
<p class="text-xs text-gray-500">John Smith from TechCorp</p> |
|
|
</div> |
|
|
</div> |
|
|
</a> |
|
|
</div> |
|
|
<div class="px-4 py-2 border-t border-gray-200"> |
|
|
<a href="#" class="text-xs font-medium text-indigo-600 hover:text-indigo-900">View all notifications</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<button id="user-menu-btn" class="flex items-center text-sm focus:outline-none"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-8 h-8 rounded-full" alt="User"> |
|
|
<span class="ml-2 text-gray-700 text-sm font-medium hidden md:inline-block">Sarah J.</span> |
|
|
</button> |
|
|
<div id="user-menu-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div id="dashboard-screen" class="screen"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Welcome back, Sarah!</h2> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add New |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total Contacts</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">248</p> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-users text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-xs text-gray-500 flex items-center"> |
|
|
<span class="text-green-500 mr-1"><i class="fas fa-arrow-up"></i> 12%</span> |
|
|
vs last month |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Active Deals</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">18</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-handshake text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-xs text-gray-500 flex items-center"> |
|
|
<span class="text-green-500 mr-1"><i class="fas fa-arrow-up"></i> 5%</span> |
|
|
vs last month |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Deal Value</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">$124,500</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-dollar-sign text-green-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-xs text-gray-500 flex items-center"> |
|
|
<span class="text-red-500 mr-1"><i class="fas fa-arrow-down"></i> 8%</span> |
|
|
vs last month |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Tasks Due</p> |
|
|
<p class="text-2xl font-bold text-gray-800 mt-1">7</p> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-lg"> |
|
|
<i class="fas fa-tasks text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-xs text-gray-500 flex items-center"> |
|
|
<span class="text-green-500 mr-1"><i class="fas fa-arrow-up"></i> 3%</span> |
|
|
vs last month |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm lg:col-span-2"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Deal Pipeline</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded">Week</button> |
|
|
<button class="px-3 py-1 text-xs bg-indigo-600 text-white rounded">Month</button> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded">Year</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="dealChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Recent Activities</h3> |
|
|
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full"> |
|
|
<i class="fas fa-handshake text-indigo-600 text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">New deal added</p> |
|
|
<p class="text-xs text-gray-500">Acme Corp - $12,000</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> |
|
|
<i class="fas fa-tasks text-blue-600 text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Task completed</p> |
|
|
<p class="text-xs text-gray-500">Follow up with client</p> |
|
|
<p class="text-xs text-gray-400 mt-1">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-green-100 p-2 rounded-full"> |
|
|
<i class="fas fa-users text-green-600 text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">New contact added</p> |
|
|
<p class="text-xs text-gray-500">John Smith from TechCorp</p> |
|
|
<p class="text-xs text-gray-400 mt-1">1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-100 p-2 rounded-full"> |
|
|
<i class="fas fa-file-alt text-purple-600 text-sm"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">New document uploaded</p> |
|
|
<p class="text-xs text-gray-500">Contract_AcmeCorp.pdf</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Upcoming Tasks</h3> |
|
|
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Follow up with Acme Corp</p> |
|
|
<p class="text-xs text-gray-500">Due tomorrow</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Deal</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Prepare quarterly report</p> |
|
|
<p class="text-xs text-gray-500">Due in 2 days</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Report</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Call potential client</p> |
|
|
<p class="text-xs text-gray-500">Due in 3 days</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Contact</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Top Deals</h3> |
|
|
<a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<p class="text-sm font-medium text-gray-800">Acme Corporation</p> |
|
|
<p class="text-sm font-bold text-indigo-600">$24,000</p> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<div class="deal-progress bg-gray-200 w-full"> |
|
|
<div class="deal-progress-bar bg-indigo-600" style="width: 75%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>75% complete</span> |
|
|
<span>Expected close: May 15</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<p class="text-sm font-medium text-gray-800">TechStart Inc.</p> |
|
|
<p class="text-sm font-bold text-indigo-600">$18,500</p> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<div class="deal-progress bg-gray-200 w-full"> |
|
|
<div class="deal-progress-bar bg-indigo-600" style="width: 50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>50% complete</span> |
|
|
<span>Expected close: June 1</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-3 bg-gray-50 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<p class="text-sm font-medium text-gray-800">Global Solutions</p> |
|
|
<p class="text-sm font-bold text-indigo-600">$32,000</p> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<div class="deal-progress bg-gray-200 w-full"> |
|
|
<div class="deal-progress-bar bg-indigo-600" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span>30% complete</span> |
|
|
<span>Expected close: June 15</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="contacts-screen" class="screen hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Contacts</h2> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Contact |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6"> |
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<div class="relative w-64"> |
|
|
<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 type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Search contacts..."> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"> |
|
|
<i class="fas fa-filter mr-2 text-gray-500"></i> |
|
|
<span>Filter</span> |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"> |
|
|
<i class="fas fa-sort mr-2 text-gray-500"></i> |
|
|
<span>Sort</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Contact</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="contact-avatar bg-indigo-600 rounded-full mr-3">JD</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium text-gray-900">John Doe</div> |
|
|
<div class="text-sm text-gray-500">Sales Manager</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Acme Corporation</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">[email protected]</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">(555) 123-4567</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">2 days ago</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-900"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="contact-avatar bg-green-600 rounded-full mr-3">SM</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium text-gray-900">Sarah Miller</div> |
|
|
<div class="text-sm text-gray-500">Marketing Director</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">TechStart Inc.</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">[email protected]</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">(555) 987-6543</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">1 week ago</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-900"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="contact-avatar bg-purple-600 rounded-full mr-3">RJ</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium text-gray-900">Robert Johnson</div> |
|
|
<div class="text-sm text-gray-500">CTO</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Global Solutions</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">[email protected]</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">(555) 456-7890</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">3 days ago</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-900"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="contact-avatar bg-yellow-600 rounded-full mr-3">EW</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium text-gray-900">Emily Wilson</div> |
|
|
<div class="text-sm text-gray-500">Product Manager</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Innovate Co.</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">[email protected]</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">(555) 789-0123</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">1 day ago</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-900"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="contact-avatar bg-red-600 rounded-full mr-3">MB</div> |
|
|
<div> |
|
|
<div class="text-sm font-medium text-gray-900">Michael Brown</div> |
|
|
<div class="text-sm text-gray-500">CEO</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">NextGen Tech</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">[email protected]</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">(555) 234-5678</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">5 days ago</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-900"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Previous |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
1 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
2 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
3 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Next |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="companies-screen" class="screen hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Companies</h2> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Company |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-indigo-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-building text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Acme Corporation</h3> |
|
|
<p class="text-sm text-gray-500">Technology</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-users mr-2 text-gray-400"></i> |
|
|
<span>24 contacts</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-handshake mr-2 text-gray-400"></i> |
|
|
<span>5 active deals</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-dollar-sign mr-2 text-gray-400"></i> |
|
|
<span>$124,500 pipeline</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
View |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium"> |
|
|
Edit |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-building text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">TechStart Inc.</h3> |
|
|
<p class="text-sm text-gray-500">Software</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-users mr-2 text-gray-400"></i> |
|
|
<span>18 contacts</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-handshake mr-2 text-gray-400"></i> |
|
|
<span>3 active deals</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-dollar-sign mr-2 text-gray-400"></i> |
|
|
<span>$87,000 pipeline</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
View |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium"> |
|
|
Edit |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-building text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Global Solutions</h3> |
|
|
<p class="text-sm text-gray-500">Consulting</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-users mr-2 text-gray-400"></i> |
|
|
<span>32 contacts</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-handshake mr-2 text-gray-400"></i> |
|
|
<span>7 active deals</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-dollar-sign mr-2 text-gray-400"></i> |
|
|
<span>$210,000 pipeline</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
View |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium"> |
|
|
Edit |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-building text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">Innovate Co.</h3> |
|
|
<p class="text-sm text-gray-500">Design</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-users mr-2 text-gray-400"></i> |
|
|
<span>12 contacts</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-handshake mr-2 text-gray-400"></i> |
|
|
<span>2 active deals</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-dollar-sign mr-2 text-gray-400"></i> |
|
|
<span>$45,000 pipeline</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
View |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium"> |
|
|
Edit |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-yellow-100 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-building text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-gray-800">NextGen Tech</h3> |
|
|
<p class="text-sm text-gray-500">AI</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-users mr-2 text-gray-400"></i> |
|
|
<span>8 contacts</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-handshake mr-2 text-gray-400"></i> |
|
|
<span>1 active deal</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-600"> |
|
|
<i class="fas fa-dollar-sign mr-2 text-gray-400"></i> |
|
|
<span>$32,000 pipeline</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium"> |
|
|
View |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium"> |
|
|
Edit |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300"> |
|
|
<div class="p-6 flex flex-col items-center justify-center h-full"> |
|
|
<div class="bg-gray-100 p-4 rounded-full mb-3"> |
|
|
<i class="fas fa-plus text-gray-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-1">Add New Company</h3> |
|
|
<p class="text-sm text-gray-500 text-center">Click here to add a new company to your CRM</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="deals-screen" class="screen hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Deals</h2> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Deal |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6"> |
|
|
<div class="border-b border-gray-200"> |
|
|
<nav class="flex -mb-px"> |
|
|
<button class="tab-active py-4 px-6 text-sm font-medium text-center border-b-2 border-indigo-500"> |
|
|
All Deals |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
My Deals |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
Hot |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
Won |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
Lost |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<div class="relative w-64"> |
|
|
<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 type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Search deals..."> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"> |
|
|
<i class="fas fa-filter mr-2 text-gray-500"></i> |
|
|
<span>Filter</span> |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"> |
|
|
<i class="fas fa-sort mr-2 text-gray-500"></i> |
|
|
<span>Sort</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deal Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stage</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expected Close</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Owner</th> |
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">Enterprise Software</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Acme Corporation</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-bold text-gray-900">$24,000</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<span class="deal-stage bg-indigo-500"></span> |
|
|
<span class="text-sm text-gray-900">Proposal</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">May 15, 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-6 h-6 rounded-full mr-2" alt="User"> |
|
|
<span class="text-sm text-gray-900">Sarah J.</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">Marketing Services</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">TechStart Inc.</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-bold text-gray-900">$18,500</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<span class="deal-stage bg-blue-500"></span> |
|
|
<span class="text-sm text-gray-900">Negotiation</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">June 1, 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-6 h-6 rounded-full mr-2" alt="User"> |
|
|
<span class="text-sm text-gray-900">Mike T.</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">Consulting Project</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Global Solutions</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-bold text-gray-900">$32,000</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<span class="deal-stage bg-green-500"></span> |
|
|
<span class="text-sm text-gray-900">Discovery</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">June 15, 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-6 h-6 rounded-full mr-2" alt="User"> |
|
|
<span class="text-sm text-gray-900">Lisa M.</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">Website Redesign</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Innovate Co.</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-bold text-gray-900">$12,500</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<span class="deal-stage bg-yellow-500"></span> |
|
|
<span class="text-sm text-gray-900">Qualification</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">May 30, 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-6 h-6 rounded-full mr-2" alt="User"> |
|
|
<span class="text-sm text-gray-900">David K.</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium text-gray-900">AI Implementation</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">NextGen Tech</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-bold text-gray-900">$37,500</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<span class="deal-stage bg-purple-500"></span> |
|
|
<span class="text-sm text-gray-900">Closed Won</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">May 5, 2023</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-6 h-6 rounded-full mr-2" alt="User"> |
|
|
<span class="text-sm text-gray-900">Sarah J.</span> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<div class="flex justify-end space-x-2"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
</div> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">18</span> results |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Previous |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
1 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
2 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
3 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Next |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tasks-screen" class="screen hidden"> |
|
|
<div class="mb-6 flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Tasks</h2> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Task |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6"> |
|
|
<div class="border-b border-gray-200"> |
|
|
<nav class="flex -mb-px"> |
|
|
<button class="tab-active py-4 px-6 text-sm font-medium text-center border-b-2 border-indigo-500"> |
|
|
All Tasks |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
Today |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
Upcoming |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
Overdue |
|
|
</button> |
|
|
<button class="py-4 px-6 text-sm font-medium text-center text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300"> |
|
|
Completed |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<div class="relative w-64"> |
|
|
<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 type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Search tasks..."> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"> |
|
|
<i class="fas fa-filter mr-2 text-gray-500"></i> |
|
|
<span>Filter</span> |
|
|
</button> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"> |
|
|
<i class="fas fa-sort mr-2 text-gray-500"></i> |
|
|
<span>Sort</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="task-checkbox rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
<label class="task-label ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Follow up with Acme Corp about proposal</p> |
|
|
<p class="text-xs text-gray-500">Due tomorrow</p> |
|
|
</label> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Deal</span> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-6 h-6 rounded-full" alt="User"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="task-checkbox rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
<label class="task-label ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Prepare quarterly sales report</p> |
|
|
<p class="text-xs text-gray-500">Due in 2 days</p> |
|
|
</label> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Report</span> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-6 h-6 rounded-full" alt="User"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 hover:bg-gray-50"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" class="task-checkbox rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
<label class="task-label ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">Schedule meeting with TechStart team</p> |
|
|
<p class="text-xs text-gray-500">Due today</p> |
|
|
</label> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Meeting</span> |
|
|
<img src="https://random |
|
|
</html> |
