Hugging Face's logo

Spaces:
udayzee05
/
sales-crm
Running

App Files Community
udayzee05 commited on
Commit
cf2c2bf
·
verified ·
1 Parent(s): 337cc58

create a sales crm with all the stndard practises while managing each lead to automailing leads and notification with stages - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +928 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sales Crm
3
- emoji: 🚀
4
- colorFrom: indigo
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: sales-crm
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,928 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sales CRM | Lead Management System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for elements that need more precise styling */
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .sidebar.collapsed {
15
+ width: 70px;
16
+ }
17
+ .sidebar.collapsed .nav-text {
18
+ display: none;
19
+ }
20
+ .sidebar.collapsed .logo-text {
21
+ display: none;
22
+ }
23
+ .sidebar.collapsed .nav-item {
24
+ justify-content: center;
25
+ }
26
+ .lead-stage-new { background-color: #E3F2FD; border-left: 4px solid #2196F3; }
27
+ .lead-stage-contact { background-color: #E8F5E9; border-left: 4px solid #4CAF50; }
28
+ .lead-stage-qualified { background-color: #FFF8E1; border-left: 4px solid #FFC107; }
29
+ .lead-stage-proposal { background-color: #F3E5F5; border-left: 4px solid #9C27B0; }
30
+ .lead-stage-negotiation { background-color: #E0F7FA; border-left: 4px solid #00BCD4; }
31
+ .lead-stage-closed { background-color: #EFEBE9; border-left: 4px solid #795548; }
32
+ .lead-stage-lost { background-color: #FFEBEE; border-left: 4px solid #F44336; }
33
+
34
+ /* Animation for notifications */
35
+ @keyframes slideIn {
36
+ from { transform: translateX(100%); }
37
+ to { transform: translateX(0); }
38
+ }
39
+ .notification {
40
+ animation: slideIn 0.3s ease-out;
41
+ }
42
+
43
+ /* Custom scrollbar */
44
+ ::-webkit-scrollbar {
45
+ width: 8px;
46
+ }
47
+ ::-webkit-scrollbar-track {
48
+ background: #f1f1f1;
49
+ }
50
+ ::-webkit-scrollbar-thumb {
51
+ background: #888;
52
+ border-radius: 4px;
53
+ }
54
+ ::-webkit-scrollbar-thumb:hover {
55
+ background: #555;
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-100 font-sans">
60
+ <div class="flex h-screen overflow-hidden">
61
+ <!-- Sidebar -->
62
+ <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col">
63
+ <div class="p-4 flex items-center">
64
+ <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
65
+ <i class="fas fa-chart-line text-indigo-800 text-xl"></i>
66
+ </div>
67
+ <span class="logo-text ml-3 text-xl font-bold">SalesPro CRM</span>
68
+ </div>
69
+
70
+ <div class="flex-1 overflow-y-auto">
71
+ <nav class="mt-6">
72
+ <div class="px-4 py-2 text-xs uppercase font-semibold text-indigo-300">Navigation</div>
73
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white bg-indigo-900">
74
+ <i class="fas fa-tachometer-alt"></i>
75
+ <span class="nav-text ml-3">Dashboard</span>
76
+ </a>
77
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
78
+ <i class="fas fa-users"></i>
79
+ <span class="nav-text ml-3">Leads</span>
80
+ <span class="ml-auto bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">15</span>
81
+ </a>
82
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
83
+ <i class="fas fa-calendar"></i>
84
+ <span class="nav-text ml-3">Calendar</span>
85
+ </a>
86
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
87
+ <i class="fas fa-envelope"></i>
88
+ <span class="nav-text ml-3">Email Templates</span>
89
+ </a>
90
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
91
+ <i class="fas fa-chart-bar"></i>
92
+ <span class="nav-text ml-3">Reports</span>
93
+ </a>
94
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
95
+ <i class="fas fa-cog"></i>
96
+ <span class="nav-text ml-3">Settings</span>
97
+ </a>
98
+ </nav>
99
+
100
+ <div class="px-4 py-2 mt-6 text-xs uppercase font-semibold text-indigo-300">Automation</div>
101
+ <nav>
102
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
103
+ <i class="fas fa-robot"></i>
104
+ <span class="nav-text ml-3">Workflows</span>
105
+ </a>
106
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
107
+ <i class="fas fa-bell"></i>
108
+ <span class="nav-text ml-3">Notifications</span>
109
+ </a>
110
+ <a href="#" class="nav-item flex items-center px-4 py-3 text-white hover:bg-indigo-700">
111
+ <i class="fas fa-tasks"></i>
112
+ <span class="nav-text ml-3">Tasks</span>
113
+ </a>
114
+ </nav>
115
+ </div>
116
+
117
+ <div class="p-4 border-t border-indigo-700">
118
+ <div class="flex items-center">
119
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full">
120
+ <div class="ml-3">
121
+ <div class="text-sm font-medium">John Doe</div>
122
+ <div class="text-xs text-indigo-300">Sales Manager</div>
123
+ </div>
124
+ <button class="ml-auto text-indigo-300 hover:text-white">
125
+ <i class="fas fa-sign-out-alt"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Main Content -->
132
+ <div class="flex-1 flex flex-col overflow-hidden">
133
+ <!-- Top Navigation -->
134
+ <header class="bg-white shadow-sm">
135
+ <div class="flex items-center justify-between px-6 py-3">
136
+ <div class="flex items-center">
137
+ <button id="sidebarToggle" class="text-gray-500 hover:text-gray-700 mr-4">
138
+ <i class="fas fa-bars"></i>
139
+ </button>
140
+ <h1 class="text-xl font-semibold text-gray-800">Lead Management</h1>
141
+ </div>
142
+
143
+ <div class="flex items-center space-x-4">
144
+ <div class="relative">
145
+ <button class="text-gray-500 hover:text-gray-700">
146
+ <i class="fas fa-bell"></i>
147
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
148
+ </button>
149
+ </div>
150
+ <div class="relative">
151
+ <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">
152
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
153
+ </div>
154
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 flex items-center">
155
+ <i class="fas fa-plus mr-2"></i>
156
+ <span>Add Lead</span>
157
+ </button>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Lead Stages Navigation -->
162
+ <div class="flex overflow-x-auto border-b">
163
+ <a href="#" class="px-6 py-3 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600">All Leads</a>
164
+ <a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">New</a>
165
+ <a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Contacted</a>
166
+ <a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Qualified</a>
167
+ <a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Proposal</a>
168
+ <a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Negotiation</a>
169
+ <a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Closed Won</a>
170
+ <a href="#" class="px-6 py-3 text-sm font-medium text-gray-500 hover:text-indigo-500">Closed Lost</a>
171
+ </div>
172
+ </header>
173
+
174
+ <!-- Main Content Area -->
175
+ <main class="flex-1 overflow-y-auto p-6">
176
+ <!-- Filters and Actions -->
177
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 space-y-4 md:space-y-0">
178
+ <div class="flex items-center space-x-4">
179
+ <div class="relative">
180
+ <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">
181
+ <option>All Sources</option>
182
+ <option>Website</option>
183
+ <option>Referral</option>
184
+ <option>Social Media</option>
185
+ <option>Email Campaign</option>
186
+ </select>
187
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 pointer-events-none"></i>
188
+ </div>
189
+ <div class="relative">
190
+ <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">
191
+ <option>All Owners</option>
192
+ <option>John Doe</option>
193
+ <option>Jane Smith</option>
194
+ <option>Mike Johnson</option>
195
+ </select>
196
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 pointer-events-none"></i>
197
+ </div>
198
+ <button class="text-gray-500 hover:text-gray-700">
199
+ <i class="fas fa-filter"></i>
200
+ <span class="ml-1">More Filters</span>
201
+ </button>
202
+ </div>
203
+
204
+ <div class="flex items-center space-x-4">
205
+ <button class="text-gray-500 hover:text-gray-700">
206
+ <i class="fas fa-download"></i>
207
+ <span class="ml-1">Export</span>
208
+ </button>
209
+ <button class="text-gray-500 hover:text-gray-700">
210
+ <i class="fas fa-print"></i>
211
+ <span class="ml-1">Print</span>
212
+ </button>
213
+ <div class="relative">
214
+ <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">
215
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Leads Table -->
221
+ <div class="bg-white rounded-lg shadow overflow-hidden">
222
+ <div class="overflow-x-auto">
223
+ <table class="min-w-full divide-y divide-gray-200">
224
+ <thead class="bg-gray-50">
225
+ <tr>
226
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
227
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
228
+ </th>
229
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
230
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
231
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
232
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
233
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stage</th>
234
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
235
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Contact</th>
236
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Action</th>
237
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
238
+ </tr>
239
+ </thead>
240
+ <tbody class="bg-white divide-y divide-gray-200" id="leadsTableBody">
241
+ <!-- Leads will be populated here by JavaScript -->
242
+ </tbody>
243
+ </table>
244
+ </div>
245
+
246
+ <!-- Pagination -->
247
+ <div class="bg-white px-6 py-3 flex items-center justify-between border-t border-gray-200">
248
+ <div class="flex-1 flex justify-between sm:hidden">
249
+ <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>
250
+ <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>
251
+ </div>
252
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
253
+ <div>
254
+ <p class="text-sm text-gray-700">
255
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">47</span> results
256
+ </p>
257
+ </div>
258
+ <div>
259
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
260
+ <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">
261
+ <span class="sr-only">Previous</span>
262
+ <i class="fas fa-chevron-left"></i>
263
+ </a>
264
+ <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>
265
+ <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>
266
+ <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>
267
+ <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">
268
+ <span class="sr-only">Next</span>
269
+ <i class="fas fa-chevron-right"></i>
270
+ </a>
271
+ </nav>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </main>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Lead Detail Modal -->
281
+ <div id="leadModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
282
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
283
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
284
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
285
+ </div>
286
+
287
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
288
+
289
+ <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">
290
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
291
+ <div class="sm:flex sm:items-start">
292
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
293
+ <div class="flex justify-between items-center">
294
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modalTitle">Lead Details</h3>
295
+ <button type="button" class="closeModal text-gray-400 hover:text-gray-500">
296
+ <i class="fas fa-times"></i>
297
+ </button>
298
+ </div>
299
+
300
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-6">
301
+ <div class="col-span-2">
302
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
303
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
304
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Contact Information</h3>
305
+ </div>
306
+ <div class="px-4 py-5 sm:p-6">
307
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
308
+ <div class="sm:col-span-3">
309
+ <label for="first-name" class="block text-sm font-medium text-gray-700">First name</label>
310
+ <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">
311
+ </div>
312
+
313
+ <div class="sm:col-span-3">
314
+ <label for="last-name" class="block text-sm font-medium text-gray-700">Last name</label>
315
+ <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">
316
+ </div>
317
+
318
+ <div class="sm:col-span-4">
319
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
320
+ <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]">
321
+ </div>
322
+
323
+ <div class="sm:col-span-2">
324
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
325
+ <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">
326
+ </div>
327
+
328
+ <div class="sm:col-span-3">
329
+ <label for="company" class="block text-sm font-medium text-gray-700">Company</label>
330
+ <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.">
331
+ </div>
332
+
333
+ <div class="sm:col-span-3">
334
+ <label for="job-title" class="block text-sm font-medium text-gray-700">Job title</label>
335
+ <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">
336
+ </div>
337
+
338
+ <div class="sm:col-span-6">
339
+ <label for="lead-source" class="block text-sm font-medium text-gray-700">Lead Source</label>
340
+ <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">
341
+ <option>Website</option>
342
+ <option>Referral</option>
343
+ <option selected>Email Campaign</option>
344
+ <option>Social Media</option>
345
+ <option>Trade Show</option>
346
+ </select>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="bg-white shadow mt-6 overflow-hidden sm:rounded-lg">
353
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
354
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Opportunity Details</h3>
355
+ </div>
356
+ <div class="px-4 py-5 sm:p-6">
357
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
358
+ <div class="sm:col-span-3">
359
+ <label for="lead-stage" class="block text-sm font-medium text-gray-700">Lead Stage</label>
360
+ <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">
361
+ <option>New</option>
362
+ <option>Contacted</option>
363
+ <option selected>Qualified</option>
364
+ <option>Proposal</option>
365
+ <option>Negotiation</option>
366
+ <option>Closed Won</option>
367
+ <option>Closed Lost</option>
368
+ </select>
369
+ </div>
370
+
371
+ <div class="sm:col-span-3">
372
+ <label for="lead-owner" class="block text-sm font-medium text-gray-700">Lead Owner</label>
373
+ <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">
374
+ <option>John Doe</option>
375
+ <option selected>Jane Smith</option>
376
+ <option>Mike Johnson</option>
377
+ </select>
378
+ </div>
379
+
380
+ <div class="sm:col-span-3">
381
+ <label for="lead-value" class="block text-sm font-medium text-gray-700">Opportunity Value</label>
382
+ <div class="mt-1 relative rounded-md shadow-sm">
383
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
384
+ <span class="text-gray-500 sm:text-sm">$</span>
385
+ </div>
386
+ <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">
387
+ <div class="absolute inset-y-0 right-0 flex items-center">
388
+ <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">
389
+ <option>USD</option>
390
+ <option>EUR</option>
391
+ <option>GBP</option>
392
+ </select>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="sm:col-span-3">
398
+ <label for="probability" class="block text-sm font-medium text-gray-700">Probability (%)</label>
399
+ <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">
400
+ </div>
401
+
402
+ <div class="sm:col-span-6">
403
+ <label for="description" class="block text-sm font-medium text-gray-700">Opportunity Description</label>
404
+ <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>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="col-span-1">
412
+ <div class="bg-white shadow overflow-hidden sm:rounded-lg">
413
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
414
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Activity Timeline</h3>
415
+ </div>
416
+ <div class="px-4 py-5 sm:p-6">
417
+ <div class="flow-root">
418
+ <ul class="-mb-8">
419
+ <li>
420
+ <div class="relative pb-8">
421
+ <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
422
+ <div class="relative flex space-x-3">
423
+ <div>
424
+ <span class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
425
+ <i class="fas fa-phone text-white text-xs"></i>
426
+ </span>
427
+ </div>
428
+ <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
429
+ <div>
430
+ <p class="text-sm text-gray-500">Called <span class="font-medium text-gray-900">Sarah Johnson</span></p>
431
+ </div>
432
+ <div class="text-right text-sm whitespace-nowrap text-gray-500">
433
+ <time datetime="2023-06-11">Today, 10:30 AM</time>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </li>
439
+
440
+ <li>
441
+ <div class="relative pb-8">
442
+ <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
443
+ <div class="relative flex space-x-3">
444
+ <div>
445
+ <span class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white">
446
+ <i class="fas fa-envelope text-white text-xs"></i>
447
+ </span>
448
+ </div>
449
+ <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
450
+ <div>
451
+ <p class="text-sm text-gray-500">Sent email <span class="font-medium text-gray-900">Product Information</span></p>
452
+ </div>
453
+ <div class="text-right text-sm whitespace-nowrap text-gray-500">
454
+ <time datetime="2023-06-10">Yesterday, 2:15 PM</time>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </li>
460
+
461
+ <li>
462
+ <div class="relative pb-8">
463
+ <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
464
+ <div class="relative flex space-x-3">
465
+ <div>
466
+ <span class="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center ring-8 ring-white">
467
+ <i class="fas fa-calendar text-white text-xs"></i>
468
+ </span>
469
+ </div>
470
+ <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
471
+ <div>
472
+ <p class="text-sm text-gray-500">Meeting scheduled with <span class="font-medium text-gray-900">Sarah Johnson</span></p>
473
+ </div>
474
+ <div class="text-right text-sm whitespace-nowrap text-gray-500">
475
+ <time datetime="2023-06-08">Mon, June 8</time>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </li>
481
+
482
+ <li>
483
+ <div class="relative pb-8">
484
+ <div class="relative flex space-x-3">
485
+ <div>
486
+ <span class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center ring-8 ring-white">
487
+ <i class="fas fa-user-plus text-white text-xs"></i>
488
+ </span>
489
+ </div>
490
+ <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
491
+ <div>
492
+ <p class="text-sm text-gray-500">Created lead for <span class="font-medium text-gray-900">Sarah Johnson</span></p>
493
+ </div>
494
+ <div class="text-right text-sm whitespace-nowrap text-gray-500">
495
+ <time datetime="2023-06-05">Fri, June 5</time>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </li>
501
+ </ul>
502
+ </div>
503
+ <div class="mt-6">
504
+ <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">
505
+ <i class="fas fa-plus mr-2"></i>
506
+ Add Activity
507
+ </button>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <div class="bg-white shadow mt-6 overflow-hidden sm:rounded-lg">
513
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
514
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Quick Actions</h3>
515
+ </div>
516
+ <div class="px-4 py-5 sm:p-6">
517
+ <div class="space-y-4">
518
+ <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">
519
+ <i class="fas fa-envelope mr-2"></i>
520
+ Send Email
521
+ </button>
522
+ <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">
523
+ <i class="fas fa-phone mr-2"></i>
524
+ Log Call
525
+ </button>
526
+ <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">
527
+ <i class="fas fa-calendar mr-2"></i>
528
+ Schedule Meeting
529
+ </button>
530
+ <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">
531
+ <i class="fas fa-file-alt mr-2"></i>
532
+ Create Proposal
533
+ </button>
534
+ <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">
535
+ <i class="fas fa-tasks mr-2"></i>
536
+ Add Task
537
+ </button>
538
+ </div>
539
+ </div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
547
+ <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">
548
+ Save Changes
549
+ </button>
550
+ <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">
551
+ Cancel
552
+ </button>
553
+ <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">
554
+ Delete Lead
555
+ </button>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Email Template Modal -->
562
+ <div id="emailModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
563
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
564
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
565
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
566
+ </div>
567
+
568
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
569
+
570
+ <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">
571
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
572
+ <div class="sm:flex sm:items-start">
573
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
574
+ <div class="flex justify-between items-center">
575
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Send Email to Sarah Johnson</h3>
576
+ <button type="button" class="closeEmailModal text-gray-400 hover:text-gray-500">
577
+ <i class="fas fa-times"></i>
578
+ </button>
579
+ </div>
580
+
581
+ <div class="mt-4">
582
+ <div class="space-y-4">
583
+ <div>
584
+ <label for="email-template" class="block text-sm font-medium text-gray-700">Template</label>
585
+ <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">
586
+ <option>-- Select Template --</option>
587
+ <option>Initial Contact</option>
588
+ <option selected>Follow-Up</option>
589
+ <option>Proposal</option>
590
+ <option>Thank You</option>
591
+ </select>
592
+ </div>
593
+
594
+ <div>
595
+ <label for="email-subject" class="block text-sm font-medium text-gray-700">Subject</label>
596
+ <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">
597
+ </div>
598
+
599
+ <div>
600
+ <label for="email-body" class="block text-sm font-medium text-gray-700">Message</label>
601
+ <div class="mt-1">
602
+ <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,
603
+
604
+ 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.
605
+
606
+ Our solution is specifically designed for mid-sized companies like Tech Solutions Inc., with features that address the challenges you mentioned:
607
+ - Automated lead scoring and routing
608
+ - Customizable reporting dashboards
609
+ - Seamless integration with your existing email system
610
+
611
+ 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?
612
+
613
+ Looking forward to your thoughts.
614
+
615
+ Best regards,
616
+ Jane Smith
617
+ Sales Representative
618
+ SalesPro CRM</textarea>
619
+ </div>
620
+ </div>
621
+
622
+ <div>
623
+ <label class="block text-sm font-medium text-gray-700">Attachments</label>
624
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
625
+ <div class="space-y-1 text-center">
626
+ <div class="flex text-sm text-gray-600">
627
+ <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">
628
+ <span>Upload a file</span>
629
+ <input id="file-upload" name="file-upload" type="file" class="sr-only">
630
+ </label>
631
+ <p class="pl-1">or drag and drop</p>
632
+ </div>
633
+ <p class="text-xs text-gray-500">PDF, DOCX up to 10MB</p>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
643
+ <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">
644
+ <i class="fas fa-paper-plane mr-2"></i> Send Email
645
+ </button>
646
+ <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">
647
+ Save Draft
648
+ </button>
649
+ <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">
650
+ Cancel
651
+ </button>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+
657
+ <!-- Notification Toast -->
658
+ <div id="notificationToast" class="fixed bottom-4 right-4 hidden">
659
+ <div class="notification bg-white rounded-lg shadow-lg overflow-hidden w-80">
660
+ <div class="px-4 py-3 bg-indigo-600 text-white flex justify-between items-center">
661
+ <div class="flex items-center">
662
+ <i class="fas fa-bell mr-2"></i>
663
+ <span class="font-semibold">New Notification</span>
664
+ </div>
665
+ <button class="text-white hover:text-indigo-200 closeNotification">
666
+ <i class="fas fa-times"></i>
667
+ </button>
668
+ </div>
669
+ <div class="p-4">
670
+ <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>
671
+ <div class="mt-2 flex justify-end">
672
+ <button class="text-xs text-indigo-600 hover:text-indigo-800">View Lead</button>
673
+ </div>
674
+ </div>
675
+ </div>
676
+ </div>
677
+
678
+ <script>
679
+ // Sample lead data
680
+ const leads = [
681
+ {
682
+ id: 1,
683
+ name: "Sarah Johnson",
684
+ company: "Tech Solutions Inc.",
685
+ email: "[email protected]",
686
+ phone: "(555) 123-4567",
687
+ stage: "Qualified",
688
+ value: "$12,500",
689
+ lastContact: "Today, 10:30 AM",
690
+ nextAction: "Send proposal",
691
+ probability: "60%"
692
+ },
693
+ {
694
+ id: 2,
695
+ name: "Michael Brown",
696
+ company: "Acme Corp",
697
+ email: "[email protected]",
698
+ phone: "(555) 987-6543",
699
+ stage: "New",
700
+ value: "$8,200",
701
+ lastContact: "Not contacted",
702
+ nextAction: "Initial call",
703
+ probability: "20%"
704
+ },
705
+ {
706
+ id: 3,
707
+ name: "Emily Davis",
708
+ company: "Global Enterprises",
709
+ email: "[email protected]",
710
+ phone: "(555) 456-7890",
711
+ stage: "Contacted",
712
+ value: "$15,000",
713
+ lastContact: "Yesterday, 2:15 PM",
714
+ nextAction: "Schedule demo",
715
+ probability: "40%"
716
+ },
717
+ {
718
+ id: 4,
719
+ name: "Robert Wilson",
720
+ company: "Wilson & Co",
721
+ email: "[email protected]",
722
+ phone: "(555) 789-0123",
723
+ stage: "Proposal",
724
+ value: "$22,000",
725
+ lastContact: "Mon, June 8",
726
+ nextAction: "Follow-up call",
727
+ probability: "75%"
728
+ },
729
+ {
730
+ id: 5,
731
+ name: "Jennifer Lee",
732
+ company: "Innovate LLC",
733
+ email: "[email protected]",
734
+ phone: "(555) 234-5678",
735
+ stage: "Negotiation",
736
+ value: "$18,500",
737
+ lastContact: "Fri, June 5",
738
+ nextAction: "Finalize contract",
739
+ probability: "85%"
740
+ },
741
+ {
742
+ id: 6,
743
+ name: "David Kim",
744
+ company: "Digital Solutions",
745
+ email: "[email protected]",
746
+ phone: "(555) 345-6789",
747
+ stage: "Closed Won",
748
+ value: "$30,000",
749
+ lastContact: "Wed, June 3",
750
+ nextAction: "Onboarding",
751
+ probability: "100%"
752
+ },
753
+ {
754
+ id: 7,
755
+ name: "Lisa Chen",
756
+ company: "Future Tech",
757
+ email: "[email protected]",
758
+ phone: "(555) 678-9012",
759
+ stage: "Closed Lost",
760
+ value: "$25,000",
761
+ lastContact: "Tue, June 2",
762
+ nextAction: "Post-mortem",
763
+ probability: "0%"
764
+ },
765
+ {
766
+ id: 8,
767
+ name: "James Wilson",
768
+ company: "Alpha Industries",
769
+ email: "[email protected]",
770
+ phone: "(555) 901-2345",
771
+ stage: "Qualified",
772
+ value: "$14,000",
773
+ lastContact: "Mon, June 1",
774
+ nextAction: "Send case studies",
775
+ probability: "65%"
776
+ },
777
+ {
778
+ id: 9,
779
+ name: "Amanda Taylor",
780
+ company: "Summit Group",
781
+ email: "[email protected]",
782
+ phone: "(555) 012-3456",
783
+ stage: "New",
784
+ value: "$9,500",
785
+ lastContact: "Not contacted",
786
+ nextAction: "Initial email",
787
+ probability: "15%"
788
+ },
789
+ {
790
+ id: 10,
791
+ name: "Thomas Moore",
792
+ company: "Peak Performance",
793
+ email: "[email protected]",
794
+ phone: "(555) 123-4567",
795
+ stage: "Contacted",
796
+ value: "$17,000",
797
+ lastContact: "Fri, May 29",
798
+ nextAction: "Answer questions",
799
+ probability: "50%"
800
+ }
801
+ ];
802
+
803
+ // Populate leads table
804
+ document.addEventListener('DOMContentLoaded', function() {
805
+ const leadsTableBody = document.getElementById('leadsTableBody');
806
+
807
+ leads.forEach(lead => {
808
+ const row = document.createElement('tr');
809
+ row.className = `lead-stage-${lead.stage.toLowerCase().replace(' ', '-')}`;
810
+ row.innerHTML = `
811
+ <td class="px-6 py-4 whitespace-nowrap">
812
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
813
+ </td>
814
+ <td class="px-6 py-4 whitespace-nowrap">
815
+ <div class="flex items-center">
816
+ <div class="flex-shrink-0 h-10 w-10">
817
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/${lead.id % 2 === 0 ? 'women' : 'men'}/${lead.id}.jpg" alt="">
818
+ </div>
819
+ <div class="ml-4">
820
+ <div class="text-sm font-medium text-gray-900">${lead.name}</div>
821
+ <div class="text-sm text-gray-500">${lead.email}</div>
822
+ </div>
823
+ </div>
824
+ </td>
825
+ <td class="px-6 py-4 whitespace-nowrap">
826
+ <div class="text-sm text-gray-900">${lead.company}</div>
827
+ </td>
828
+ <td class="px-6 py-4 whitespace-nowrap">
829
+ <div class="text-sm text-gray-900">${lead.email}</div>
830
+ </td>
831
+ <td class="px-6 py-4 whitespace-nowrap">
832
+ <div class="text-sm text-gray-900">${lead.phone}</div>
833
+ </td>
834
+ <td class="px-6 py-4 whitespace-nowrap">
835
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStageClass(lead.stage)}">
836
+ ${lead.stage}
837
+ </span>
838
+ </td>
839
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
840
+ ${lead.value}
841
+ </td>
842
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
843
+ ${lead.lastContact}
844
+ </td>
845
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
846
+ ${lead.nextAction}
847
+ </td>
848
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
849
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3 view-lead" data-id="${lead.id}">View</button>
850
+ <button class="text-green-600 hover:text-green-900 email-lead" data-id="${lead.id}">Email</button>
851
+ </td>
852
+ `;
853
+ leadsTableBody.appendChild(row);
854
+ });
855
+
856
+ // Add event listeners to view buttons
857
+ document.querySelectorAll('.view-lead').forEach(button => {
858
+ button.addEventListener('click', function() {
859
+ const leadId = parseInt(this.getAttribute('data-id'));
860
+ showLeadModal(leadId);
861
+ });
862
+ });
863
+
864
+ // Add event listeners to email buttons
865
+ document.querySelectorAll('.email-lead').forEach(button => {
866
+ button.addEventListener('click', function() {
867
+ const leadId = parseInt(this.getAttribute('data-id'));
868
+ showEmailModal(leadId);
869
+ });
870
+ });
871
+
872
+ // Close modal buttons
873
+ document.querySelector('.closeModal').addEventListener('click', hideLeadModal);
874
+ document.querySelector('.closeEmailModal').addEventListener('click', hideEmailModal);
875
+
876
+ // Sidebar toggle
877
+ document.getElementById('sidebarToggle').addEventListener('click', toggleSidebar);
878
+
879
+ // Show notification after 3 seconds
880
+ setTimeout(showNotification, 3000);
881
+
882
+ // Close notification
883
+ document.querySelector('.closeNotification').addEventListener('click', hideNotification);
884
+ });
885
+
886
+ function getStageClass(stage) {
887
+ switch(stage) {
888
+ case 'New': return 'bg-blue-100 text-blue-800';
889
+ case 'Contacted': return 'bg-green-100 text-green-800';
890
+ case 'Qualified': return 'bg-yellow-100 text-yellow-800';
891
+ case 'Proposal': return 'bg-purple-100 text-purple-800';
892
+ case 'Negotiation': return 'bg-teal-100 text-teal-800';
893
+ case 'Closed Won': return 'bg-gray-100 text-gray-800';
894
+ case 'Closed Lost': return 'bg-red-100 text-red-800';
895
+ default: return 'bg-gray-100 text-gray-800';
896
+ }
897
+ }
898
+
899
+ function showLeadModal(leadId) {
900
+ document.getElementById('leadModal').classList.remove('hidden');
901
+ }
902
+
903
+ function hideLeadModal() {
904
+ document.getElementById('leadModal').classList.add('hidden');
905
+ }
906
+
907
+ function showEmailModal(leadId) {
908
+ document.getElementById('emailModal').classList.remove('hidden');
909
+ }
910
+
911
+ function hideEmailModal() {
912
+ document.getElementById('emailModal').classList.add('hidden');
913
+ }
914
+
915
+ function toggleSidebar() {
916
+ document.querySelector('.sidebar').classList.toggle('collapsed');
917
+ }
918
+
919
+ function showNotification() {
920
+ document.getElementById('notificationToast').classList.remove('hidden');
921
+ }
922
+
923
+ function hideNotification() {
924
+ document.getElementById('notificationToast').classList.add('hidden');
925
+ }
926
+ </script>
927
+ <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>
928
+ </html>