| | <!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">john.doe@acme.com</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">sarah.m@techstart.com</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">robert.j@global.com</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">emily.w@innovate.com</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">michael.b@nextgen.com</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> |
