Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bloom CRM & Project Management</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-item.active { | |
| background-color: #f3f4f6; | |
| border-left: 4px solid #6366f1; | |
| } | |
| .sidebar-item:hover:not(.active) { | |
| background-color: #f9fafb; | |
| } | |
| .kanban-column { | |
| min-height: 600px; | |
| } | |
| .kanban-card { | |
| transition: all 0.2s ease; | |
| } | |
| .kanban-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .pipeline-stage { | |
| transition: all 0.3s ease; | |
| } | |
| .pipeline-stage:hover { | |
| transform: scale(1.02); | |
| } | |
| .timeline-item:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| left: 16px; | |
| top: 30px; | |
| height: calc(100% - 30px); | |
| width: 2px; | |
| background-color: #e5e7eb; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #c7d2fe; | |
| border-radius: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #a5b4fc; | |
| } | |
| .deal-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| transition: width 0.6s ease; | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .modal-overlay { | |
| transition: opacity 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 border-r border-gray-200 bg-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-leaf text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-semibold text-gray-800">Bloom CRM</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('dashboard')"> | |
| <i class="fas fa-home text-gray-500 mr-3 w-5"></i> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="sidebar-item active flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('clients')"> | |
| <i class="fas fa-users text-gray-500 mr-3 w-5"></i> | |
| <span>Clients</span> | |
| </div> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('pipeline')"> | |
| <i class="fas fa-funnel-dollar text-gray-500 mr-3 w-5"></i> | |
| <span>Sales Pipeline</span> | |
| </div> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('projects')"> | |
| <i class="fas fa-project-diagram text-gray-500 mr-3 w-5"></i> | |
| <span>Projects</span> | |
| </div> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('tasks')"> | |
| <i class="fas fa-tasks text-gray-500 mr-3 w-5"></i> | |
| <span>Tasks</span> | |
| </div> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('calendar')"> | |
| <i class="fas fa-calendar-alt text-gray-500 mr-3 w-5"></i> | |
| <span>Calendar</span> | |
| </div> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('invoices')"> | |
| <i class="fas fa-file-invoice-dollar text-gray-500 mr-3 w-5"></i> | |
| <span>Invoices</span> | |
| </div> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('reports')"> | |
| <i class="fas fa-chart-line text-gray-500 mr-3 w-5"></i> | |
| <span>Reports</span> | |
| </div> | |
| <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md cursor-pointer" onclick="navigateTo('settings')"> | |
| <i class="fas fa-cog text-gray-500 mr-3 w-5"></i> | |
| <span>Settings</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img class="h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">John Doe</p> | |
| <p class="text-xs font-medium text-gray-500">Admin</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden text-gray-500 focus:outline-none" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="ml-4 md:ml-0"> | |
| <h1 class="text-lg font-semibold text-gray-800">Client Management</h1> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none" onclick="toggleNotifications()"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| <div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-10"> | |
| <div class="py-1"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">New client added</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Project deadline approaching</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Payment received</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-4 relative"> | |
| <button id="user-menu-button" class="flex items-center text-sm rounded-full focus:outline-none" onclick="toggleUserMenu()"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10"> | |
| <div class="py-1"> | |
| <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> | |
| </div> | |
| <!-- Main content area --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-50 custom-scrollbar"> | |
| <!-- Client Management Tabs --> | |
| <div class="mb-6"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <button id="clients-tab" class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('clients-section')">Clients</button> | |
| <button id="leads-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('leads-section')">Leads</button> | |
| <button id="pipeline-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('pipeline-section')">Sales Pipeline</button> | |
| <button id="projects-tab" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" onclick="showSection('projects-section')">Projects</button> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Clients Section (Default View) --> | |
| <div id="clients-section"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Client Database</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300"> | |
| <i class="fas fa-download mr-2"></i> Export | |
| </button> | |
| <button id="add-client-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center" onclick="openModal('client-modal')"> | |
| <i class="fas fa-plus mr-2"></i> Add Client | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Client Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Clients</p> | |
| <p class="text-xl font-semibold text-gray-800">124</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">VIP Clients</p> | |
| <p class="text-xl font-semibold text-gray-800">24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Projects</p> | |
| <p class="text-xl font-semibold text-gray-800">42</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Avg. Revenue</p> | |
| <p class="text-xl font-semibold text-gray-800">$8,742</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Client List --> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between"> | |
| <h3 class="text-lg font-medium text-gray-800">All Clients</h3> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search clients..." 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"> | |
| <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> | |
| </div> | |
| <button class="p-1 text-gray-400 hover:text-indigo-600 focus:outline-none"> | |
| <i class="fas fa-filter"></i> | |
| </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">Client</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">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projects</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">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="client-table-body"> | |
| <!-- Client rows will be populated here by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6"> | |
| <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">5</span> of <span class="font-medium">124</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> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"> ... </span> | |
| <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"> 8 </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> | |
| </div> | |
| <!-- Leads Section (Hidden by default) --> | |
| <div id="leads-section" class="hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Lead Management</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300"> | |
| <i class="fas fa-filter mr-2"></i> Filter | |
| </button> | |
| <button id="add-lead-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center" onclick="openModal('lead-modal')"> | |
| <i class="fas fa-plus mr-2"></i> Add Lead | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Lead Pipeline Visualization --> | |
| <div class="bg-white p-4 rounded-lg shadow mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Lead Conversion Funnel</h3> | |
| <div class="grid grid-cols-5 gap-4"> | |
| <div class="pipeline-stage bg-blue-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('New Lead')"> | |
| <div class="text-blue-600 text-2xl font-bold mb-1">85</div> | |
| <div class="text-blue-800 font-medium">New Leads</div> | |
| <div class="text-xs text-blue-500 mt-1">+12 this week</div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <i class="fas fa-arrow-right text-gray-400"></i> | |
| </div> | |
| <div class="pipeline-stage bg-purple-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Contacted')"> | |
| <div class="text-purple-600 text-2xl font-bold mb-1">42</div> | |
| <div class="text-purple-800 font-medium">Contacted</div> | |
| <div class="text-xs text-purple-500 mt-1">35% conversion</div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <i class="fas fa-arrow-right text-gray-400"></i> | |
| </div> | |
| <div class="pipeline-stage bg-indigo-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Qualified')"> | |
| <div class="text-indigo-600 text-2xl font-bold mb-1">18</div> | |
| <div class="text-indigo-800 font-medium">Qualified</div> | |
| <div class="text-xs text-indigo-500 mt-1">42% conversion</div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <i class="fas fa-arrow-right text-gray-400"></i> | |
| </div> | |
| <div class="pipeline-stage bg-green-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Proposal Sent')"> | |
| <div class="text-green-600 text-2xl font-bold mb-1">7</div> | |
| <div class="text-green-800 font-medium">Proposal Sent</div> | |
| <div class="text-xs text-green-500 mt-1">39% conversion</div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <i class="fas fa-arrow-right text-gray-400"></i> | |
| </div> | |
| <div class="pipeline-stage bg-yellow-50 p-4 rounded-lg text-center cursor-pointer" onclick="filterLeads('Closed Won')"> | |
| <div class="text-yellow-600 text-2xl font-bold mb-1">3</div> | |
| <div class="text-yellow-800 font-medium">Closed Won</div> | |
| <div class="text-xs text-yellow-500 mt-1">43% conversion</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lead List --> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between"> | |
| <h3 class="text-lg font-medium text-gray-800">Recent Leads</h3> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search leads..." 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"> | |
| <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> | |
| </div> | |
| <button class="p-1 text-gray-400 hover:text-indigo-600 focus:outline-none"> | |
| <i class="fas fa-sort"></i> | |
| </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">Lead</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</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">Next Step</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="lead-table-body"> | |
| <!-- Lead rows will be populated here by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6"> | |
| <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">5</span> of <span class="font-medium">42</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> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"> ... </span> | |
| <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"> 8 </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> | |
| </div> | |
| <!-- Sales Pipeline Section (Hidden by default) --> | |
| <div id="pipeline-section" class="hidden"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Sales Pipeline</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-white hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md text-sm font-medium flex items-center border border-gray-300"> | |
| <i class="fas fa-cog mr-2"></i> Configure | |
| </button> | |
| <button id="add-deal-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center" onclick="openModal('deal-modal')"> | |
| <i class="fas fa-plus mr-2"></i> Add Deal | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pipeline Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Pipeline Value</p> | |
| <p class="text-2xl font-semibold text-gray-800">$245,000</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-funnel-dollar"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Deals Won This Month</p> | |
| <p class="text-2xl font-semibold text-gray-800">8</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-trophy"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Avg. Deal Size</p> | |
| <p class="text-2xl font-semibold text-gray-800">$12,250</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| </ | |
| </html> |