Hugging Face's logo

Spaces:
tomriddle
/
indexx
Running

App Files Community
tomriddle commited on
Commit
0d7c551
·
verified ·
1 Parent(s): ccf2cb5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1313 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Indexx
3
- emoji: 🐨
4
- colorFrom: indigo
5
- colorTo: gray
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: indexx
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,1313 @@
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>NeonCRM - Modern CRM Solution</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
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar.collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar.collapsed .nav-text {
17
+ display: none;
18
+ }
19
+ .sidebar.collapsed .logo-text {
20
+ display: none;
21
+ }
22
+ .sidebar.collapsed .user-info {
23
+ display: none;
24
+ }
25
+ .content {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .content.expanded {
29
+ margin-left: 70px;
30
+ }
31
+ .card-hover:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
34
+ }
35
+ .deal-progress {
36
+ height: 8px;
37
+ border-radius: 4px;
38
+ }
39
+ .deal-progress-bar {
40
+ height: 100%;
41
+ border-radius: 4px;
42
+ }
43
+ .notification-badge {
44
+ position: absolute;
45
+ top: -5px;
46
+ right: -5px;
47
+ font-size: 10px;
48
+ min-width: 18px;
49
+ height: 18px;
50
+ }
51
+ .active-nav-item {
52
+ background-color: rgba(99, 102, 241, 0.1);
53
+ border-left: 3px solid #6366f1;
54
+ }
55
+ .tab-active {
56
+ border-bottom: 2px solid #6366f1;
57
+ color: #6366f1;
58
+ }
59
+ .chart-container {
60
+ position: relative;
61
+ height: 300px;
62
+ }
63
+ .contact-avatar {
64
+ width: 40px;
65
+ height: 40px;
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ font-weight: bold;
70
+ color: white;
71
+ }
72
+ .deal-stage {
73
+ width: 12px;
74
+ height: 12px;
75
+ border-radius: 50%;
76
+ display: inline-block;
77
+ margin-right: 5px;
78
+ }
79
+ .task-checkbox:checked + .task-label {
80
+ text-decoration: line-through;
81
+ color: #9ca3af;
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="bg-gray-50">
86
+ <div class="flex h-screen overflow-hidden">
87
+ <!-- Sidebar -->
88
+ <div id="sidebar" class="sidebar bg-white shadow-lg w-64 h-full fixed flex flex-col">
89
+ <div class="p-4 flex items-center">
90
+ <div class="bg-indigo-600 text-white p-2 rounded-lg">
91
+ <i class="fas fa-bolt text-xl"></i>
92
+ </div>
93
+ <span class="logo-text ml-3 text-xl font-bold text-gray-800">NeonCRM</span>
94
+ </div>
95
+
96
+ <div class="user-info px-4 py-3 border-b border-gray-200">
97
+ <div class="flex items-center">
98
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full" alt="User">
99
+ <div class="ml-3">
100
+ <p class="text-sm font-medium text-gray-800">Sarah Johnson</p>
101
+ <p class="text-xs text-gray-500">Admin</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <nav class="flex-1 overflow-y-auto py-4">
107
+ <div class="px-2 space-y-1">
108
+ <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">
109
+ <i class="fas fa-tachometer-alt text-gray-500 group-hover:text-indigo-600 mr-3"></i>
110
+ <span class="nav-text">Dashboard</span>
111
+ </a>
112
+ <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">
113
+ <i class="fas fa-users text-gray-500 group-hover:text-indigo-600 mr-3"></i>
114
+ <span class="nav-text">Contacts</span>
115
+ </a>
116
+ <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">
117
+ <i class="fas fa-building text-gray-500 group-hover:text-indigo-600 mr-3"></i>
118
+ <span class="nav-text">Companies</span>
119
+ </a>
120
+ <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">
121
+ <i class="fas fa-handshake text-gray-500 group-hover:text-indigo-600 mr-3"></i>
122
+ <span class="nav-text">Deals</span>
123
+ <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>
124
+ </a>
125
+ <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">
126
+ <i class="fas fa-tasks text-gray-500 group-hover:text-indigo-600 mr-3"></i>
127
+ <span class="nav-text">Tasks</span>
128
+ </a>
129
+ <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">
130
+ <i class="fas fa-chart-bar text-gray-500 group-hover:text-indigo-600 mr-3"></i>
131
+ <span class="nav-text">Reports</span>
132
+ </a>
133
+ </div>
134
+
135
+ <div class="px-2 mt-8">
136
+ <p class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Settings</p>
137
+ <div class="mt-2 space-y-1">
138
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group">
139
+ <i class="fas fa-cog text-gray-500 group-hover:text-indigo-600 mr-3"></i>
140
+ <span class="nav-text">Settings</span>
141
+ </a>
142
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 rounded-md hover:bg-gray-100 group">
143
+ <i class="fas fa-question-circle text-gray-500 group-hover:text-indigo-600 mr-3"></i>
144
+ <span class="nav-text">Help</span>
145
+ </a>
146
+ </div>
147
+ </div>
148
+ </nav>
149
+
150
+ <div class="p-4 border-t border-gray-200">
151
+ <button id="toggle-sidebar" class="w-full flex items-center justify-center text-gray-500 hover:text-indigo-600">
152
+ <i class="fas fa-chevron-left"></i>
153
+ <span class="nav-text ml-2">Collapse</span>
154
+ </button>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Main Content -->
159
+ <div id="content" class="content flex-1 flex flex-col overflow-hidden ml-64">
160
+ <!-- Top Navigation -->
161
+ <header class="bg-white shadow-sm z-10">
162
+ <div class="px-6 py-3 flex items-center justify-between">
163
+ <div class="flex items-center">
164
+ <h1 class="text-lg font-semibold text-gray-900" id="page-title">Dashboard</h1>
165
+ </div>
166
+
167
+ <div class="flex items-center space-x-4">
168
+ <div class="relative">
169
+ <button class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none">
170
+ <i class="fas fa-search"></i>
171
+ </button>
172
+ </div>
173
+
174
+ <div class="relative">
175
+ <button id="notifications-btn" class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none relative">
176
+ <i class="fas fa-bell"></i>
177
+ <span class="notification-badge bg-red-500 text-white rounded-full flex items-center justify-center">3</span>
178
+ </button>
179
+ <div id="notifications-dropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-50">
180
+ <div class="px-4 py-2 border-b border-gray-200">
181
+ <p class="text-sm font-medium text-gray-900">Notifications</p>
182
+ </div>
183
+ <div class="max-h-60 overflow-y-auto">
184
+ <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100">
185
+ <div class="flex items-start">
186
+ <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full">
187
+ <i class="fas fa-handshake text-indigo-600"></i>
188
+ </div>
189
+ <div class="ml-3">
190
+ <p class="font-medium">New deal added</p>
191
+ <p class="text-xs text-gray-500">Acme Corp - $12,000</p>
192
+ </div>
193
+ </div>
194
+ </a>
195
+ <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100 border-b border-gray-100">
196
+ <div class="flex items-start">
197
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
198
+ <i class="fas fa-tasks text-blue-600"></i>
199
+ </div>
200
+ <div class="ml-3">
201
+ <p class="font-medium">Task overdue</p>
202
+ <p class="text-xs text-gray-500">Follow up with client</p>
203
+ </div>
204
+ </div>
205
+ </a>
206
+ <a href="#" class="block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100">
207
+ <div class="flex items-start">
208
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
209
+ <i class="fas fa-users text-green-600"></i>
210
+ </div>
211
+ <div class="ml-3">
212
+ <p class="font-medium">New contact added</p>
213
+ <p class="text-xs text-gray-500">John Smith from TechCorp</p>
214
+ </div>
215
+ </div>
216
+ </a>
217
+ </div>
218
+ <div class="px-4 py-2 border-t border-gray-200">
219
+ <a href="#" class="text-xs font-medium text-indigo-600 hover:text-indigo-900">View all notifications</a>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="relative">
225
+ <button id="user-menu-btn" class="flex items-center text-sm focus:outline-none">
226
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-8 h-8 rounded-full" alt="User">
227
+ <span class="ml-2 text-gray-700 text-sm font-medium hidden md:inline-block">Sarah J.</span>
228
+ </button>
229
+ <div id="user-menu-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
230
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
231
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
232
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </header>
238
+
239
+ <!-- Main Content Area -->
240
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
241
+ <!-- Dashboard Screen -->
242
+ <div id="dashboard-screen" class="screen">
243
+ <div class="mb-6 flex justify-between items-center">
244
+ <h2 class="text-2xl font-bold text-gray-800">Welcome back, Sarah!</h2>
245
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
246
+ <i class="fas fa-plus mr-2"></i> Add New
247
+ </button>
248
+ </div>
249
+
250
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
251
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
252
+ <div class="flex items-center justify-between">
253
+ <div>
254
+ <p class="text-sm font-medium text-gray-500">Total Contacts</p>
255
+ <p class="text-2xl font-bold text-gray-800 mt-1">248</p>
256
+ </div>
257
+ <div class="bg-indigo-100 p-3 rounded-lg">
258
+ <i class="fas fa-users text-indigo-600 text-xl"></i>
259
+ </div>
260
+ </div>
261
+ <div class="mt-4">
262
+ <p class="text-xs text-gray-500 flex items-center">
263
+ <span class="text-green-500 mr-1"><i class="fas fa-arrow-up"></i> 12%</span>
264
+ vs last month
265
+ </p>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
270
+ <div class="flex items-center justify-between">
271
+ <div>
272
+ <p class="text-sm font-medium text-gray-500">Active Deals</p>
273
+ <p class="text-2xl font-bold text-gray-800 mt-1">18</p>
274
+ </div>
275
+ <div class="bg-blue-100 p-3 rounded-lg">
276
+ <i class="fas fa-handshake text-blue-600 text-xl"></i>
277
+ </div>
278
+ </div>
279
+ <div class="mt-4">
280
+ <p class="text-xs text-gray-500 flex items-center">
281
+ <span class="text-green-500 mr-1"><i class="fas fa-arrow-up"></i> 5%</span>
282
+ vs last month
283
+ </p>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
288
+ <div class="flex items-center justify-between">
289
+ <div>
290
+ <p class="text-sm font-medium text-gray-500">Deal Value</p>
291
+ <p class="text-2xl font-bold text-gray-800 mt-1">$124,500</p>
292
+ </div>
293
+ <div class="bg-green-100 p-3 rounded-lg">
294
+ <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
295
+ </div>
296
+ </div>
297
+ <div class="mt-4">
298
+ <p class="text-xs text-gray-500 flex items-center">
299
+ <span class="text-red-500 mr-1"><i class="fas fa-arrow-down"></i> 8%</span>
300
+ vs last month
301
+ </p>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
306
+ <div class="flex items-center justify-between">
307
+ <div>
308
+ <p class="text-sm font-medium text-gray-500">Tasks Due</p>
309
+ <p class="text-2xl font-bold text-gray-800 mt-1">7</p>
310
+ </div>
311
+ <div class="bg-purple-100 p-3 rounded-lg">
312
+ <i class="fas fa-tasks text-purple-600 text-xl"></i>
313
+ </div>
314
+ </div>
315
+ <div class="mt-4">
316
+ <p class="text-xs text-gray-500 flex items-center">
317
+ <span class="text-green-500 mr-1"><i class="fas fa-arrow-up"></i> 3%</span>
318
+ vs last month
319
+ </p>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
325
+ <div class="bg-white p-6 rounded-xl shadow-sm lg:col-span-2">
326
+ <div class="flex justify-between items-center mb-4">
327
+ <h3 class="text-lg font-semibold text-gray-800">Deal Pipeline</h3>
328
+ <div class="flex space-x-2">
329
+ <button class="px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded">Week</button>
330
+ <button class="px-3 py-1 text-xs bg-indigo-600 text-white rounded">Month</button>
331
+ <button class="px-3 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded">Year</button>
332
+ </div>
333
+ </div>
334
+ <div class="chart-container">
335
+ <canvas id="dealChart"></canvas>
336
+ </div>
337
+ </div>
338
+
339
+ <div class="bg-white p-6 rounded-xl shadow-sm">
340
+ <div class="flex justify-between items-center mb-4">
341
+ <h3 class="text-lg font-semibold text-gray-800">Recent Activities</h3>
342
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a>
343
+ </div>
344
+ <div class="space-y-4">
345
+ <div class="flex items-start">
346
+ <div class="flex-shrink-0 bg-indigo-100 p-2 rounded-full">
347
+ <i class="fas fa-handshake text-indigo-600 text-sm"></i>
348
+ </div>
349
+ <div class="ml-3">
350
+ <p class="text-sm font-medium text-gray-800">New deal added</p>
351
+ <p class="text-xs text-gray-500">Acme Corp - $12,000</p>
352
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
353
+ </div>
354
+ </div>
355
+ <div class="flex items-start">
356
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
357
+ <i class="fas fa-tasks text-blue-600 text-sm"></i>
358
+ </div>
359
+ <div class="ml-3">
360
+ <p class="text-sm font-medium text-gray-800">Task completed</p>
361
+ <p class="text-xs text-gray-500">Follow up with client</p>
362
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
363
+ </div>
364
+ </div>
365
+ <div class="flex items-start">
366
+ <div class="flex-shrink-0 bg-green-100 p-2 rounded-full">
367
+ <i class="fas fa-users text-green-600 text-sm"></i>
368
+ </div>
369
+ <div class="ml-3">
370
+ <p class="text-sm font-medium text-gray-800">New contact added</p>
371
+ <p class="text-xs text-gray-500">John Smith from TechCorp</p>
372
+ <p class="text-xs text-gray-400 mt-1">1 day ago</p>
373
+ </div>
374
+ </div>
375
+ <div class="flex items-start">
376
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full">
377
+ <i class="fas fa-file-alt text-purple-600 text-sm"></i>
378
+ </div>
379
+ <div class="ml-3">
380
+ <p class="text-sm font-medium text-gray-800">New document uploaded</p>
381
+ <p class="text-xs text-gray-500">Contract_AcmeCorp.pdf</p>
382
+ <p class="text-xs text-gray-400 mt-1">2 days ago</p>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
390
+ <div class="bg-white p-6 rounded-xl shadow-sm">
391
+ <div class="flex justify-between items-center mb-4">
392
+ <h3 class="text-lg font-semibold text-gray-800">Upcoming Tasks</h3>
393
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a>
394
+ </div>
395
+ <div class="space-y-4">
396
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
397
+ <div class="flex items-center">
398
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
399
+ <div class="ml-3">
400
+ <p class="text-sm font-medium text-gray-800">Follow up with Acme Corp</p>
401
+ <p class="text-xs text-gray-500">Due tomorrow</p>
402
+ </div>
403
+ </div>
404
+ <div class="flex items-center">
405
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Deal</span>
406
+ </div>
407
+ </div>
408
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
409
+ <div class="flex items-center">
410
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
411
+ <div class="ml-3">
412
+ <p class="text-sm font-medium text-gray-800">Prepare quarterly report</p>
413
+ <p class="text-xs text-gray-500">Due in 2 days</p>
414
+ </div>
415
+ </div>
416
+ <div class="flex items-center">
417
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Report</span>
418
+ </div>
419
+ </div>
420
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
421
+ <div class="flex items-center">
422
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
423
+ <div class="ml-3">
424
+ <p class="text-sm font-medium text-gray-800">Call potential client</p>
425
+ <p class="text-xs text-gray-500">Due in 3 days</p>
426
+ </div>
427
+ </div>
428
+ <div class="flex items-center">
429
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Contact</span>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="bg-white p-6 rounded-xl shadow-sm">
436
+ <div class="flex justify-between items-center mb-4">
437
+ <h3 class="text-lg font-semibold text-gray-800">Top Deals</h3>
438
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">View All</a>
439
+ </div>
440
+ <div class="space-y-4">
441
+ <div class="p-3 bg-gray-50 rounded-lg">
442
+ <div class="flex justify-between items-center mb-2">
443
+ <p class="text-sm font-medium text-gray-800">Acme Corporation</p>
444
+ <p class="text-sm font-bold text-indigo-600">$24,000</p>
445
+ </div>
446
+ <div class="mb-2">
447
+ <div class="deal-progress bg-gray-200 w-full">
448
+ <div class="deal-progress-bar bg-indigo-600" style="width: 75%"></div>
449
+ </div>
450
+ </div>
451
+ <div class="flex justify-between text-xs text-gray-500">
452
+ <span>75% complete</span>
453
+ <span>Expected close: May 15</span>
454
+ </div>
455
+ </div>
456
+ <div class="p-3 bg-gray-50 rounded-lg">
457
+ <div class="flex justify-between items-center mb-2">
458
+ <p class="text-sm font-medium text-gray-800">TechStart Inc.</p>
459
+ <p class="text-sm font-bold text-indigo-600">$18,500</p>
460
+ </div>
461
+ <div class="mb-2">
462
+ <div class="deal-progress bg-gray-200 w-full">
463
+ <div class="deal-progress-bar bg-indigo-600" style="width: 50%"></div>
464
+ </div>
465
+ </div>
466
+ <div class="flex justify-between text-xs text-gray-500">
467
+ <span>50% complete</span>
468
+ <span>Expected close: June 1</span>
469
+ </div>
470
+ </div>
471
+ <div class="p-3 bg-gray-50 rounded-lg">
472
+ <div class="flex justify-between items-center mb-2">
473
+ <p class="text-sm font-medium text-gray-800">Global Solutions</p>
474
+ <p class="text-sm font-bold text-indigo-600">$32,000</p>
475
+ </div>
476
+ <div class="mb-2">
477
+ <div class="deal-progress bg-gray-200 w-full">
478
+ <div class="deal-progress-bar bg-indigo-600" style="width: 30%"></div>
479
+ </div>
480
+ </div>
481
+ <div class="flex justify-between text-xs text-gray-500">
482
+ <span>30% complete</span>
483
+ <span>Expected close: June 15</span>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Contacts Screen -->
492
+ <div id="contacts-screen" class="screen hidden">
493
+ <div class="mb-6 flex justify-between items-center">
494
+ <h2 class="text-2xl font-bold text-gray-800">Contacts</h2>
495
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
496
+ <i class="fas fa-plus mr-2"></i> Add Contact
497
+ </button>
498
+ </div>
499
+
500
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
501
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
502
+ <div class="relative w-64">
503
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
504
+ <i class="fas fa-search text-gray-400"></i>
505
+ </div>
506
+ <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...">
507
+ </div>
508
+
509
+ <div class="flex space-x-2">
510
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center">
511
+ <i class="fas fa-filter mr-2 text-gray-500"></i>
512
+ <span>Filter</span>
513
+ </button>
514
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center">
515
+ <i class="fas fa-sort mr-2 text-gray-500"></i>
516
+ <span>Sort</span>
517
+ </button>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="overflow-x-auto">
522
+ <table class="min-w-full divide-y divide-gray-200">
523
+ <thead class="bg-gray-50">
524
+ <tr>
525
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
526
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
527
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
528
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
529
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Contact</th>
530
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
531
+ </tr>
532
+ </thead>
533
+ <tbody class="bg-white divide-y divide-gray-200">
534
+ <tr class="hover:bg-gray-50">
535
+ <td class="px-6 py-4 whitespace-nowrap">
536
+ <div class="flex items-center">
537
+ <div class="contact-avatar bg-indigo-600 rounded-full mr-3">JD</div>
538
+ <div>
539
+ <div class="text-sm font-medium text-gray-900">John Doe</div>
540
+ <div class="text-sm text-gray-500">Sales Manager</div>
541
+ </div>
542
+ </div>
543
+ </td>
544
+ <td class="px-6 py-4 whitespace-nowrap">
545
+ <div class="text-sm text-gray-900">Acme Corporation</div>
546
+ </td>
547
+ <td class="px-6 py-4 whitespace-nowrap">
548
+ <div class="text-sm text-gray-900">john.doe@acme.com</div>
549
+ </td>
550
+ <td class="px-6 py-4 whitespace-nowrap">
551
+ <div class="text-sm text-gray-900">(555) 123-4567</div>
552
+ </td>
553
+ <td class="px-6 py-4 whitespace-nowrap">
554
+ <div class="text-sm text-gray-900">2 days ago</div>
555
+ </td>
556
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
557
+ <div class="flex justify-end space-x-2">
558
+ <button class="text-indigo-600 hover:text-indigo-900">
559
+ <i class="fas fa-eye"></i>
560
+ </button>
561
+ <button class="text-blue-600 hover:text-blue-900">
562
+ <i class="fas fa-edit"></i>
563
+ </button>
564
+ <button class="text-red-600 hover:text-red-900">
565
+ <i class="fas fa-trash"></i>
566
+ </button>
567
+ </div>
568
+ </td>
569
+ </tr>
570
+ <tr class="hover:bg-gray-50">
571
+ <td class="px-6 py-4 whitespace-nowrap">
572
+ <div class="flex items-center">
573
+ <div class="contact-avatar bg-green-600 rounded-full mr-3">SM</div>
574
+ <div>
575
+ <div class="text-sm font-medium text-gray-900">Sarah Miller</div>
576
+ <div class="text-sm text-gray-500">Marketing Director</div>
577
+ </div>
578
+ </div>
579
+ </td>
580
+ <td class="px-6 py-4 whitespace-nowrap">
581
+ <div class="text-sm text-gray-900">TechStart Inc.</div>
582
+ </td>
583
+ <td class="px-6 py-4 whitespace-nowrap">
584
+ <div class="text-sm text-gray-900">sarah.m@techstart.com</div>
585
+ </td>
586
+ <td class="px-6 py-4 whitespace-nowrap">
587
+ <div class="text-sm text-gray-900">(555) 987-6543</div>
588
+ </td>
589
+ <td class="px-6 py-4 whitespace-nowrap">
590
+ <div class="text-sm text-gray-900">1 week ago</div>
591
+ </td>
592
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
593
+ <div class="flex justify-end space-x-2">
594
+ <button class="text-indigo-600 hover:text-indigo-900">
595
+ <i class="fas fa-eye"></i>
596
+ </button>
597
+ <button class="text-blue-600 hover:text-blue-900">
598
+ <i class="fas fa-edit"></i>
599
+ </button>
600
+ <button class="text-red-600 hover:text-red-900">
601
+ <i class="fas fa-trash"></i>
602
+ </button>
603
+ </div>
604
+ </td>
605
+ </tr>
606
+ <tr class="hover:bg-gray-50">
607
+ <td class="px-6 py-4 whitespace-nowrap">
608
+ <div class="flex items-center">
609
+ <div class="contact-avatar bg-purple-600 rounded-full mr-3">RJ</div>
610
+ <div>
611
+ <div class="text-sm font-medium text-gray-900">Robert Johnson</div>
612
+ <div class="text-sm text-gray-500">CTO</div>
613
+ </div>
614
+ </div>
615
+ </td>
616
+ <td class="px-6 py-4 whitespace-nowrap">
617
+ <div class="text-sm text-gray-900">Global Solutions</div>
618
+ </td>
619
+ <td class="px-6 py-4 whitespace-nowrap">
620
+ <div class="text-sm text-gray-900">robert.j@global.com</div>
621
+ </td>
622
+ <td class="px-6 py-4 whitespace-nowrap">
623
+ <div class="text-sm text-gray-900">(555) 456-7890</div>
624
+ </td>
625
+ <td class="px-6 py-4 whitespace-nowrap">
626
+ <div class="text-sm text-gray-900">3 days ago</div>
627
+ </td>
628
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
629
+ <div class="flex justify-end space-x-2">
630
+ <button class="text-indigo-600 hover:text-indigo-900">
631
+ <i class="fas fa-eye"></i>
632
+ </button>
633
+ <button class="text-blue-600 hover:text-blue-900">
634
+ <i class="fas fa-edit"></i>
635
+ </button>
636
+ <button class="text-red-600 hover:text-red-900">
637
+ <i class="fas fa-trash"></i>
638
+ </button>
639
+ </div>
640
+ </td>
641
+ </tr>
642
+ <tr class="hover:bg-gray-50">
643
+ <td class="px-6 py-4 whitespace-nowrap">
644
+ <div class="flex items-center">
645
+ <div class="contact-avatar bg-yellow-600 rounded-full mr-3">EW</div>
646
+ <div>
647
+ <div class="text-sm font-medium text-gray-900">Emily Wilson</div>
648
+ <div class="text-sm text-gray-500">Product Manager</div>
649
+ </div>
650
+ </div>
651
+ </td>
652
+ <td class="px-6 py-4 whitespace-nowrap">
653
+ <div class="text-sm text-gray-900">Innovate Co.</div>
654
+ </td>
655
+ <td class="px-6 py-4 whitespace-nowrap">
656
+ <div class="text-sm text-gray-900">emily.w@innovate.com</div>
657
+ </td>
658
+ <td class="px-6 py-4 whitespace-nowrap">
659
+ <div class="text-sm text-gray-900">(555) 789-0123</div>
660
+ </td>
661
+ <td class="px-6 py-4 whitespace-nowrap">
662
+ <div class="text-sm text-gray-900">1 day ago</div>
663
+ </td>
664
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
665
+ <div class="flex justify-end space-x-2">
666
+ <button class="text-indigo-600 hover:text-indigo-900">
667
+ <i class="fas fa-eye"></i>
668
+ </button>
669
+ <button class="text-blue-600 hover:text-blue-900">
670
+ <i class="fas fa-edit"></i>
671
+ </button>
672
+ <button class="text-red-600 hover:text-red-900">
673
+ <i class="fas fa-trash"></i>
674
+ </button>
675
+ </div>
676
+ </td>
677
+ </tr>
678
+ <tr class="hover:bg-gray-50">
679
+ <td class="px-6 py-4 whitespace-nowrap">
680
+ <div class="flex items-center">
681
+ <div class="contact-avatar bg-red-600 rounded-full mr-3">MB</div>
682
+ <div>
683
+ <div class="text-sm font-medium text-gray-900">Michael Brown</div>
684
+ <div class="text-sm text-gray-500">CEO</div>
685
+ </div>
686
+ </div>
687
+ </td>
688
+ <td class="px-6 py-4 whitespace-nowrap">
689
+ <div class="text-sm text-gray-900">NextGen Tech</div>
690
+ </td>
691
+ <td class="px-6 py-4 whitespace-nowrap">
692
+ <div class="text-sm text-gray-900">michael.b@nextgen.com</div>
693
+ </td>
694
+ <td class="px-6 py-4 whitespace-nowrap">
695
+ <div class="text-sm text-gray-900">(555) 234-5678</div>
696
+ </td>
697
+ <td class="px-6 py-4 whitespace-nowrap">
698
+ <div class="text-sm text-gray-900">5 days ago</div>
699
+ </td>
700
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
701
+ <div class="flex justify-end space-x-2">
702
+ <button class="text-indigo-600 hover:text-indigo-900">
703
+ <i class="fas fa-eye"></i>
704
+ </button>
705
+ <button class="text-blue-600 hover:text-blue-900">
706
+ <i class="fas fa-edit"></i>
707
+ </button>
708
+ <button class="text-red-600 hover:text-red-900">
709
+ <i class="fas fa-trash"></i>
710
+ </button>
711
+ </div>
712
+ </td>
713
+ </tr>
714
+ </tbody>
715
+ </table>
716
+ </div>
717
+
718
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
719
+ <div class="text-sm text-gray-500">
720
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results
721
+ </div>
722
+ <div class="flex space-x-2">
723
+ <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">
724
+ Previous
725
+ </button>
726
+ <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">
727
+ 1
728
+ </button>
729
+ <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">
730
+ 2
731
+ </button>
732
+ <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">
733
+ 3
734
+ </button>
735
+ <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">
736
+ Next
737
+ </button>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </div>
742
+
743
+ <!-- Companies Screen -->
744
+ <div id="companies-screen" class="screen hidden">
745
+ <div class="mb-6 flex justify-between items-center">
746
+ <h2 class="text-2xl font-bold text-gray-800">Companies</h2>
747
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
748
+ <i class="fas fa-plus mr-2"></i> Add Company
749
+ </button>
750
+ </div>
751
+
752
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
753
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300">
754
+ <div class="p-6">
755
+ <div class="flex items-center mb-4">
756
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
757
+ <i class="fas fa-building text-indigo-600 text-xl"></i>
758
+ </div>
759
+ <div>
760
+ <h3 class="text-lg font-semibold text-gray-800">Acme Corporation</h3>
761
+ <p class="text-sm text-gray-500">Technology</p>
762
+ </div>
763
+ </div>
764
+ <div class="space-y-2">
765
+ <div class="flex items-center text-sm text-gray-600">
766
+ <i class="fas fa-users mr-2 text-gray-400"></i>
767
+ <span>24 contacts</span>
768
+ </div>
769
+ <div class="flex items-center text-sm text-gray-600">
770
+ <i class="fas fa-handshake mr-2 text-gray-400"></i>
771
+ <span>5 active deals</span>
772
+ </div>
773
+ <div class="flex items-center text-sm text-gray-600">
774
+ <i class="fas fa-dollar-sign mr-2 text-gray-400"></i>
775
+ <span>$124,500 pipeline</span>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2">
780
+ <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
781
+ View
782
+ </button>
783
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">
784
+ Edit
785
+ </button>
786
+ </div>
787
+ </div>
788
+
789
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300">
790
+ <div class="p-6">
791
+ <div class="flex items-center mb-4">
792
+ <div class="bg-blue-100 p-3 rounded-lg mr-4">
793
+ <i class="fas fa-building text-blue-600 text-xl"></i>
794
+ </div>
795
+ <div>
796
+ <h3 class="text-lg font-semibold text-gray-800">TechStart Inc.</h3>
797
+ <p class="text-sm text-gray-500">Software</p>
798
+ </div>
799
+ </div>
800
+ <div class="space-y-2">
801
+ <div class="flex items-center text-sm text-gray-600">
802
+ <i class="fas fa-users mr-2 text-gray-400"></i>
803
+ <span>18 contacts</span>
804
+ </div>
805
+ <div class="flex items-center text-sm text-gray-600">
806
+ <i class="fas fa-handshake mr-2 text-gray-400"></i>
807
+ <span>3 active deals</span>
808
+ </div>
809
+ <div class="flex items-center text-sm text-gray-600">
810
+ <i class="fas fa-dollar-sign mr-2 text-gray-400"></i>
811
+ <span>$87,000 pipeline</span>
812
+ </div>
813
+ </div>
814
+ </div>
815
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2">
816
+ <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
817
+ View
818
+ </button>
819
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">
820
+ Edit
821
+ </button>
822
+ </div>
823
+ </div>
824
+
825
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300">
826
+ <div class="p-6">
827
+ <div class="flex items-center mb-4">
828
+ <div class="bg-green-100 p-3 rounded-lg mr-4">
829
+ <i class="fas fa-building text-green-600 text-xl"></i>
830
+ </div>
831
+ <div>
832
+ <h3 class="text-lg font-semibold text-gray-800">Global Solutions</h3>
833
+ <p class="text-sm text-gray-500">Consulting</p>
834
+ </div>
835
+ </div>
836
+ <div class="space-y-2">
837
+ <div class="flex items-center text-sm text-gray-600">
838
+ <i class="fas fa-users mr-2 text-gray-400"></i>
839
+ <span>32 contacts</span>
840
+ </div>
841
+ <div class="flex items-center text-sm text-gray-600">
842
+ <i class="fas fa-handshake mr-2 text-gray-400"></i>
843
+ <span>7 active deals</span>
844
+ </div>
845
+ <div class="flex items-center text-sm text-gray-600">
846
+ <i class="fas fa-dollar-sign mr-2 text-gray-400"></i>
847
+ <span>$210,000 pipeline</span>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2">
852
+ <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
853
+ View
854
+ </button>
855
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">
856
+ Edit
857
+ </button>
858
+ </div>
859
+ </div>
860
+
861
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300">
862
+ <div class="p-6">
863
+ <div class="flex items-center mb-4">
864
+ <div class="bg-purple-100 p-3 rounded-lg mr-4">
865
+ <i class="fas fa-building text-purple-600 text-xl"></i>
866
+ </div>
867
+ <div>
868
+ <h3 class="text-lg font-semibold text-gray-800">Innovate Co.</h3>
869
+ <p class="text-sm text-gray-500">Design</p>
870
+ </div>
871
+ </div>
872
+ <div class="space-y-2">
873
+ <div class="flex items-center text-sm text-gray-600">
874
+ <i class="fas fa-users mr-2 text-gray-400"></i>
875
+ <span>12 contacts</span>
876
+ </div>
877
+ <div class="flex items-center text-sm text-gray-600">
878
+ <i class="fas fa-handshake mr-2 text-gray-400"></i>
879
+ <span>2 active deals</span>
880
+ </div>
881
+ <div class="flex items-center text-sm text-gray-600">
882
+ <i class="fas fa-dollar-sign mr-2 text-gray-400"></i>
883
+ <span>$45,000 pipeline</span>
884
+ </div>
885
+ </div>
886
+ </div>
887
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2">
888
+ <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
889
+ View
890
+ </button>
891
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">
892
+ Edit
893
+ </button>
894
+ </div>
895
+ </div>
896
+
897
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300">
898
+ <div class="p-6">
899
+ <div class="flex items-center mb-4">
900
+ <div class="bg-yellow-100 p-3 rounded-lg mr-4">
901
+ <i class="fas fa-building text-yellow-600 text-xl"></i>
902
+ </div>
903
+ <div>
904
+ <h3 class="text-lg font-semibold text-gray-800">NextGen Tech</h3>
905
+ <p class="text-sm text-gray-500">AI</p>
906
+ </div>
907
+ </div>
908
+ <div class="space-y-2">
909
+ <div class="flex items-center text-sm text-gray-600">
910
+ <i class="fas fa-users mr-2 text-gray-400"></i>
911
+ <span>8 contacts</span>
912
+ </div>
913
+ <div class="flex items-center text-sm text-gray-600">
914
+ <i class="fas fa-handshake mr-2 text-gray-400"></i>
915
+ <span>1 active deal</span>
916
+ </div>
917
+ <div class="flex items-center text-sm text-gray-600">
918
+ <i class="fas fa-dollar-sign mr-2 text-gray-400"></i>
919
+ <span>$32,000 pipeline</span>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-end space-x-2">
924
+ <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">
925
+ View
926
+ </button>
927
+ <button class="text-blue-600 hover:text-blue-900 text-sm font-medium">
928
+ Edit
929
+ </button>
930
+ </div>
931
+ </div>
932
+
933
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition duration-300">
934
+ <div class="p-6 flex flex-col items-center justify-center h-full">
935
+ <div class="bg-gray-100 p-4 rounded-full mb-3">
936
+ <i class="fas fa-plus text-gray-400 text-xl"></i>
937
+ </div>
938
+ <h3 class="text-lg font-semibold text-gray-800 mb-1">Add New Company</h3>
939
+ <p class="text-sm text-gray-500 text-center">Click here to add a new company to your CRM</p>
940
+ </div>
941
+ </div>
942
+ </div>
943
+ </div>
944
+
945
+ <!-- Deals Screen -->
946
+ <div id="deals-screen" class="screen hidden">
947
+ <div class="mb-6 flex justify-between items-center">
948
+ <h2 class="text-2xl font-bold text-gray-800">Deals</h2>
949
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
950
+ <i class="fas fa-plus mr-2"></i> Add Deal
951
+ </button>
952
+ </div>
953
+
954
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
955
+ <div class="border-b border-gray-200">
956
+ <nav class="flex -mb-px">
957
+ <button class="tab-active py-4 px-6 text-sm font-medium text-center border-b-2 border-indigo-500">
958
+ All Deals
959
+ </button>
960
+ <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">
961
+ My Deals
962
+ </button>
963
+ <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">
964
+ Hot
965
+ </button>
966
+ <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">
967
+ Won
968
+ </button>
969
+ <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">
970
+ Lost
971
+ </button>
972
+ </nav>
973
+ </div>
974
+
975
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
976
+ <div class="relative w-64">
977
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
978
+ <i class="fas fa-search text-gray-400"></i>
979
+ </div>
980
+ <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...">
981
+ </div>
982
+
983
+ <div class="flex space-x-2">
984
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center">
985
+ <i class="fas fa-filter mr-2 text-gray-500"></i>
986
+ <span>Filter</span>
987
+ </button>
988
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center">
989
+ <i class="fas fa-sort mr-2 text-gray-500"></i>
990
+ <span>Sort</span>
991
+ </button>
992
+ </div>
993
+ </div>
994
+
995
+ <div class="overflow-x-auto">
996
+ <table class="min-w-full divide-y divide-gray-200">
997
+ <thead class="bg-gray-50">
998
+ <tr>
999
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deal Name</th>
1000
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
1001
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
1002
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stage</th>
1003
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expected Close</th>
1004
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Owner</th>
1005
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
1006
+ </tr>
1007
+ </thead>
1008
+ <tbody class="bg-white divide-y divide-gray-200">
1009
+ <tr class="hover:bg-gray-50">
1010
+ <td class="px-6 py-4 whitespace-nowrap">
1011
+ <div class="text-sm font-medium text-gray-900">Enterprise Software</div>
1012
+ </td>
1013
+ <td class="px-6 py-4 whitespace-nowrap">
1014
+ <div class="text-sm text-gray-900">Acme Corporation</div>
1015
+ </td>
1016
+ <td class="px-6 py-4 whitespace-nowrap">
1017
+ <div class="text-sm font-bold text-gray-900">$24,000</div>
1018
+ </td>
1019
+ <td class="px-6 py-4 whitespace-nowrap">
1020
+ <div class="flex items-center">
1021
+ <span class="deal-stage bg-indigo-500"></span>
1022
+ <span class="text-sm text-gray-900">Proposal</span>
1023
+ </div>
1024
+ </td>
1025
+ <td class="px-6 py-4 whitespace-nowrap">
1026
+ <div class="text-sm text-gray-900">May 15, 2023</div>
1027
+ </td>
1028
+ <td class="px-6 py-4 whitespace-nowrap">
1029
+ <div class="flex items-center">
1030
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-6 h-6 rounded-full mr-2" alt="User">
1031
+ <span class="text-sm text-gray-900">Sarah J.</span>
1032
+ </div>
1033
+ </td>
1034
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1035
+ <div class="flex justify-end space-x-2">
1036
+ <button class="text-indigo-600 hover:text-indigo-900">
1037
+ <i class="fas fa-eye"></i>
1038
+ </button>
1039
+ <button class="text-blue-600 hover:text-blue-900">
1040
+ <i class="fas fa-edit"></i>
1041
+ </button>
1042
+ </div>
1043
+ </td>
1044
+ </tr>
1045
+ <tr class="hover:bg-gray-50">
1046
+ <td class="px-6 py-4 whitespace-nowrap">
1047
+ <div class="text-sm font-medium text-gray-900">Marketing Services</div>
1048
+ </td>
1049
+ <td class="px-6 py-4 whitespace-nowrap">
1050
+ <div class="text-sm text-gray-900">TechStart Inc.</div>
1051
+ </td>
1052
+ <td class="px-6 py-4 whitespace-nowrap">
1053
+ <div class="text-sm font-bold text-gray-900">$18,500</div>
1054
+ </td>
1055
+ <td class="px-6 py-4 whitespace-nowrap">
1056
+ <div class="flex items-center">
1057
+ <span class="deal-stage bg-blue-500"></span>
1058
+ <span class="text-sm text-gray-900">Negotiation</span>
1059
+ </div>
1060
+ </td>
1061
+ <td class="px-6 py-4 whitespace-nowrap">
1062
+ <div class="text-sm text-gray-900">June 1, 2023</div>
1063
+ </td>
1064
+ <td class="px-6 py-4 whitespace-nowrap">
1065
+ <div class="flex items-center">
1066
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-6 h-6 rounded-full mr-2" alt="User">
1067
+ <span class="text-sm text-gray-900">Mike T.</span>
1068
+ </div>
1069
+ </td>
1070
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1071
+ <div class="flex justify-end space-x-2">
1072
+ <button class="text-indigo-600 hover:text-indigo-900">
1073
+ <i class="fas fa-eye"></i>
1074
+ </button>
1075
+ <button class="text-blue-600 hover:text-blue-900">
1076
+ <i class="fas fa-edit"></i>
1077
+ </button>
1078
+ </div>
1079
+ </td>
1080
+ </tr>
1081
+ <tr class="hover:bg-gray-50">
1082
+ <td class="px-6 py-4 whitespace-nowrap">
1083
+ <div class="text-sm font-medium text-gray-900">Consulting Project</div>
1084
+ </td>
1085
+ <td class="px-6 py-4 whitespace-nowrap">
1086
+ <div class="text-sm text-gray-900">Global Solutions</div>
1087
+ </td>
1088
+ <td class="px-6 py-4 whitespace-nowrap">
1089
+ <div class="text-sm font-bold text-gray-900">$32,000</div>
1090
+ </td>
1091
+ <td class="px-6 py-4 whitespace-nowrap">
1092
+ <div class="flex items-center">
1093
+ <span class="deal-stage bg-green-500"></span>
1094
+ <span class="text-sm text-gray-900">Discovery</span>
1095
+ </div>
1096
+ </td>
1097
+ <td class="px-6 py-4 whitespace-nowrap">
1098
+ <div class="text-sm text-gray-900">June 15, 2023</div>
1099
+ </td>
1100
+ <td class="px-6 py-4 whitespace-nowrap">
1101
+ <div class="flex items-center">
1102
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-6 h-6 rounded-full mr-2" alt="User">
1103
+ <span class="text-sm text-gray-900">Lisa M.</span>
1104
+ </div>
1105
+ </td>
1106
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1107
+ <div class="flex justify-end space-x-2">
1108
+ <button class="text-indigo-600 hover:text-indigo-900">
1109
+ <i class="fas fa-eye"></i>
1110
+ </button>
1111
+ <button class="text-blue-600 hover:text-blue-900">
1112
+ <i class="fas fa-edit"></i>
1113
+ </button>
1114
+ </div>
1115
+ </td>
1116
+ </tr>
1117
+ <tr class="hover:bg-gray-50">
1118
+ <td class="px-6 py-4 whitespace-nowrap">
1119
+ <div class="text-sm font-medium text-gray-900">Website Redesign</div>
1120
+ </td>
1121
+ <td class="px-6 py-4 whitespace-nowrap">
1122
+ <div class="text-sm text-gray-900">Innovate Co.</div>
1123
+ </td>
1124
+ <td class="px-6 py-4 whitespace-nowrap">
1125
+ <div class="text-sm font-bold text-gray-900">$12,500</div>
1126
+ </td>
1127
+ <td class="px-6 py-4 whitespace-nowrap">
1128
+ <div class="flex items-center">
1129
+ <span class="deal-stage bg-yellow-500"></span>
1130
+ <span class="text-sm text-gray-900">Qualification</span>
1131
+ </div>
1132
+ </td>
1133
+ <td class="px-6 py-4 whitespace-nowrap">
1134
+ <div class="text-sm text-gray-900">May 30, 2023</div>
1135
+ </td>
1136
+ <td class="px-6 py-4 whitespace-nowrap">
1137
+ <div class="flex items-center">
1138
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-6 h-6 rounded-full mr-2" alt="User">
1139
+ <span class="text-sm text-gray-900">David K.</span>
1140
+ </div>
1141
+ </td>
1142
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1143
+ <div class="flex justify-end space-x-2">
1144
+ <button class="text-indigo-600 hover:text-indigo-900">
1145
+ <i class="fas fa-eye"></i>
1146
+ </button>
1147
+ <button class="text-blue-600 hover:text-blue-900">
1148
+ <i class="fas fa-edit"></i>
1149
+ </button>
1150
+ </div>
1151
+ </td>
1152
+ </tr>
1153
+ <tr class="hover:bg-gray-50">
1154
+ <td class="px-6 py-4 whitespace-nowrap">
1155
+ <div class="text-sm font-medium text-gray-900">AI Implementation</div>
1156
+ </td>
1157
+ <td class="px-6 py-4 whitespace-nowrap">
1158
+ <div class="text-sm text-gray-900">NextGen Tech</div>
1159
+ </td>
1160
+ <td class="px-6 py-4 whitespace-nowrap">
1161
+ <div class="text-sm font-bold text-gray-900">$37,500</div>
1162
+ </td>
1163
+ <td class="px-6 py-4 whitespace-nowrap">
1164
+ <div class="flex items-center">
1165
+ <span class="deal-stage bg-purple-500"></span>
1166
+ <span class="text-sm text-gray-900">Closed Won</span>
1167
+ </div>
1168
+ </td>
1169
+ <td class="px-6 py-4 whitespace-nowrap">
1170
+ <div class="text-sm text-gray-900">May 5, 2023</div>
1171
+ </td>
1172
+ <td class="px-6 py-4 whitespace-nowrap">
1173
+ <div class="flex items-center">
1174
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-6 h-6 rounded-full mr-2" alt="User">
1175
+ <span class="text-sm text-gray-900">Sarah J.</span>
1176
+ </div>
1177
+ </td>
1178
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
1179
+ <div class="flex justify-end space-x-2">
1180
+ <button class="text-indigo-600 hover:text-indigo-900">
1181
+ <i class="fas fa-eye"></i>
1182
+ </button>
1183
+ <button class="text-blue-600 hover:text-blue-900">
1184
+ <i class="fas fa-edit"></i>
1185
+ </button>
1186
+ </div>
1187
+ </td>
1188
+ </tr>
1189
+ </tbody>
1190
+ </table>
1191
+ </div>
1192
+
1193
+ <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
1194
+ <div class="text-sm text-gray-500">
1195
+ Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">18</span> results
1196
+ </div>
1197
+ <div class="flex space-x-2">
1198
+ <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">
1199
+ Previous
1200
+ </button>
1201
+ <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">
1202
+ 1
1203
+ </button>
1204
+ <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">
1205
+ 2
1206
+ </button>
1207
+ <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">
1208
+ 3
1209
+ </button>
1210
+ <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">
1211
+ Next
1212
+ </button>
1213
+ </div>
1214
+ </div>
1215
+ </div>
1216
+ </div>
1217
+
1218
+ <!-- Tasks Screen -->
1219
+ <div id="tasks-screen" class="screen hidden">
1220
+ <div class="mb-6 flex justify-between items-center">
1221
+ <h2 class="text-2xl font-bold text-gray-800">Tasks</h2>
1222
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
1223
+ <i class="fas fa-plus mr-2"></i> Add Task
1224
+ </button>
1225
+ </div>
1226
+
1227
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
1228
+ <div class="border-b border-gray-200">
1229
+ <nav class="flex -mb-px">
1230
+ <button class="tab-active py-4 px-6 text-sm font-medium text-center border-b-2 border-indigo-500">
1231
+ All Tasks
1232
+ </button>
1233
+ <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">
1234
+ Today
1235
+ </button>
1236
+ <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">
1237
+ Upcoming
1238
+ </button>
1239
+ <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">
1240
+ Overdue
1241
+ </button>
1242
+ <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">
1243
+ Completed
1244
+ </button>
1245
+ </nav>
1246
+ </div>
1247
+
1248
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
1249
+ <div class="relative w-64">
1250
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
1251
+ <i class="fas fa-search text-gray-400"></i>
1252
+ </div>
1253
+ <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...">
1254
+ </div>
1255
+
1256
+ <div class="flex space-x-2">
1257
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center">
1258
+ <i class="fas fa-filter mr-2 text-gray-500"></i>
1259
+ <span>Filter</span>
1260
+ </button>
1261
+ <button class="px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center">
1262
+ <i class="fas fa-sort mr-2 text-gray-500"></i>
1263
+ <span>Sort</span>
1264
+ </button>
1265
+ </div>
1266
+ </div>
1267
+
1268
+ <div class="divide-y divide-gray-200">
1269
+ <div class="p-4 hover:bg-gray-50">
1270
+ <div class="flex items-center justify-between">
1271
+ <div class="flex items-center">
1272
+ <input type="checkbox" class="task-checkbox rounded text-indigo-600 focus:ring-indigo-500">
1273
+ <label class="task-label ml-3">
1274
+ <p class="text-sm font-medium text-gray-800">Follow up with Acme Corp about proposal</p>
1275
+ <p class="text-xs text-gray-500">Due tomorrow</p>
1276
+ </label>
1277
+ </div>
1278
+ <div class="flex items-center space-x-3">
1279
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Deal</span>
1280
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-6 h-6 rounded-full" alt="User">
1281
+ </div>
1282
+ </div>
1283
+ </div>
1284
+
1285
+ <div class="p-4 hover:bg-gray-50">
1286
+ <div class="flex items-center justify-between">
1287
+ <div class="flex items-center">
1288
+ <input type="checkbox" class="task-checkbox rounded text-indigo-600 focus:ring-indigo-500">
1289
+ <label class="task-label ml-3">
1290
+ <p class="text-sm font-medium text-gray-800">Prepare quarterly sales report</p>
1291
+ <p class="text-xs text-gray-500">Due in 2 days</p>
1292
+ </label>
1293
+ </div>
1294
+ <div class="flex items-center space-x-3">
1295
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Report</span>
1296
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-6 h-6 rounded-full" alt="User">
1297
+ </div>
1298
+ </div>
1299
+ </div>
1300
+
1301
+ <div class="p-4 hover:bg-gray-50">
1302
+ <div class="flex items-center justify-between">
1303
+ <div class="flex items-center">
1304
+ <input type="checkbox" class="task-checkbox rounded text-indigo-600 focus:ring-indigo-500">
1305
+ <label class="task-label ml-3">
1306
+ <p class="text-sm font-medium text-gray-800">Schedule meeting with TechStart team</p>
1307
+ <p class="text-xs text-gray-500">Due today</p>
1308
+ </label>
1309
+ </div>
1310
+ <div class="flex items-center space-x-3">
1311
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Meeting</span>
1312
+ <img src="https://random
1313
+ </html>