|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Sales CRM | Lead Management System</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 .nav-item { |
|
|
justify-content: center; |
|
|
} |
|
|
.lead-stage-new { background-color: #E3F2FD; border-left: 4px solid #2196F3; } |
|
|
.lead-stage-contact { background-color: #E8F5E9; border-left: 4px solid #4CAF50; } |
|
|
.lead-stage-qualified { background-color: #FFF8E1; border-left: 4px solid #FFC107; } |
|
|
.lead-stage-proposal { background-color: #F3E5F5; border-left: 4px solid #9C27B0; } |
|
|
.lead-stage-negotiation { background-color: #E0F7FA; border-left: 4px solid #00BCD4; } |
|
|
.lead-stage-closed { background-color: #EFEBE9; border-left: 4px solid #795548; } |
|
|
.lead-stage-lost { background-color: #FFEBEE; border-left: 4px solid #F44336; } |
|
|
|
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); } |
|
|
to { transform: translateX(0); } |
|
|
} |
|
|
.notification { |
|
|
animation: slideIn 0.3s ease-out; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 4px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex flex-col"> |
|
|
<div class="p-4 flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-white flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line text-indigo-800 text-xl"></i> |
|
|
</div> |
|
|
<span class="logo-text ml-3 text-xl font-bold">SalesPro CRM</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
<nav class="mt-6"> |
|
|
<div class="px-4 py-2 text-xs uppercase font-semibold text-indigo-300">Navigation</div> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white bg-indigo-900"> |
|
|
<i class="fas fa-tachometer-alt"></i> |
|
|
<span class="nav-text ml-3">Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-users"></i> |
|
|
<span class="nav-text ml-3">Leads</span> |
|
|
<span class="ml-auto bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">15</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-calendar"></i> |
|
|
<span class="nav-text ml-3">Calendar</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<span class="nav-text ml-3">Email Templates</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-chart-bar"></i> |
|
|
<span class="nav-text ml-3">Reports</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span class="nav-text ml-3">Settings</span> |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="px-4 py-2 mt-6 text-xs uppercase font-semibold text-indigo-300">Automation</div> |
|
|
<nav> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<span class="nav-text ml-3">Workflows</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="nav-text ml-3">Notifications</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700"> |
|
|
<i class="fas fa-tasks"></i> |
|
|
<span class="nav-text ml-3">Tasks</span> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-indigo-700"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium">John Doe</div> |
|
|
<div class="text-xs text-indigo-300">Sales Manager</div> |
|
|
</div> |
|
|
<button class="ml-auto text-indigo-300 hover:text-white"> |
|
|
<i class="fas fa-sign-out-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="flex items-center justify-between px-6 py-3"> |
|
|
<div class="flex items-center"> |
|
|
<button id="sidebarToggle" class="text-gray-500 hover:text-gray-700 mr-4"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Lead Management</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
<span>Add Lead</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex overflow-x-auto border-b"> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600">All Leads</a> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">New</a> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Contacted</a> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Qualified</a> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Proposal</a> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Negotiation</a> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Closed Won</a> |
|
|
<a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Closed Lost</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6"> |
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>All Sources</option> |
|
|
<option>Website</option> |
|
|
<option>Referral</option> |
|
|
<option>Social Media</option> |
|
|
<option>Email Campaign</option> |
|
|
</select> |
|
|
<i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 pointer-events-none"></i> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>All Owners</option> |
|
|
<option>John Doe</option> |
|
|
<option>Jane Smith</option> |
|
|
<option>Mike Johnson</option> |
|
|
</select> |
|
|
<i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 pointer-events-none"></i> |
|
|
</div> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-filter"></i> |
|
|
<span class="ml-1">More Filters</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-download"></i> |
|
|
<span class="ml-1">Export</span> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-print"></i> |
|
|
<span class="ml-1">Print</span> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search leads..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<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"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</th> |
|
|
<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">Stage</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</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-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Action</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="leadsTableBody"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white px-6 py-3 flex items-center justify-between border-t border-gray-200"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">47</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Previous</span> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a> |
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
|
|
<span class="sr-only">Next</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="leadModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
|
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">Lead Details</h3> |
|
|
<button type="button" class="closeModal text-gray-400 hover:text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="col-span-2"> |
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
|
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Contact Information</h3> |
|
|
</div> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> |
|
|
<div class="sm:col-span-3"> |
|
|
<label for="first-name" class="block text-sm font-medium text-gray-700">First name</label> |
|
|
<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="Sarah"> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-3"> |
|
|
<label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label> |
|
|
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="Johnson"> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-4"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email address</label> |
|
|
<input type="text" name="email" id="email" autocomplete="email" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="[email protected]"> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-2"> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700">Phone</label> |
|
|
<input type="text" name="phone" id="phone" autocomplete="tel" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="(555) 123-4567"> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-3"> |
|
|
<label for="company" class="block text-sm font-medium text-gray-700">Company</label> |
|
|
<input type="text" name="company" id="company" autocomplete="organization" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="Tech Solutions Inc."> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-3"> |
|
|
<label for="job-title" class="block text-sm font-medium text-gray-700">Job title</label> |
|
|
<input type="text" name="job-title" id="job-title" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="Director of IT"> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-6"> |
|
|
<label for="lead-source" class="block text-sm font-medium text-gray-700">Lead Source</label> |
|
|
<select id="lead-source" name="lead-source" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>Website</option> |
|
|
<option>Referral</option> |
|
|
<option selected>Email Campaign</option> |
|
|
<option>Social Media</option> |
|
|
<option>Trade Show</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow mt-6 overflow-hidden sm:rounded-lg"> |
|
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Opportunity Details</h3> |
|
|
</div> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6"> |
|
|
<div class="sm:col-span-3"> |
|
|
<label for="lead-stage" class="block text-sm font-medium text-gray-700">Lead Stage</label> |
|
|
<select id="lead-stage" name="lead-stage" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>New</option> |
|
|
<option>Contacted</option> |
|
|
<option selected>Qualified</option> |
|
|
<option>Proposal</option> |
|
|
<option>Negotiation</option> |
|
|
<option>Closed Won</option> |
|
|
<option>Closed Lost</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-3"> |
|
|
<label for="lead-owner" class="block text-sm font-medium text-gray-700">Lead Owner</label> |
|
|
<select id="lead-owner" name="lead-owner" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>John Doe</option> |
|
|
<option selected>Jane Smith</option> |
|
|
<option>Mike Johnson</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-3"> |
|
|
<label for="lead-value" class="block text-sm font-medium text-gray-700">Opportunity Value</label> |
|
|
<div class="mt-1 relative rounded-md shadow-sm"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<span class="text-gray-500 sm:text-sm">$</span> |
|
|
</div> |
|
|
<input type="text" name="lead-value" id="lead-value" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00" value="12,500"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center"> |
|
|
<select id="currency" name="currency" class="focus:ring-indigo-500 focus:border-indigo-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"> |
|
|
<option>USD</option> |
|
|
<option>EUR</option> |
|
|
<option>GBP</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-3"> |
|
|
<label for="probability" class="block text-sm font-medium text-gray-700">Probability (%)</label> |
|
|
<input type="text" name="probability" id="probability" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="60"> |
|
|
</div> |
|
|
|
|
|
<div class="sm:col-span-6"> |
|
|
<label for="description" class="block text-sm font-medium text-gray-700">Opportunity Description</label> |
|
|
<textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md">Looking for a complete CRM solution for their sales team of 25 people. Interested in automation features and reporting capabilities.</textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="col-span-1"> |
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg"> |
|
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Activity Timeline</h3> |
|
|
</div> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flow-root"> |
|
|
<ul class="-mb-8"> |
|
|
<li> |
|
|
<div class="relative pb-8"> |
|
|
<span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span> |
|
|
<div class="relative flex space-x-3"> |
|
|
<div> |
|
|
<span class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white"> |
|
|
<i class="fas fa-phone text-white text-xs"></i> |
|
|
</span> |
|
|
</div> |
|
|
<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Called <span class="font-medium text-gray-900">Sarah Johnson</span></p> |
|
|
</div> |
|
|
<div class="text-right text-sm whitespace-nowrap text-gray-500"> |
|
|
<time datetime="2023-06-11">Today, 10:30 AM</time> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
<li> |
|
|
<div class="relative pb-8"> |
|
|
<span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span> |
|
|
<div class="relative flex space-x-3"> |
|
|
<div> |
|
|
<span class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white"> |
|
|
<i class="fas fa-envelope text-white text-xs"></i> |
|
|
</span> |
|
|
</div> |
|
|
<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Sent email <span class="font-medium text-gray-900">Product Information</span></p> |
|
|
</div> |
|
|
<div class="text-right text-sm whitespace-nowrap text-gray-500"> |
|
|
<time datetime="2023-06-10">Yesterday, 2:15 PM</time> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
<li> |
|
|
<div class="relative pb-8"> |
|
|
<span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span> |
|
|
<div class="relative flex space-x-3"> |
|
|
<div> |
|
|
<span class="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center ring-8 ring-white"> |
|
|
<i class="fas fa-calendar text-white text-xs"></i> |
|
|
</span> |
|
|
</div> |
|
|
<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Meeting scheduled with <span class="font-medium text-gray-900">Sarah Johnson</span></p> |
|
|
</div> |
|
|
<div class="text-right text-sm whitespace-nowrap text-gray-500"> |
|
|
<time datetime="2023-06-08">Mon, June 8</time> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
|
|
|
<li> |
|
|
<div class="relative pb-8"> |
|
|
<div class="relative flex space-x-3"> |
|
|
<div> |
|
|
<span class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center ring-8 ring-white"> |
|
|
<i class="fas fa-user-plus text-white text-xs"></i> |
|
|
</span> |
|
|
</div> |
|
|
<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Created lead for <span class="font-medium text-gray-900">Sarah Johnson</span></p> |
|
|
</div> |
|
|
<div class="text-right text-sm whitespace-nowrap text-gray-500"> |
|
|
<time datetime="2023-06-05">Fri, June 5</time> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Add Activity |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow mt-6 overflow-hidden sm:rounded-lg"> |
|
|
<div class="px-4 py-5 sm:px-6 border-b border-gray-200"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Quick Actions</h3> |
|
|
</div> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="space-y-4"> |
|
|
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-envelope mr-2"></i> |
|
|
Send Email |
|
|
</button> |
|
|
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> |
|
|
<i class="fas fa-phone mr-2"></i> |
|
|
Log Call |
|
|
</button> |
|
|
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
<i class="fas fa-calendar mr-2"></i> |
|
|
Schedule Meeting |
|
|
</button> |
|
|
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> |
|
|
<i class="fas fa-file-alt mr-2"></i> |
|
|
Create Proposal |
|
|
</button> |
|
|
<button type="button" class="w-full inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i class="fas fa-tasks mr-2"></i> |
|
|
Add Task |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Save Changes |
|
|
</button> |
|
|
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Cancel |
|
|
</button> |
|
|
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Delete Lead |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="emailModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
|
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Send Email to Sarah Johnson</h3> |
|
|
<button type="button" class="closeEmailModal text-gray-400 hover:text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="email-template" class="block text-sm font-medium text-gray-700">Template</label> |
|
|
<select id="email-template" name="email-template" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option>-- Select Template --</option> |
|
|
<option>Initial Contact</option> |
|
|
<option selected>Follow-Up</option> |
|
|
<option>Proposal</option> |
|
|
<option>Thank You</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email-subject" class="block text-sm font-medium text-gray-700">Subject</label> |
|
|
<input type="text" id="email-subject" name="email-subject" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" value="Follow-up on our conversation"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email-body" class="block text-sm font-medium text-gray-700">Message</label> |
|
|
<div class="mt-1"> |
|
|
<textarea id="email-body" name="email-body" rows="12" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md">Dear Sarah, |
|
|
|
|
|
Thank you for taking the time to speak with me yesterday about your CRM needs. As discussed, I've attached some additional information about our product that I think you'll find valuable. |
|
|
|
|
|
Our solution is specifically designed for mid-sized companies like Tech Solutions Inc., with features that address the challenges you mentioned: |
|
|
- Automated lead scoring and routing |
|
|
- Customizable reporting dashboards |
|
|
- Seamless integration with your existing email system |
|
|
|
|
|
I'd love to schedule a demo at your convenience to show you how these features work in practice. Would next Tuesday or Wednesday work for you? |
|
|
|
|
|
Looking forward to your thoughts. |
|
|
|
|
|
Best regards, |
|
|
Jane Smith |
|
|
Sales Representative |
|
|
SalesPro CRM</textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700">Attachments</label> |
|
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> |
|
|
<div class="space-y-1 text-center"> |
|
|
<div class="flex text-sm text-gray-600"> |
|
|
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"> |
|
|
<span>Upload a file</span> |
|
|
<input id="file-upload" name="file-upload" type="file" class="sr-only"> |
|
|
</label> |
|
|
<p class="pl-1">or drag and drop</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">PDF, DOCX up to 10MB</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Send Email |
|
|
</button> |
|
|
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Save Draft |
|
|
</button> |
|
|
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm closeEmailModal"> |
|
|
Cancel |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notificationToast" class="fixed bottom-4 right-4 hidden"> |
|
|
<div class="notification bg-white rounded-lg shadow-lg overflow-hidden w-80"> |
|
|
<div class="px-4 py-3 bg-indigo-600 text-white flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bell mr-2"></i> |
|
|
<span class="font-semibold">New Notification</span> |
|
|
</div> |
|
|
<button class="text-white hover:text-indigo-200 closeNotification"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-sm text-gray-700">New lead assigned to you: <span class="font-medium">Michael Brown</span> from <span class="font-medium">Acme Corp</span></p> |
|
|
<div class="mt-2 flex justify-end"> |
|
|
<button class="text-xs text-indigo-600 hover:text-indigo-800">View Lead</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const leads = [ |
|
|
{ |
|
|
id: 1, |
|
|
name: "Sarah Johnson", |
|
|
company: "Tech Solutions Inc.", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 123-4567", |
|
|
stage: "Qualified", |
|
|
value: "$12,500", |
|
|
lastContact: "Today, 10:30 AM", |
|
|
nextAction: "Send proposal", |
|
|
probability: "60%" |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
name: "Michael Brown", |
|
|
company: "Acme Corp", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 987-6543", |
|
|
stage: "New", |
|
|
value: "$8,200", |
|
|
lastContact: "Not contacted", |
|
|
nextAction: "Initial call", |
|
|
probability: "20%" |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
name: "Emily Davis", |
|
|
company: "Global Enterprises", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 456-7890", |
|
|
stage: "Contacted", |
|
|
value: "$15,000", |
|
|
lastContact: "Yesterday, 2:15 PM", |
|
|
nextAction: "Schedule demo", |
|
|
probability: "40%" |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
name: "Robert Wilson", |
|
|
company: "Wilson & Co", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 789-0123", |
|
|
stage: "Proposal", |
|
|
value: "$22,000", |
|
|
lastContact: "Mon, June 8", |
|
|
nextAction: "Follow-up call", |
|
|
probability: "75%" |
|
|
}, |
|
|
{ |
|
|
id: 5, |
|
|
name: "Jennifer Lee", |
|
|
company: "Innovate LLC", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 234-5678", |
|
|
stage: "Negotiation", |
|
|
value: "$18,500", |
|
|
lastContact: "Fri, June 5", |
|
|
nextAction: "Finalize contract", |
|
|
probability: "85%" |
|
|
}, |
|
|
{ |
|
|
id: 6, |
|
|
name: "David Kim", |
|
|
company: "Digital Solutions", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 345-6789", |
|
|
stage: "Closed Won", |
|
|
value: "$30,000", |
|
|
lastContact: "Wed, June 3", |
|
|
nextAction: "Onboarding", |
|
|
probability: "100%" |
|
|
}, |
|
|
{ |
|
|
id: 7, |
|
|
name: "Lisa Chen", |
|
|
company: "Future Tech", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 678-9012", |
|
|
stage: "Closed Lost", |
|
|
value: "$25,000", |
|
|
lastContact: "Tue, June 2", |
|
|
nextAction: "Post-mortem", |
|
|
probability: "0%" |
|
|
}, |
|
|
{ |
|
|
id: 8, |
|
|
name: "James Wilson", |
|
|
company: "Alpha Industries", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 901-2345", |
|
|
stage: "Qualified", |
|
|
value: "$14,000", |
|
|
lastContact: "Mon, June 1", |
|
|
nextAction: "Send case studies", |
|
|
probability: "65%" |
|
|
}, |
|
|
{ |
|
|
id: 9, |
|
|
name: "Amanda Taylor", |
|
|
company: "Summit Group", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 012-3456", |
|
|
stage: "New", |
|
|
value: "$9,500", |
|
|
lastContact: "Not contacted", |
|
|
nextAction: "Initial email", |
|
|
probability: "15%" |
|
|
}, |
|
|
{ |
|
|
id: 10, |
|
|
name: "Thomas Moore", |
|
|
company: "Peak Performance", |
|
|
email: "[email protected]", |
|
|
phone: "(555) 123-4567", |
|
|
stage: "Contacted", |
|
|
value: "$17,000", |
|
|
lastContact: "Fri, May 29", |
|
|
nextAction: "Answer questions", |
|
|
probability: "50%" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const leadsTableBody = document.getElementById('leadsTableBody'); |
|
|
|
|
|
leads.forEach(lead => { |
|
|
const row = document.createElement('tr'); |
|
|
row.className = `lead-stage-${lead.stage.toLowerCase().replace(' ', '-')}`; |
|
|
row.innerHTML = ` |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500"> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/${lead.id % 2 === 0 ? 'women' : 'men'}/${lead.id}.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">${lead.name}</div> |
|
|
<div class="text-sm text-gray-500">${lead.email}</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">${lead.company}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">${lead.email}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">${lead.phone}</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStageClass(lead.stage)}"> |
|
|
${lead.stage} |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"> |
|
|
${lead.value} |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
${lead.lastContact} |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
${lead.nextAction} |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3 view-lead" data-id="${lead.id}">View</button> |
|
|
<button class="text-green-600 hover:text-green-900 email-lead" data-id="${lead.id}">Email</button> |
|
|
</td> |
|
|
`; |
|
|
leadsTableBody.appendChild(row); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.view-lead').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const leadId = parseInt(this.getAttribute('data-id')); |
|
|
showLeadModal(leadId); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.email-lead').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const leadId = parseInt(this.getAttribute('data-id')); |
|
|
showEmailModal(leadId); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.closeModal').addEventListener('click', hideLeadModal); |
|
|
document.querySelector('.closeEmailModal').addEventListener('click', hideEmailModal); |
|
|
|
|
|
|
|
|
document.getElementById('sidebarToggle').addEventListener('click', toggleSidebar); |
|
|
|
|
|
|
|
|
setTimeout(showNotification, 3000); |
|
|
|
|
|
|
|
|
document.querySelector('.closeNotification').addEventListener('click', hideNotification); |
|
|
}); |
|
|
|
|
|
function getStageClass(stage) { |
|
|
switch(stage) { |
|
|
case 'New': return 'bg-blue-100 text-blue-800'; |
|
|
case 'Contacted': return 'bg-green-100 text-green-800'; |
|
|
case 'Qualified': return 'bg-yellow-100 text-yellow-800'; |
|
|
case 'Proposal': return 'bg-purple-100 text-purple-800'; |
|
|
case 'Negotiation': return 'bg-teal-100 text-teal-800'; |
|
|
case 'Closed Won': return 'bg-gray-100 text-gray-800'; |
|
|
case 'Closed Lost': return 'bg-red-100 text-red-800'; |
|
|
default: return 'bg-gray-100 text-gray-800'; |
|
|
} |
|
|
} |
|
|
|
|
|
function showLeadModal(leadId) { |
|
|
document.getElementById('leadModal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideLeadModal() { |
|
|
document.getElementById('leadModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function showEmailModal(leadId) { |
|
|
document.getElementById('emailModal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideEmailModal() { |
|
|
document.getElementById('emailModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function toggleSidebar() { |
|
|
document.querySelector('.sidebar').classList.toggle('collapsed'); |
|
|
} |
|
|
|
|
|
function showNotification() { |
|
|
document.getElementById('notificationToast').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideNotification() { |
|
|
document.getElementById('notificationToast').classList.add('hidden'); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=udayzee05/sales-crm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
