Hugging Face's logo

Spaces:
jcarnel
/
projects256
Running

App Files Community
jcarnel commited on
Commit
5038186
·
verified ·
1 Parent(s): 940ac0a

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +543 -584
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,19 +3,23 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Truism Marketplace - Dashboard</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
  <script>
10
  tailwind.config = {
11
  theme: {
12
  extend: {
13
  colors: {
14
- truismPrimary: '#1F7349',
15
- truismSecondary: '#F9A51A',
16
- truismDark: '#0D4D2B',
17
- truismLight: '#E8F3EC',
18
- truismAccent: '#2E8540',
 
 
 
19
  }
20
  }
21
  }
@@ -27,97 +31,116 @@
27
  }
28
 
29
  .active-tab {
30
- background-color: #E8F3EC;
31
- color: #1F7349;
32
- border-left: 4px solid #F9A51A;
33
  }
34
 
35
  .transition-smooth {
36
  transition: all 0.3s ease-in-out;
37
  }
38
 
39
- .order-status-pending {
40
- background-color: #FEF3C7;
41
- color: #92400E;
42
  }
43
 
44
- .order-status-shipped {
45
- background-color: #D1FAE5;
46
- color: #065F46;
47
  }
48
 
49
- .order-status-delivered {
50
- background-color: #E0F2FE;
51
- color: #0369A1;
52
  }
53
 
54
- .order-status-cancelled {
55
- background-color: #FEE2E2;
56
- color: #B91C1C;
57
  }
58
-
59
- /* Custom scrollbar */
60
- ::-webkit-scrollbar {
61
- width: 8px;
62
- }
63
- ::-webkit-scrollbar-track {
64
  background: #f1f1f1;
65
  }
66
- ::-webkit-scrollbar-thumb {
67
- background: #1F7349;
68
  border-radius: 4px;
69
  }
70
- ::-webkit-scrollbar-thumb:hover {
71
- background: #0D4D2B;
72
- }
73
  </style>
74
  </head>
75
  <body class="font-sans bg-gray-50">
76
- <!-- Dashboard Navigation -->
77
  <div class="flex">
78
  <!-- Sidebar -->
79
  <div class="bg-white shadow-md w-64 fixed dashboard-nav">
80
  <div class="p-4 border-b border-gray-200">
81
- <img src="https://truismhl.com/wp-content/uploads/2023/05/logo.png" alt="Truism Logo" class="h-10">
 
82
  </div>
83
  <div class="p-4">
84
  <div class="flex items-center mb-6">
85
- <div class="w-12 h-12 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold mr-3">JD</div>
 
 
86
  <div>
87
- <p class="font-medium">John Doe</p>
88
- <p class="text-sm text-gray-500">Buyer Account</p>
89
  </div>
90
  </div>
91
 
92
  <div class="mb-8">
93
- <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</p>
94
  <a href="#" class="block py-2 px-3 mb-1 rounded active-tab">
95
  <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
96
  </a>
97
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
98
- <i class="fas fa-shopping-cart mr-2"></i> Orders
99
  </a>
100
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
101
- <i class="fas fa-heart mr-2"></i> Wishlist
102
  </a>
103
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
104
- <i class="fas fa-bell mr-2"></i> Notifications
105
  </a>
106
  </div>
107
 
108
  <div class="mb-8">
109
- <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Account</p>
110
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
111
- <i class="fas fa-user mr-2"></i> Profile
112
  </a>
113
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
114
- <i class="fas fa-lock mr-2"></i> Security
115
  </a>
116
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
117
- <i class="fas fa-credit-card mr-2"></i> Payment Methods
118
  </a>
119
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
120
- <i class="fas fa-map-marker-alt mr-2"></i> Addresses
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  </a>
122
  </div>
123
 
@@ -136,23 +159,25 @@
136
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
137
  <div class="flex justify-between h-16 items-center">
138
  <div class="flex items-center">
139
- <h1 class="text-xl font-semibold text-gray-900">Buyer Dashboard</h1>
140
  </div>
141
  <div class="flex items-center space-x-4">
142
- <button class="relative text-gray-600 hover:text-truismPrimary">
 
 
 
 
 
143
  <i class="fas fa-bell text-xl"></i>
144
- <span class="absolute -top-1 -right-1 bg-truismSecondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>
145
  </button>
146
  <div class="relative">
147
  <button onclick="toggleProfileDropdown()" class="flex items-center text-sm rounded-full focus:outline-none">
148
  <span class="sr-only">Open user menu</span>
149
- <div class="w-8 h-8 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">JD</div>
 
 
150
  </button>
151
- <div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 z-50">
152
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
153
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
154
- <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
155
- </div>
156
  </div>
157
  </div>
158
  </div>
@@ -161,621 +186,369 @@
161
 
162
  <!-- Dashboard Content -->
163
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
164
- <!-- Stats Cards -->
165
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
166
  <div class="bg-white rounded-lg shadow p-6">
167
  <div class="flex items-center">
168
- <div class="p-3 rounded-full bg-truismLight text-truismPrimary mr-4">
169
- <i class="fas fa-shopping-cart"></i>
170
  </div>
171
  <div>
172
- <p class="text-sm text-gray-500">Total Orders</p>
173
- <p class="text-2xl font-bold">24</p>
 
174
  </div>
175
  </div>
176
  </div>
177
  <div class="bg-white rounded-lg shadow p-6">
178
  <div class="flex items-center">
179
  <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
180
- <i class="fas fa-truck"></i>
181
  </div>
182
  <div>
183
- <p class="text-sm text-gray-500">Pending Orders</p>
184
- <p class="text-2xl font-bold">5</p>
 
185
  </div>
186
  </div>
187
  </div>
188
  <div class="bg-white rounded-lg shadow p-6">
189
  <div class="flex items-center">
190
  <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
191
- <i class="fas fa-check-circle"></i>
192
  </div>
193
  <div>
194
- <p class="text-sm text-gray-500">Completed Orders</p>
195
- <p class="text-2xl font-bold">18</p>
 
196
  </div>
197
  </div>
198
  </div>
199
  <div class="bg-white rounded-lg shadow p-6">
200
  <div class="flex items-center">
201
  <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
202
- <i class="fas fa-heart"></i>
203
  </div>
204
  <div>
205
- <p class="text-sm text-gray-500">Wishlist Items</p>
206
- <p class="text-2xl font-bold">7</p>
 
207
  </div>
208
  </div>
209
  </div>
210
  </div>
211
 
212
- <!-- Recent Orders -->
213
- <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
214
- <div class="px-6 py-4 border-b border-gray-200">
215
- <div class="flex items-center justify-between">
216
- <h2 class="text-lg font-semibold text-gray-900">Recent Orders</h2>
217
- <a href="#" class="text-sm font-medium text-truismPrimary hover:text-truismDark">View All</a>
 
 
 
218
  </div>
219
  </div>
220
- <div class="divide-y divide-gray-200">
221
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
222
- <div class="flex items-center justify-between">
223
- <div class="flex items-center">
224
- <div class="mr-4">
225
- <span class="order-status-pending px-2 py-1 text-xs font-medium rounded-full">Pending</span>
226
- </div>
227
- <div>
228
- <p class="font-medium">Order #TRU-2023-0012</p>
229
- <p class="text-sm text-gray-500">Premium Pigeon Peas (10kg)</p>
230
- </div>
231
- </div>
232
- <div class="text-right">
233
- <p class="font-medium">$25.00</p>
234
- <p class="text-sm text-gray-500">Placed on 15 Jun 2023</p>
235
- </div>
236
- </div>
237
  </div>
238
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
239
- <div class="flex items-center justify-between">
240
- <div class="flex items-center">
241
- <div class="mr-4">
242
- <span class="order-status-shipped px-2 py-1 text-xs font-medium rounded-full">Shipped</span>
243
- </div>
244
- <div>
245
- <p class="font-medium">Order #TRU-2023-0011</p>
246
- <p class="text-sm text-gray-500">Organic Turmeric Powder (5kg)</p>
247
- </div>
248
  </div>
249
- <div class="text-right">
250
- <p class="font-medium">$26.00</p>
251
- <p class="text-sm text-gray-500">Placed on 12 Jun 2023</p>
 
252
  </div>
253
- </div>
254
- </div>
255
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
256
- <div class="flex items-center justify-between">
257
- <div class="flex items-center">
258
- <div class="mr-4">
259
- <span class="order-status-delivered px-2 py-1 text-xs font-medium rounded-full">Delivered</span>
260
- </div>
261
- <div>
262
- <p class="font-medium">Order #TRU-2023-0010</p>
263
- <p class="text-sm text-gray-500">White Sesame Seeds (15kg)</p>
264
- </div>
265
- </div>
266
- <div class="text-right">
267
- <p class="font-medium">$56.25</p>
268
- <p class="text-sm text-gray-500">Placed on 8 Jun 2023</p>
269
  </div>
270
  </div>
 
271
  </div>
272
  </div>
273
  </div>
274
 
275
- <!-- Recommended Products -->
276
- <div class="bg-white rounded-lg shadow overflow-hidden">
277
- <div class="px-6 py-4 border-b border-gray-200">
278
- <div class="flex items-center justify-between">
279
- <h2 class="text-lg font-semibold text-gray-900">Recommended Products</h2>
280
- <a href="#" class="text-sm font-medium text-truismPrimary hover:text-truismDark">Browse All</a>
281
- </div>
282
- </div>
283
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-6">
284
- <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
285
- <div class="relative">
286
- <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Green Grams" class="w-full h-40 object-cover">
287
- <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
288
- <i class="far fa-heart text-xl"></i>
289
- </button>
290
  </div>
291
- <div class="p-4">
292
- <h3 class="font-medium text-gray-900 mb-1">Green Grams (Whole)</h3>
293
- <p class="text-truismPrimary font-bold mb-2">$2.80/kg</p>
294
- <div class="flex justify-between items-center">
295
- <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
296
- Add to Cart
297
- </button>
298
- <div class="text-truismSecondary text-sm">
299
- <i class="fas fa-star"></i>
300
- <i class="fas fa-star"></i>
301
- <i class="fas fa-star"></i>
302
- <i class="fas fa-star"></i>
303
- <i class="fas fa-star-half-alt"></i>
 
 
 
304
  </div>
305
  </div>
306
  </div>
307
- </div>
308
- <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
309
- <div class="relative">
310
- <img src="https://images.unsplash.com/photo-1603048719537-93a64b424f0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chili Powder" class="w-full h-40 object-cover">
311
- <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
312
- <i class="far fa-heart text-xl"></i>
313
- </button>
314
- </div>
315
- <div class="p-4">
316
- <h3 class="font-medium text-gray-900 mb-1">Chili Powder</h3>
317
- <p class="text-truismPrimary font-bold mb-2">$6.40/kg</p>
318
- <div class="flex justify-between items-center">
319
- <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
320
- Add to Cart
321
- </button>
322
- <div class="text-truismSecondary text-sm">
323
- <i class="fas fa-star"></i>
324
- <i class="fas fa-star"></i>
325
- <i class="fas fa-star"></i>
326
- <i class="fas fa-star"></i>
327
- <i class="fas fa-star"></i>
328
  </div>
329
  </div>
330
  </div>
331
- </div>
332
- <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
333
- <div class="relative">
334
- <img src="https://images.unsplash.com/photo-1594282486555-1b5c6e0e63f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Sunflower Seeds" class="w-full h-40 object-cover">
335
- <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
336
- <i class="far fa-heart text-xl"></i>
337
- </button>
338
- </div>
339
- <div class="p-4">
340
- <h3 class="font-medium text-gray-900 mb-1">Sunflower Seeds</h3>
341
- <p class="text-truismPrimary font-bold mb-2">$4.20/kg</p>
342
- <div class="flex justify-between items-center">
343
- <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
344
- Add to Cart
345
- </button>
346
- <div class="text-truismSecondary text-sm">
347
- <i class="fas fa-star"></i>
348
- <i class="fas fa-star"></i>
349
- <i class="fas fa-star"></i>
350
- <i class="fas fa-star"></i>
351
- <i class="far fa-star"></i>
352
  </div>
353
  </div>
354
  </div>
355
- </div>
356
- <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
357
- <div class="relative">
358
- <img src="https://images.unsplash.com/photo-1603569283847-aa6f0c5d9d5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pigeon Peas" class="w-full h-40 object-cover">
359
- <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
360
- <i class="far fa-heart text-xl"></i>
361
- </button>
362
- </div>
363
- <div class="p-4">
364
- <h3 class="font-medium text-gray-900 mb-1">Premium Pigeon Peas</h3>
365
- <p class="text-truismPrimary font-bold mb-2">$2.50/kg</p>
366
- <div class="flex justify-between items-center">
367
- <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
368
- Add to Cart
369
- </button>
370
- <div class="text-truismSecondary text-sm">
371
- <i class="fas fa-star"></i>
372
- <i class="fas fa-star"></i>
373
- <i class="fas fa-star"></i>
374
- <i class="fas fa-star"></i>
375
- <i class="fas fa-star-half-alt"></i>
376
  </div>
377
  </div>
378
  </div>
379
  </div>
380
  </div>
381
- </div>
382
- </main>
383
- </div>
384
- </div>
385
-
386
- <!-- Seller Dashboard (Hidden by default) -->
387
- <div id="sellerDashboard" class="hidden">
388
- <div class="flex">
389
- <!-- Sidebar -->
390
- <div class="bg-white shadow-md w-64 fixed dashboard-nav">
391
- <div class="p-4 border-b border-gray-200">
392
- <img src="https://truismhl.com/wp-content/uploads/2023/05/logo.png" alt="Truism Logo" class="h-10">
393
- </div>
394
- <div class="p-4">
395
- <div class="flex items-center mb-6">
396
- <div class="w-12 h-12 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold mr-3">MF</div>
397
- <div>
398
- <p class="font-medium">Mary Farmer</p>
399
- <p class="text-sm text-gray-500">Seller Account</p>
400
- </div>
401
- </div>
402
-
403
- <div class="mb-8">
404
- <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</p>
405
- <a href="#" class="block py-2 px-3 mb-1 rounded active-tab">
406
- <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
407
- </a>
408
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
409
- <i class="fas fa-box-open mr-2"></i> Products
410
- </a>
411
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
412
- <i class="fas fa-shopping-cart mr-2"></i> Orders
413
- </a>
414
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
415
- <i class="fas fa-chart-line mr-2"></i> Analytics
416
- </a>
417
- </div>
418
 
419
- <div class="mb-8">
420
- <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Management</p>
421
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
422
- <i class="fas fa-users mr-2"></i> Customers
423
- </a>
424
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
425
- <i class="fas fa-comments mr-2"></i> Reviews
426
- </a>
427
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
428
- <i class="fas fa-truck mr-2"></i> Shipping
429
- </a>
430
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
431
- <i class="fas fa-percentage mr-2"></i> Discounts
432
- </a>
433
- </div>
434
-
435
- <div class="mb-8">
436
- <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Account</p>
437
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
438
- <i class="fas fa-store mr-2"></i> Store Profile
439
- </a>
440
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
441
- <i class="fas fa-wallet mr-2"></i> Payouts
442
- </a>
443
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
444
- <i class="fas fa-cog mr-2"></i> Settings
445
- </a>
446
- </div>
447
-
448
- <div>
449
- <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100 text-red-500">
450
- <i class="fas fa-sign-out-alt mr-2"></i> Logout
451
- </a>
452
- </div>
453
- </div>
454
- </div>
455
-
456
- <!-- Main Content -->
457
- <div class="flex-1 ml-64">
458
- <!-- Top Navigation -->
459
- <nav class="bg-white shadow-sm">
460
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
461
- <div class="flex justify-between h-16 items-center">
462
- <div class="flex items-center">
463
- <h1 class="text-xl font-semibold text-gray-900">Seller Dashboard</h1>
464
- </div>
465
- <div class="flex items-center space-x-4">
466
- <button class="relative text-gray-600 hover:text-truismPrimary">
467
- <i class="fas fa-bell text-xl"></i>
468
- <span class="absolute -top-1 -right-1 bg-truismSecondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">5</span>
469
- </button>
470
- <div class="relative">
471
- <button onclick="toggleProfileDropdown()" class="flex items-center text-sm rounded-full focus:outline-none">
472
- <span class="sr-only">Open user menu</span>
473
- <div class="w-8 h-8 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">MF</div>
474
- </button>
475
- </div>
476
- </div>
477
  </div>
478
- </div>
479
- </nav>
480
-
481
- <!-- Dashboard Content -->
482
- <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
483
- <!-- Stats Cards -->
484
- <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
485
- <div class="bg-white rounded-lg shadow p-6">
486
- <div class="flex items-center">
487
- <div class="p-3 rounded-full bg-truismLight text-truismPrimary mr-4">
488
- <i class="fas fa-money-bill-wave"></i>
489
- </div>
490
  <div>
491
- <p class="text-sm text-gray-500">Total Revenue</p>
492
- <p class="text-2xl font-bold">$1,245.80</p>
493
  </div>
 
494
  </div>
495
- </div>
496
- <div class="bg-white rounded-lg shadow p-6">
497
- <div class="flex items-center">
498
- <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
499
- <i class="fas fa-shopping-cart"></i>
500
  </div>
501
- <div>
502
- <p class="text-sm text-gray-500">Total Orders</p>
503
- <p class="text-2xl font-bold">42</p>
504
  </div>
505
- </div>
506
- </div>
507
- <div class="bg-white rounded-lg shadow p-6">
508
- <div class="flex items-center">
509
- <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
510
- <i class="fas fa-box-open"></i>
511
  </div>
512
- <div>
513
- <p class="text-sm text-gray-500">Products Listed</p>
514
- <p class="text-2xl font-bold">8</p>
515
  </div>
516
- </div>
517
- </div>
518
- <div class="bg-white rounded-lg shadow p-6">
519
- <div class="flex items-center">
520
- <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
521
- <i class="fas fa-star"></i>
522
  </div>
523
- <div>
524
- <p class="text-sm text-gray-500">Average Rating</p>
525
- <p class="text-2xl font-bold">4.6</p>
526
  </div>
527
  </div>
528
  </div>
529
  </div>
 
530
 
531
- <!-- Recent Orders -->
532
- <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
 
 
533
  <div class="px-6 py-4 border-b border-gray-200">
534
  <div class="flex items-center justify-between">
535
- <h2 class="text-lg font-semibold text-gray-900">Recent Orders</h2>
536
- <a href="#" class="text-sm font-medium text-truismPrimary hover:text-truismDark">View All</a>
537
  </div>
538
  </div>
539
- <div class="overflow-x-auto">
540
- <table class="min-w-full divide-y divide-gray-200">
541
- <thead class="bg-gray-50">
542
- <tr>
543
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
544
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
545
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Products</th>
546
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
547
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
548
- <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
549
- </tr>
550
- </thead>
551
- <tbody class="bg-white divide-y divide-gray-200">
552
- <tr class="hover:bg-gray-50">
553
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0042</td>
554
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Doe</td>
555
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pigeon Peas (10kg)</td>
556
- <td class="px-6 py-4 whitespace-nowrap">
557
- <span class="order-status-pending px-2 py-1 text-xs font-medium rounded-full">Pending</span>
558
- </td>
559
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$25.00</td>
560
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
561
- <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
562
- </td>
563
- </tr>
564
- <tr class="hover:bg-gray-50">
565
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0041</td>
566
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Smith</td>
567
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Turmeric Powder (5kg)</td>
568
- <td class="px-6 py-4 whitespace-nowrap">
569
- <span class="order-status-shipped px-2 py-1 text-xs font-medium rounded-full">Shipped</span>
570
- </td>
571
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$26.00</td>
572
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
573
- <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
574
- </td>
575
- </tr>
576
- <tr class="hover:bg-gray-50">
577
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0040</td>
578
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">David Johnson</td>
579
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sesame Seeds (15kg)</td>
580
- <td class="px-6 py-4 whitespace-nowrap">
581
- <span class="order-status-delivered px-2 py-1 text-xs font-medium rounded-full">Delivered</span>
582
- </td>
583
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$56.25</td>
584
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
585
- <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
586
- </td>
587
- </tr>
588
- <tr class="hover:bg-gray-50">
589
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0039</td>
590
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emma Wilson</td>
591
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Green Grams (8kg)</td>
592
- <td class="px-6 py-4 whitespace-nowrap">
593
- <span class="order-status-cancelled px-2 py-1 text-xs font-medium rounded-full">Cancelled</span>
594
- </td>
595
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$22.40</td>
596
- <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
597
- <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
598
- </td>
599
- </tr>
600
- </tbody>
601
- </table>
602
  </div>
603
  </div>
604
-
605
- <!-- Product Performance -->
606
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
607
- <div class="bg-white rounded-lg shadow overflow-hidden">
608
- <div class="px-6 py-4 border-b border-gray-200">
609
- <h2 class="text-lg font-semibold text-gray-900">Top Selling Products</h2>
 
 
 
 
 
 
 
 
 
610
  </div>
611
- <div class="divide-y divide-gray-200">
612
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
613
- <div class="flex items-center">
614
- <img src="https://images.unsplash.com/photo-1603569283847-aa6f0c5d9d5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pigeon Peas" class="w-16 h-16 object-cover rounded mr-4">
615
- <div class="flex-1">
616
- <h3 class="font-medium">Premium Pigeon Peas</h3>
617
- <p class="text-sm text-gray-500">Sold: 120kg | Revenue: $300.00</p>
618
- </div>
619
- <div class="text-truismSecondary">
620
- <i class="fas fa-star"></i>
621
- <i class="fas fa-star"></i>
622
- <i class="fas fa-star"></i>
623
- <i class="fas fa-star"></i>
624
- <i class="fas fa-star-half-alt"></i>
625
- </div>
626
- </div>
627
  </div>
628
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
629
- <div class="flex items-center">
630
- <img src="https://images.unsplash.com/photo-1596043756921-6b09789a9c36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Turmeric Powder" class="w-16 h-16 object-cover rounded mr-4">
631
- <div class="flex-1">
632
- <h3 class="font-medium">Organic Turmeric Powder</h3>
633
- <p class="text-sm text-gray-500">Sold: 85kg | Revenue: $442.00</p>
634
- </div>
635
- <div class="text-truismSecondary">
636
- <i class="fas fa-star"></i>
637
- <i class="fas fa-star"></i>
638
- <i class="fas fa-star"></i>
639
- <i class="fas fa-star"></i>
640
- <i class="fas fa-star"></i>
641
- </div>
642
- </div>
643
  </div>
644
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
645
- <div class="flex items-center">
646
- <img src="https://images.unsplash.com/photo-1594282486555-1b5c6e0e63f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Sesame Seeds" class="w-16 h-16 object-cover rounded mr-4">
647
- <div class="flex-1">
648
- <h3 class="font-medium">White Sesame Seeds</h3>
649
- <p class="text-sm text-gray-500">Sold: 75kg | Revenue: $281.25</p>
650
- </div>
651
- <div class="text-truismSecondary">
652
- <i class="fas fa-star"></i>
653
- <i class="fas fa-star"></i>
654
- <i class="fas fa-star"></i>
655
- <i class="fas fa-star"></i>
656
- <i class="far fa-star"></i>
657
- </div>
658
- </div>
659
  </div>
660
  </div>
661
- </div>
662
-
663
- <div class="bg-white rounded-lg shadow overflow-hidden">
664
- <div class="px-6 py-4 border-b border-gray-200">
665
- <h2 class="text-lg font-semibold text-gray-900">Recent Reviews</h2>
 
 
 
666
  </div>
667
- <div class="divide-y divide-gray-200">
668
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
669
- <div class="flex items-start">
670
- <div class="mr-4">
671
- <div class="w-10 h-10 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">JD</div>
672
- </div>
673
- <div class="flex-1">
674
- <div class="flex items-center justify-between">
675
- <h4 class="font-medium">John Doe</h4>
676
- <div class="text-truismSecondary text-sm">
677
- <i class="fas fa-star"></i>
678
- <i class="fas fa-star"></i>
679
- <i class="fas fa-star"></i>
680
- <i class="fas fa-star"></i>
681
- <i class="fas fa-star-half-alt"></i>
682
- </div>
683
- </div>
684
- <p class="text-sm text-gray-600 mt-1">Premium Pigeon Peas</p>
685
- <p class="text-gray-500 mt-2">"Excellent quality peas, very fresh and clean. Will definitely order again!"</p>
686
- <p class="text-xs text-gray-400 mt-2">2 days ago</p>
687
- </div>
688
- </div>
689
  </div>
690
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
691
- <div class="flex items-start">
692
- <div class="mr-4">
693
- <div class="w-10 h-10 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">SS</div>
694
- </div>
695
- <div class="flex-1">
696
- <div class="flex items-center justify-between">
697
- <h4 class="font-medium">Sarah Smith</h4>
698
- <div class="text-truismSecondary text-sm">
699
- <i class="fas fa-star"></i>
700
- <i class="fas fa-star"></i>
701
- <i class="fas fa-star"></i>
702
- <i class="fas fa-star"></i>
703
- <i class="fas fa-star"></i>
704
- </div>
705
- </div>
706
- <p class="text-sm text-gray-600 mt-1">Organic Turmeric Powder</p>
707
- <p class="text-gray-500 mt-2">"The turmeric is very potent and fresh. Perfect for my health drinks. Highly recommend!"</p>
708
- <p class="text-xs text-gray-400 mt-2">1 week ago</p>
709
- </div>
710
- </div>
711
  </div>
712
- <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
713
- <div class="flex items-start">
714
- <div class="mr-4">
715
- <div class="w-10 h-10 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">DJ</div>
716
- </div>
717
- <div class="flex-1">
718
- <div class="flex items-center justify-between">
719
- <h4 class="font-medium">David Johnson</h4>
720
- <div class="text-truismSecondary text-sm">
721
- <i class="fas fa-star"></i>
722
- <i class="fas fa-star"></i>
723
- <i class="fas fa-star"></i>
724
- <i class="fas fa-star"></i>
725
- <i class="far fa-star"></i>
726
- </div>
727
- </div>
728
- <p class="text-sm text-gray-600 mt-1">White Sesame Seeds</p>
729
- <p class="text-gray-500 mt-2">"Good quality seeds, but delivery took longer than expected."</p>
730
- <p class="text-xs text-gray-400 mt-2">2 weeks ago</p>
731
- </div>
732
  </div>
733
  </div>
734
  </div>
735
  </div>
736
  </div>
 
737
 
738
- <!-- Quick Actions -->
739
- <div class="bg-white rounded-lg shadow overflow-hidden">
740
- <div class="px-6 py-4 border-b border-gray-200">
741
- <h2 class="text-lg font-semibold text-gray-900">Quick Actions</h2>
 
 
742
  </div>
743
- <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 p-6">
744
- <a href="#" class="bg-truismLight rounded-lg p-6 text-center hover:shadow-md transition-smooth">
745
- <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4">
746
- <i class="fas fa-plus text-2xl"></i>
747
- </div>
748
- <h3 class="font-medium text-gray-900 mb-2">Add New Product</h3>
749
- <p class="text-sm text-gray-500">List a new agricultural product for sale</p>
750
- </a>
751
- <a href="#" class="bg-truismLight rounded-lg p-6 text-center hover:shadow-md transition-smooth">
752
- <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4">
753
- <i class="fas fa-chart-line text-2xl"></i>
754
- </div>
755
- <h3 class="font-medium text-gray-900 mb-2">View Reports</h3>
756
- <p class="text-sm text-gray-500">Analyze your sales and performance</p>
757
- </a>
758
- <a href="#" class="bg-truismLight rounded-lg p-6 text-center hover:shadow-md transition-smooth">
759
- <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4">
760
- <i class="fas fa-truck text-2xl"></i>
761
- </div>
762
- <h3 class="font-medium text-gray-900 mb-2">Manage Shipping</h3>
763
- <p class="text-sm text-gray-500">Update your shipping methods and rates</p>
764
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
765
  </div>
766
  </div>
767
- </main>
768
- </div>
769
  </div>
770
  </div>
771
 
772
- <!-- Dashboard Toggle (For demo purposes) -->
773
- <div class="fixed bottom-4 right-4 z-50">
774
- <button onclick="toggleDashboard()" class="bg-truismPrimary text-white p-3 rounded-full shadow-lg hover:bg-truismDark transition-smooth">
775
- <i class="fas fa-exchange-alt"></i>
776
- </button>
777
- </div>
778
-
779
  <script>
780
  // Toggle profile dropdown
781
  function toggleProfileDropdown() {
@@ -783,25 +556,211 @@
783
  dropdown.classList.toggle('hidden');
784
  }
785
 
786
- // Close dropdown when clicking outside
787
- document.addEventListener('click', function(event) {
788
- const dropdown = document.getElementById('profileDropdown');
789
- if (!event.target.closest('.relative')) {
790
- dropdown.classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
791
  }
792
  });
793
 
794
- // For demo purposes - toggle between buyer and seller dashboards
795
- function toggleDashboard() {
796
- const sellerDashboard = document.getElementById('sellerDashboard');
797
- sellerDashboard.classList.toggle('hidden');
798
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
799
 
800
- // Sample function to view product details
801
- function viewProduct(id) {
802
- alert('Viewing product with ID: ' + id);
803
- // In a real application, this would open a modal or navigate to product page
804
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
805
  </script>
806
  <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=jcarnel/projects256" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
807
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AgriTrack - Farmer Dashboard</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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
  colors: {
15
+ agriPrimary: '#2F855A',
16
+ agriSecondary: '#ECC94B',
17
+ agriDark: '#276749',
18
+ agriLight: '#F0FFF4',
19
+ agriAccent: '#38A169',
20
+ agriAlert: '#E53E3E',
21
+ agriWater: '#4299E1',
22
+ agriSoil: '#9F7AEA'
23
  }
24
  }
25
  }
 
31
  }
32
 
33
  .active-tab {
34
+ background-color: #F0FFF4;
35
+ color: #2F855A;
36
+ border-left: 4px solid #ECC94B;
37
  }
38
 
39
  .transition-smooth {
40
  transition: all 0.3s ease-in-out;
41
  }
42
 
43
+ .status-good {
44
+ background-color: #C6F6D5;
45
+ color: #22543D;
46
  }
47
 
48
+ .status-warning {
49
+ background-color: #FEFCBF;
50
+ color: #744210;
51
  }
52
 
53
+ .status-critical {
54
+ background-color: #FED7D7;
55
+ color: #742A2A;
56
  }
57
 
58
+ .custom-scrollbar::-webkit-scrollbar {
59
+ width: 6px;
60
+ height: 6px;
61
  }
62
+ .custom-scrollbar::-webkit-scrollbar-track {
 
 
 
 
 
63
  background: #f1f1f1;
64
  }
65
+ .custom-scrollbar::-webkit-scrollbar-thumb {
66
+ background: #2F855A;
67
  border-radius: 4px;
68
  }
 
 
 
69
  </style>
70
  </head>
71
  <body class="font-sans bg-gray-50">
 
72
  <div class="flex">
73
  <!-- Sidebar -->
74
  <div class="bg-white shadow-md w-64 fixed dashboard-nav">
75
  <div class="p-4 border-b border-gray-200">
76
+ <h1 class="text-xl font-bold text-agriPrimary">AgriTrack</h1>
77
+ <p class="text-xs text-gray-500">Farmer Dashboard</p>
78
  </div>
79
  <div class="p-4">
80
  <div class="flex items-center mb-6">
81
+ <div class="w-12 h-12 rounded-full bg-agriLight flex items-center justify-center text-agriPrimary font-bold mr-3">
82
+ <i class="fas fa-user-tie"></i>
83
+ </div>
84
  <div>
85
+ <p class="font-medium">John Farmer</p>
86
+ <p class="text-sm text-gray-500">Organic Farm, Iowa</p>
87
  </div>
88
  </div>
89
 
90
  <div class="mb-8">
91
+ <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Farm Management</p>
92
  <a href="#" class="block py-2 px-3 mb-1 rounded active-tab">
93
  <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
94
  </a>
95
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
96
+ <i class="fas fa-map-marked-alt mr-2"></i> Fields
97
  </a>
98
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
99
+ <i class="fas fa-seedling mr-2"></i> Crops
100
  </a>
101
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
102
+ <i class="fas fa-cow mr-2"></i> Livestock
103
  </a>
104
  </div>
105
 
106
  <div class="mb-8">
107
+ <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Production Tracking</p>
108
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
109
+ <i class="fas fa-chart-line mr-2"></i> Yields
110
  </a>
111
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
112
+ <i class="fas fa-tractor mr-2"></i> Inputs
113
  </a>
114
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
115
+ <i class="fas fa-boxes mr-2"></i> Inventory
116
  </a>
117
  <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
118
+ <i class="fas fa-clipboard-check mr-2"></i> Tasks
119
+ </a>
120
+ </div>
121
+
122
+ <div class="mb-8">
123
+ <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Sustainability</p>
124
+ <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
125
+ <i class="fas fa-cloud-sun-rain mr-2"></i> Climate Impact
126
+ </a>
127
+ <i class="fas fa-shoe-prints mr-2"></i> Carbon Footprint
128
+ </a>
129
+ <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
130
+ <i class="fas fa-recycle mr-2"></i> Resource Use
131
+ </a>
132
+ </div>
133
+
134
+ <div class="mb-8">
135
+ <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Financial</p>
136
+ <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
137
+ <i class="fas fa-dollar-sign mr-2"></i> Expenses
138
+ </a>
139
+ <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
140
+ <i class="fas fa-money-bill-wave mr-2"></i> Revenue
141
+ </a>
142
+ <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
143
+ <i class="fas fa-credit-card mr-2"></i> Credit Rating
144
  </a>
145
  </div>
146
 
 
159
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
160
  <div class="flex justify-between h-16 items-center">
161
  <div class="flex items-center">
162
+ <h1 class="text-xl font-semibold text-gray-900">Farm Overview</h1>
163
  </div>
164
  <div class="flex items-center space-x-4">
165
+ <div class="relative">
166
+ <button class="bg-agriLight text-agriPrimary px-3 py-1 rounded-full text-sm font-medium">
167
+ <i class="fas fa-cloud mr-1"></i> 72°F, Sunny
168
+ </button>
169
+ </div>
170
+ <button class="relative text-gray-600 hover:text-agriPrimary">
171
  <i class="fas fa-bell text-xl"></i>
172
+ <span class="absolute -top-1 -right-1 bg-agriAlert text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">2</span>
173
  </button>
174
  <div class="relative">
175
  <button onclick="toggleProfileDropdown()" class="flex items-center text-sm rounded-full focus:outline-none">
176
  <span class="sr-only">Open user menu</span>
177
+ <div class="w-8 h-8 rounded-full bg-agriLight flex items-center justify-center text-agriPrimary font-bold">
178
+ <i class="fas fa-user"></i>
179
+ </div>
180
  </button>
 
 
 
 
 
181
  </div>
182
  </div>
183
  </div>
 
186
 
187
  <!-- Dashboard Content -->
188
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
189
+ <!-- Farm Status Overview -->
190
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
191
  <div class="bg-white rounded-lg shadow p-6">
192
  <div class="flex items-center">
193
+ <div class="p-3 rounded-full bg-agriLight text-agriPrimary mr-4">
194
+ <i class="fas fa-map-marked-alt"></i>
195
  </div>
196
  <div>
197
+ <p class="text-sm text-gray-500">Active Fields</p>
198
+ <p class="text-2xl font-bold">8</p>
199
+ <p class="text-xs text-gray-500 mt-1">120 acres total</p>
200
  </div>
201
  </div>
202
  </div>
203
  <div class="bg-white rounded-lg shadow p-6">
204
  <div class="flex items-center">
205
  <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
206
+ <i class="fas fa-seedling"></i>
207
  </div>
208
  <div>
209
+ <p class="text-sm text-gray-500">Current Crops</p>
210
+ <p class="text-2xl font-bold">4</p>
211
+ <p class="text-xs text-gray-500 mt-1">Corn, Soybeans, Wheat, Oats</p>
212
  </div>
213
  </div>
214
  </div>
215
  <div class="bg-white rounded-lg shadow p-6">
216
  <div class="flex items-center">
217
  <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
218
+ <i class="fas fa-cloud-sun-rain"></i>
219
  </div>
220
  <div>
221
+ <p class="text-sm text-gray-500">Soil Health</p>
222
+ <p class="text-2xl font-bold">82%</p>
223
+ <span class="status-good px-2 py-1 text-xs font-medium rounded-full">Good</span>
224
  </div>
225
  </div>
226
  </div>
227
  <div class="bg-white rounded-lg shadow p-6">
228
  <div class="flex items-center">
229
  <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
230
+ <i class="fas fa-dollar-sign"></i>
231
  </div>
232
  <div>
233
+ <p class="text-sm text-gray-500">Credit Score</p>
234
+ <p class="text-2xl font-bold">720</p>
235
+ <span class="status-good px-2 py-1 text-xs font-medium rounded-full">Good</span>
236
  </div>
237
  </div>
238
  </div>
239
  </div>
240
 
241
+ <!-- Production and Climate Data -->
242
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
243
+ <!-- Yield Trends -->
244
+ <div class="bg-white rounded-lg shadow overflow-hidden">
245
+ <div class="px-6 py-4 border-b border-gray-200">
246
+ <h2 class="text-lg font-semibold text-gray-900">Crop Yield Trends (bushels/acre)</h2>
247
+ </div>
248
+ <div class="p-6">
249
+ <canvas id="yieldChart" height="250"></canvas>
250
  </div>
251
  </div>
252
+
253
+ <!-- Climate Impact -->
254
+ <div class="bg-white rounded-lg shadow overflow-hidden">
255
+ <div class="px-6 py-4 border-b border-gray-200">
256
+ <h2 class="text-lg font-semibold text-gray-900">Climate Impact Analysis</h2>
 
 
 
 
 
 
 
 
 
 
 
 
257
  </div>
258
+ <div class="p-6">
259
+ <div class="grid grid-cols-3 gap-4 mb-6">
260
+ <div class="bg-agriLight p-4 rounded-lg text-center">
261
+ <p class="text-sm text-gray-600">Temperature</p>
262
+ <p class="text-xl font-bold text-agriPrimary">+2.1°F</p>
263
+ <p class="text-xs text-gray-500">10yr avg increase</p>
 
 
 
 
264
  </div>
265
+ <div class="bg-blue-50 p-4 rounded-lg text-center">
266
+ <p class="text-sm text-gray-600">Precipitation</p>
267
+ <p class="text-xl font-bold text-blue-600">-12%</p>
268
+ <p class="text-xs text-gray-500">10yr avg decrease</p>
269
  </div>
270
+ <div class="bg-yellow-50 p-4 rounded-lg text-center">
271
+ <p class="text-sm text-gray-600">Growing Days</p>
272
+ <p class="text-xl font-bold text-yellow-600">+14</p>
273
+ <p class="text-xs text-gray-500">10yr avg increase</p>
 
 
 
 
 
 
 
 
 
 
 
 
274
  </div>
275
  </div>
276
+ <canvas id="climateChart" height="150"></canvas>
277
  </div>
278
  </div>
279
  </div>
280
 
281
+ <!-- Inputs and Sustainability -->
282
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
283
+ <!-- Input Usage -->
284
+ <div class="bg-white rounded-lg shadow overflow-hidden">
285
+ <div class="px-6 py-4 border-b border-gray-200">
286
+ <div class="flex items-center justify-between">
287
+ <h2 class="text-lg font-semibold text-gray-900">Input Usage (Current Season)</h2>
288
+ <a href="#" class="text-sm font-medium text-agriPrimary hover:text-agriDark">Details</a>
 
 
 
 
 
 
 
289
  </div>
290
+ </div>
291
+ <div class="divide-y divide-gray-200">
292
+ <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
293
+ <div class="flex items-center justify-between">
294
+ <div class="flex items-center">
295
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-4">
296
+ <i class="fas fa-tint"></i>
297
+ </div>
298
+ <div>
299
+ <p class="font-medium">Water Usage</p>
300
+ <p class="text-sm text-gray-500">Irrigation</p>
301
+ </div>
302
+ </div>
303
+ <div class="text-right">
304
+ <p class="font-medium">1.2M gallons</p>
305
+ <p class="text-sm text-gray-500">-15% vs last year</p>
306
  </div>
307
  </div>
308
  </div>
309
+ <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
310
+ <div class="flex items-center justify-between">
311
+ <div class="flex items-center">
312
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-4">
313
+ <i class="fas fa-flask"></i>
314
+ </div>
315
+ <div>
316
+ <p class="font-medium">Fertilizer</p>
317
+ <p class="text-sm text-gray-500">Nitrogen-based</p>
318
+ </div>
319
+ </div>
320
+ <div class="text-right">
321
+ <p class="font-medium">850 lbs</p>
322
+ <p class="text-sm text-gray-500">-22% vs last year</p>
 
 
 
 
 
 
 
323
  </div>
324
  </div>
325
  </div>
326
+ <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
327
+ <div class="flex items-center justify-between">
328
+ <div class="flex items-center">
329
+ <div class="p-2 rounded-full bg-red-100 text-red-600 mr-4">
330
+ <i class="fas fa-bug"></i>
331
+ </div>
332
+ <div>
333
+ <p class="font-medium">Pesticides</p>
334
+ <p class="text-sm text-gray-500">Organic compounds</p>
335
+ </div>
336
+ </div>
337
+ <div class="text-right">
338
+ <p class="font-medium">45 lbs</p>
339
+ <p class="text-sm text-gray-500">-30% vs last year</p>
 
 
 
 
 
 
 
340
  </div>
341
  </div>
342
  </div>
343
+ <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
344
+ <div class="flex items-center justify-between">
345
+ <div class="flex items-center">
346
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-4">
347
+ <i class="fas fa-gas-pump"></i>
348
+ </div>
349
+ <div>
350
+ <p class="font-medium">Fuel Consumption</p>
351
+ <p class="text-sm text-gray-500">Diesel</p>
352
+ </div>
353
+ </div>
354
+ <div class="text-right">
355
+ <p class="font-medium">320 gallons</p>
356
+ <p class="text-sm text-gray-500">-8% vs last year</p>
 
 
 
 
 
 
 
357
  </div>
358
  </div>
359
  </div>
360
  </div>
361
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
362
 
363
+ <!-- Carbon Footprint -->
364
+ <div class="bg-white rounded-lg shadow overflow-hidden">
365
+ <div class="px-6 py-4 border-b border-gray-200">
366
+ <h2 class="text-lg font-semibold text-gray-900">Carbon Footprint Analysis</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
  </div>
368
+ <div class="p-6">
369
+ <div class="flex items-center justify-between mb-4">
 
 
 
 
 
 
 
 
 
 
370
  <div>
371
+ <p class="text-sm text-gray-500">Total CO₂ Equivalent</p>
372
+ <p class="text-2xl font-bold text-agriPrimary">42.5 tons</p>
373
  </div>
374
+ <span class="status-good px-3 py-1 text-sm font-medium rounded-full">-12% YoY</span>
375
  </div>
376
+ <canvas id="carbonChart" height="200"></canvas>
377
+ <div class="mt-4 grid grid-cols-3 gap-2">
378
+ <div class="bg-gray-100 p-2 rounded text-center">
379
+ <p class="text-xs text-gray-600">Field Operations</p>
380
+ <p class="font-medium">18.2 t</p>
381
  </div>
382
+ <div class="bg-gray-100 p-2 rounded text-center">
383
+ <p class="text-xs text-gray-600">Fertilizer</p>
384
+ <p class="font-medium">12.7 t</p>
385
  </div>
386
+ <div class="bg-gray-100 p-2 rounded text-center">
387
+ <p class="text-xs text-gray-600">Livestock</p>
388
+ <p class="font-medium">8.4 t</p>
 
 
 
389
  </div>
390
+ <div class="bg-gray-100 p-2 rounded text-center">
391
+ <p class="text-xs text-gray-600">Energy Use</p>
392
+ <p class="font-medium">2.3 t</p>
393
  </div>
394
+ <div class="bg-gray-100 p-2 rounded text-center">
395
+ <p class="text-xs text-gray-600">Transport</p>
396
+ <p class="font-medium">0.9 t</p>
 
 
 
397
  </div>
398
+ <div class="bg-gray-100 p-2 rounded text-center">
399
+ <p class="text-xs text-gray-600">Sequestration</p>
400
+ <p class="font-medium text-green-600">-12.5 t</p>
401
  </div>
402
  </div>
403
  </div>
404
  </div>
405
+ </div>
406
 
407
+ <!-- Financial and Credit Data -->
408
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
409
+ <!-- Financial Overview -->
410
+ <div class="bg-white rounded-lg shadow overflow-hidden">
411
  <div class="px-6 py-4 border-b border-gray-200">
412
  <div class="flex items-center justify-between">
413
+ <h2 class="text-lg font-semibold text-gray-900">Financial Overview (2023)</h2>
414
+ <a href="#" class="text-sm font-medium text-agriPrimary hover:text-agriDark">Details</a>
415
  </div>
416
  </div>
417
+ <div class="p-6">
418
+ <div class="grid grid-cols-2 gap-6 mb-6">
419
+ <div class="border-r border-gray-200 pr-6">
420
+ <p class="text-sm text-gray-500 mb-1">Total Revenue</p>
421
+ <p class="text-2xl font-bold text-green-600">$248,750</p>
422
+ <p class="text-xs text-gray-500 mt-1">+8% vs last year</p>
423
+ </div>
424
+ <div>
425
+ <p class="text-sm text-gray-500 mb-1">Total Expenses</p>
426
+ <p class="text-2xl font-bold text-red-600">$182,300</p>
427
+ <p class="text-xs text-gray-500 mt-1">+5% vs last year</p>
428
+ </div>
429
+ </div>
430
+ <canvas id="financeChart" height="200"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
431
  </div>
432
  </div>
433
+
434
+ <!-- Credit Rating Factors -->
435
+ <div class="bg-white rounded-lg shadow overflow-hidden">
436
+ <div class="px-6 py-4 border-b border-gray-200">
437
+ <h2 class="text-lg font-semibold text-gray-900">Credit Rating Factors</h2>
438
+ </div>
439
+ <div class="p-6">
440
+ <div class="mb-6">
441
+ <div class="flex items-center justify-between mb-1">
442
+ <p class="text-sm font-medium text-gray-700">Payment History</p>
443
+ <p class="text-sm font-bold text-green-600">Excellent</p>
444
+ </div>
445
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
446
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 95%"></div>
447
+ </div>
448
  </div>
449
+ <div class="mb-6">
450
+ <div class="flex items-center justify-between mb-1">
451
+ <p class="text-sm font-medium text-gray-700">Debt-to-Income</p>
452
+ <p class="text-sm font-bold text-green-600">Good</p>
 
 
 
 
 
 
 
 
 
 
 
 
453
  </div>
454
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
455
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 82%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
456
  </div>
457
+ </div>
458
+ <div class="mb-6">
459
+ <div class="flex items-center justify-between mb-1">
460
+ <p class="text-sm font-medium text-gray-700">Asset Value</p>
461
+ <p class="text-sm font-bold text-yellow-600">Average</p>
462
+ </div>
463
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
464
+ <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 68%"></div>
 
 
 
 
 
 
 
465
  </div>
466
  </div>
467
+ <div class="mb-6">
468
+ <div class="flex items-center justify-between mb-1">
469
+ <p class="text-sm font-medium text-gray-700">Sustainability Score</p>
470
+ <p class="text-sm font-bold text-green-600">Excellent</p>
471
+ </div>
472
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
473
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 88%"></div>
474
+ </div>
475
  </div>
476
+ <div class="mb-6">
477
+ <div class="flex items-center justify-between mb-1">
478
+ <p class="text-sm font-medium text-gray-700">Yield Stability</p>
479
+ <p class="text-sm font-bold text-green-600">Good</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
480
  </div>
481
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
482
+ <div class="bg-green-500 h-2.5 rounded-full" style="width: 76%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
483
  </div>
484
+ </div>
485
+ <div class="mt-8 p-4 bg-agriLight rounded-lg">
486
+ <div class="flex items-center">
487
+ <div class="p-2 rounded-full bg-white text-agriPrimary mr-3">
488
+ <i class="fas fa-credit-card"></i>
489
+ </div>
490
+ <div>
491
+ <p class="font-medium">Current Credit Score</p>
492
+ <p class="text-2xl font-bold">720</p>
493
+ <p class="text-xs text-gray-600">Good (National Avg: 650)</p>
 
 
 
 
 
 
 
 
 
 
494
  </div>
495
  </div>
496
  </div>
497
  </div>
498
  </div>
499
+ </div>
500
 
501
+ <!-- Alerts and Recommendations -->
502
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
503
+ <div class="px-6 py-4 border-b border-gray-200">
504
+ <div class="flex items-center justify-between">
505
+ <h2 class="text-lg font-semibold text-gray-900">Alerts & Recommendations</h2>
506
+ <a href="#" class="text-sm font-medium text-agriPrimary hover:text-agriDark">View All</a>
507
  </div>
508
+ </div>
509
+ <div class="divide-y divide-gray-200">
510
+ <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
511
+ <div class="flex items-start">
512
+ <div class="p-2 rounded-full bg-red-100 text-red-600 mr-4">
513
+ <i class="fas fa-exclamation-triangle"></i>
514
+ </div>
515
+ <div>
516
+ <h4 class="font-medium">Irrigation Needed</h4>
517
+ <p class="text-gray-500 mt-1">Field 3 soil moisture is below optimal levels. Recommended irrigation within 48 hours.</p>
518
+ <p class="text-xs text-gray-400 mt-2">Today, 9:42 AM</p>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
523
+ <div class="flex items-start">
524
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-4">
525
+ <i class="fas fa-cloud-sun-rain"></i>
526
+ </div>
527
+ <div>
528
+ <h4 class="font-medium">Weather Advisory</h4>
529
+ <p class="text-gray-500 mt-1">Heat wave expected next week. Consider adjusting harvest schedule for Field 5.</p>
530
+ <p class="text-xs text-gray-400 mt-2">Yesterday, 3:15 PM</p>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
535
+ <div class="flex items-start">
536
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-4">
537
+ <i class="fas fa-chart-line"></i>
538
+ </div>
539
+ <div>
540
+ <h4 class="font-medium">Market Opportunity</h4>
541
+ <p class="text-gray-500 mt-1">Organic wheat prices up 12% this month. Consider increasing production next season.</p>
542
+ <p class="text-xs text-gray-400 mt-2">Jun 12, 2023</p>
543
+ </div>
544
+ </div>
545
  </div>
546
  </div>
547
+ </div>
548
+ </main>
549
  </div>
550
  </div>
551
 
 
 
 
 
 
 
 
552
  <script>
553
  // Toggle profile dropdown
554
  function toggleProfileDropdown() {
 
556
  dropdown.classList.toggle('hidden');
557
  }
558
 
559
+ // Yield Trends Chart
560
+ const yieldCtx = document.getElementById('yieldChart').getContext('2d');
561
+ const yieldChart = new Chart(yieldCtx, {
562
+ type: 'line',
563
+ data: {
564
+ labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
565
+ datasets: [
566
+ {
567
+ label: 'Corn',
568
+ data: [180, 175, 192, 185, 198, 205],
569
+ borderColor: '#2F855A',
570
+ backgroundColor: 'rgba(47, 133, 90, 0.1)',
571
+ tension: 0.3,
572
+ fill: true
573
+ },
574
+ {
575
+ label: 'Soybeans',
576
+ data: [52, 48, 55, 50, 58, 62],
577
+ borderColor: '#ECC94B',
578
+ backgroundColor: 'rgba(236, 201, 75, 0.1)',
579
+ tension: 0.3,
580
+ fill: true
581
+ },
582
+ {
583
+ label: 'Wheat',
584
+ data: [68, 65, 72, 70, 75, 78],
585
+ borderColor: '#9F7AEA',
586
+ backgroundColor: 'rgba(159, 122, 234, 0.1)',
587
+ tension: 0.3,
588
+ fill: true
589
+ }
590
+ ]
591
+ },
592
+ options: {
593
+ responsive: true,
594
+ plugins: {
595
+ legend: {
596
+ position: 'top',
597
+ },
598
+ tooltip: {
599
+ mode: 'index',
600
+ intersect: false,
601
+ }
602
+ },
603
+ scales: {
604
+ y: {
605
+ beginAtZero: false,
606
+ title: {
607
+ display: true,
608
+ text: 'Bushels per Acre'
609
+ }
610
+ }
611
+ }
612
  }
613
  });
614
 
615
+ // Climate Impact Chart
616
+ const climateCtx = document.getElementById('climateChart').getContext('2d');
617
+ const climateChart = new Chart(climateCtx, {
618
+ type: 'bar',
619
+ data: {
620
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
621
+ datasets: [
622
+ {
623
+ label: 'Temperature (°F)',
624
+ data: [28, 32, 45, 58, 68, 77, 82, 80, 72, 60, 46, 34],
625
+ backgroundColor: 'rgba(239, 68, 68, 0.7)',
626
+ borderColor: 'rgba(239, 68, 68, 1)',
627
+ borderWidth: 1,
628
+ yAxisID: 'y'
629
+ },
630
+ {
631
+ label: 'Precipitation (in)',
632
+ data: [1.2, 1.1, 2.3, 3.5, 4.2, 4.8, 3.9, 3.5, 3.1, 2.5, 1.9, 1.4],
633
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
634
+ borderColor: 'rgba(59, 130, 246, 1)',
635
+ borderWidth: 1,
636
+ type: 'line',
637
+ yAxisID: 'y1'
638
+ }
639
+ ]
640
+ },
641
+ options: {
642
+ responsive: true,
643
+ interaction: {
644
+ mode: 'index',
645
+ intersect: false,
646
+ },
647
+ plugins: {
648
+ legend: {
649
+ position: 'top',
650
+ }
651
+ },
652
+ scales: {
653
+ y: {
654
+ type: 'linear',
655
+ display: true,
656
+ position: 'left',
657
+ title: {
658
+ display: true,
659
+ text: 'Temperature (°F)'
660
+ }
661
+ },
662
+ y1: {
663
+ type: 'linear',
664
+ display: true,
665
+ position: 'right',
666
+ title: {
667
+ display: true,
668
+ text: 'Precipitation (in)'
669
+ },
670
+ grid: {
671
+ drawOnChartArea: false,
672
+ }
673
+ }
674
+ }
675
+ }
676
+ });
677
 
678
+ // Carbon Footprint Chart
679
+ const carbonCtx = document.getElementById('carbonChart').getContext('2d');
680
+ const carbonChart = new Chart(carbonCtx, {
681
+ type: 'doughnut',
682
+ data: {
683
+ labels: ['Field Operations', 'Fertilizer', 'Livestock', 'Energy Use', 'Transport', 'Sequestration'],
684
+ datasets: [{
685
+ data: [18.2, 12.7, 8.4, 2.3, 0.9, -12.5],
686
+ backgroundColor: [
687
+ '#2F855A',
688
+ '#ECC94B',
689
+ '#9F7AEA',
690
+ '#4299E1',
691
+ '#ED8936',
692
+ '#38B2AC'
693
+ ],
694
+ borderWidth: 1
695
+ }]
696
+ },
697
+ options: {
698
+ responsive: true,
699
+ plugins: {
700
+ legend: {
701
+ position: 'right',
702
+ },
703
+ tooltip: {
704
+ callbacks: {
705
+ label: function(context) {
706
+ let label = context.label || '';
707
+ if (label) {
708
+ label += ': ';
709
+ }
710
+ label += context.raw + ' tons CO₂e';
711
+ return label;
712
+ }
713
+ }
714
+ }
715
+ }
716
+ }
717
+ });
718
+
719
+ // Financial Chart
720
+ const financeCtx = document.getElementById('financeChart').getContext('2d');
721
+ const financeChart = new Chart(financeCtx, {
722
+ type: 'bar',
723
+ data: {
724
+ labels: ['Q1', 'Q2', 'Q3', 'Q4'],
725
+ datasets: [
726
+ {
727
+ label: 'Revenue',
728
+ data: [45000, 65000, 85000, 53250],
729
+ backgroundColor: 'rgba(56, 161, 105, 0.7)',
730
+ borderColor: 'rgba(56, 161, 105, 1)',
731
+ borderWidth: 1
732
+ },
733
+ {
734
+ label: 'Expenses',
735
+ data: [38000, 52000, 65000, 37300],
736
+ backgroundColor: 'rgba(229, 62, 62, 0.7)',
737
+ borderColor: 'rgba(229, 62, 62, 1)',
738
+ borderWidth: 1
739
+ }
740
+ ]
741
+ },
742
+ options: {
743
+ responsive: true,
744
+ plugins: {
745
+ legend: {
746
+ position: 'top',
747
+ },
748
+ tooltip: {
749
+ mode: 'index',
750
+ intersect: false,
751
+ }
752
+ },
753
+ scales: {
754
+ y: {
755
+ beginAtZero: true,
756
+ title: {
757
+ display: true,
758
+ text: 'USD ($)'
759
+ }
760
+ }
761
+ }
762
+ }
763
+ });
764
  </script>
765
  <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=jcarnel/projects256" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
766
  </html>
prompts.txt CHANGED
@@ -1,4 +1,5 @@
1
  Truism connects informal processors, distributors, and retailers to their inventory needs while sourcing directly from smallholder farmers. We focus on the dry pulses, Herbs/Spiecs and select oil seeds. We building in the echnology and artificial intelligence to optimize the supply chain and ensure efficient inventory management> Build a website and a webapp with a dashboard
2
  Build a market place for Truism.
3
  https://truismhl.com/
4
- create a buyer dashboard and a seller dashboard
 
 
1
  Truism connects informal processors, distributors, and retailers to their inventory needs while sourcing directly from smallholder farmers. We focus on the dry pulses, Herbs/Spiecs and select oil seeds. We building in the echnology and artificial intelligence to optimize the supply chain and ensure efficient inventory management> Build a website and a webapp with a dashboard
2
  Build a market place for Truism.
3
  https://truismhl.com/
4
+ create a buyer dashboard and a seller dashboard
5
+ Create a farmer dash board capturing and traking all the essntial data, production, inputs and outputs, climate change effect, carbon foot print and financial data for credit rating