Spaces:

ygdswe
/

smart-farmui

Running

App Files Files Community

smart-farmui / index.html

ygdswe

Add 3 files

b96f521 verified 12 months ago

raw

history blame contribute delete

70.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SmartFarm IoT Dashboard</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gradient-bg {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}
	.dashboard-card {
	transition: all 0.3s ease;
	}
	.dashboard-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}
	.notification-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	}
	.crop-health-indicator {
	height: 8px;
	border-radius: 4px;
	}
	.task-progress {
	height: 6px;
	border-radius: 3px;
	}
	.tab-content {
	display: none;
	}
	.tab-content.active {
	display: block;
	animation: fadeIn 0.5s ease;
	}
	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}
	.sensor-value {
	font-size: 1.8rem;
	font-weight: 600;
	}
	.sensor-label {
	font-size: 0.8rem;
	opacity: 0.7;
	}
	</style>
	</head>
	<body class="gradient-bg min-h-screen">
	<div class="container mx-auto px-4 py-8">
	<!-- Header with Role Selector -->
	<div class="flex justify-between items-center mb-8">
	<div>
	<h1 class="text-3xl font-bold text-gray-800">SmartFarm IoT</h1>
	<p class="text-gray-600">Situation Aware Farming System</p>
	</div>
	<div class="relative">
	<select id="roleSelector" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-green-500">
	<option value="manager">Farm Manager</option>
	<option value="worker">Farm Worker</option>
	<option value="breeder">Seed Breeder</option>
	<option value="sustainability">Sustainability Officer</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
	<i class="fas fa-chevron-down"></i>
	</div>
	</div>
	</div>

	<!-- Navigation Tabs -->
	<div class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden">
	<div class="flex border-b">
	<button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-green-600 focus:outline-none border-b-2 border-transparent hover:border-green-300 active" data-tab="dashboard">
	<i class="fas fa-chart-line mr-2"></i>Dashboard
	</button>
	<button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-green-600 focus:outline-none border-b-2 border-transparent hover:border-green-300" data-tab="tasks">
	<i class="fas fa-tasks mr-2"></i>Tasks
	</button>
	<button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-green-600 focus:outline-none border-b-2 border-transparent hover:border-green-300" data-tab="analytics">
	<i class="fas fa-chart-pie mr-2"></i>Analytics
	</button>
	<button class="tab-btn px-6 py-3 font-medium text-gray-600 hover:text-green-600 focus:outline-none border-b-2 border-transparent hover:border-green-300" data-tab="reports">
	<i class="fas fa-file-alt mr-2"></i>Reports
	</button>
	</div>
	</div>

	<!-- Dashboard Content -->
	<div id="dashboard" class="tab-content active">
	<!-- Farm Manager View -->
	<div id="manager-view" class="role-view">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
	<!-- Overview Card -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold text-gray-800">Farm Overview</h3>
	<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
	</div>
	<div class="grid grid-cols-2 gap-4">
	<div>
	<p class="text-gray-500 text-sm">Total Workers</p>
	<p class="text-2xl font-bold">24</p>
	</div>
	<div>
	<p class="text-gray-500 text-sm">Active Tasks</p>
	<p class="text-2xl font-bold">18</p>
	</div>
	<div>
	<p class="text-gray-500 text-sm">Crop Health</p>
	<div class="flex items-center">
	<span class="text-xl font-bold mr-2">84%</span>
	<div class="crop-health-indicator bg-green-500 w-full"></div>
	</div>
	</div>
	<div>
	<p class="text-gray-500 text-sm">Resource Usage</p>
	<div class="flex items-center">
	<span class="text-xl font-bold mr-2">72%</span>
	<div class="crop-health-indicator bg-yellow-500 w-full"></div>
	</div>
	</div>
	</div>
	</div>

	<!-- Worker Performance -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Worker Performance</h3>
	<div class="space-y-4">
	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium">Team A</span>
	<span class="text-sm font-medium">92%</span>
	</div>
	<div class="task-progress bg-green-500 w-full"></div>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium">Team B</span>
	<span class="text-sm font-medium">85%</span>
	</div>
	<div class="task-progress bg-green-400 w-full"></div>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium">Team C</span>
	<span class="text-sm font-medium">78%</span>
	</div>
	<div class="task-progress bg-yellow-500 w-full"></div>
	</div>
	</div>
	</div>

	<!-- Quick Actions -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h3>
	<div class="grid grid-cols-2 gap-3">
	<button class="bg-green-50 hover:bg-green-100 text-green-700 py-2 px-3 rounded-lg text-sm font-medium flex items-center justify-center">
	<i class="fas fa-plus-circle mr-2"></i> New Task
	</button>
	<button class="bg-blue-50 hover:bg-blue-100 text-blue-700 py-2 px-3 rounded-lg text-sm font-medium flex items-center justify-center">
	<i class="fas fa-users mr-2"></i> Assign Team
	</button>
	<button class="bg-purple-50 hover:bg-purple-100 text-purple-700 py-2 px-3 rounded-lg text-sm font-medium flex items-center justify-center">
	<i class="fas fa-chart-bar mr-2"></i> Generate Report
	</button>
	<button class="bg-orange-50 hover:bg-orange-100 text-orange-700 py-2 px-3 rounded-lg text-sm font-medium flex items-center justify-center">
	<i class="fas fa-bell mr-2"></i> Notify All
	</button>
	</div>
	</div>
	</div>

	<!-- Recent Activity -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6 mb-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold text-gray-800">Recent Activity</h3>
	<button class="text-green-600 text-sm font-medium">View All</button>
	</div>
	<div class="space-y-4">
	<div class="flex items-start">
	<div class="bg-green-100 p-2 rounded-full mr-3">
	<i class="fas fa-check-circle text-green-600"></i>
	</div>
	<div>
	<p class="text-sm font-medium">Task "Harvest Section A" completed by Team B</p>
	<p class="text-xs text-gray-500">10 minutes ago</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="bg-blue-100 p-2 rounded-full mr-3">
	<i class="fas fa-tint text-blue-600"></i>
	</div>
	<div>
	<p class="text-sm font-medium">Irrigation system activated in Field 3</p>
	<p class="text-xs text-gray-500">25 minutes ago</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="bg-yellow-100 p-2 rounded-full mr-3">
	<i class="fas fa-exclamation-triangle text-yellow-600"></i>
	</div>
	<div>
	<p class="text-sm font-medium">Low soil moisture detected in Section C</p>
	<p class="text-xs text-gray-500">1 hour ago</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Crop Health Overview -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Crop Health Overview</h3>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
	<div class="text-center">
	<div class="bg-green-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
	<i class="fas fa-leaf text-green-600 text-2xl"></i>
	</div>
	<p class="text-sm text-gray-600">Wheat</p>
	<p class="font-bold text-green-600">92%</p>
	</div>
	<div class="text-center">
	<div class="bg-yellow-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
	<i class="fas fa-leaf text-yellow-600 text-2xl"></i>
	</div>
	<p class="text-sm text-gray-600">Corn</p>
	<p class="font-bold text-yellow-600">78%</p>
	</div>
	<div class="text-center">
	<div class="bg-red-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
	<i class="fas fa-leaf text-red-600 text-2xl"></i>
	</div>
	<p class="text-sm text-gray-600">Soybeans</p>
	<p class="font-bold text-red-600">65%</p>
	</div>
	<div class="text-center">
	<div class="bg-blue-100 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">
	<i class="fas fa-leaf text-blue-600 text-2xl"></i>
	</div>
	<p class="text-sm text-gray-600">Barley</p>
	<p class="font-bold text-blue-600">88%</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Farm Worker View -->
	<div id="worker-view" class="role-view hidden">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
	<!-- Worker Status -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<div class="flex items-center mb-4">
	<div class="bg-green-100 p-3 rounded-full mr-3">
	<i class="fas fa-user text-green-600"></i>
	</div>
	<div>
	<h3 class="text-lg font-semibold text-gray-800">Your Status</h3>
	<p class="text-sm text-gray-500">Active - Team B</p>
	</div>
	</div>
	<div class="space-y-3">
	<div class="flex justify-between">
	<span class="text-gray-600">Fatigue Level</span>
	<span class="font-medium">Low</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">Today's Tasks</span>
	<span class="font-medium">4/6 completed</span>
	</div>
	<div class="flex justify-between">
	<span class="text-gray-600">Performance</span>
	<span class="font-medium text-green-600">92%</span>
	</div>
	</div>
	</div>

	<!-- Current Task -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Current Task</h3>
	<div class="bg-blue-50 p-4 rounded-lg mb-3">
	<div class="flex justify-between mb-1">
	<span class="font-medium">Harvest Section A</span>
	<span class="text-sm text-blue-600">Priority: High</span>
	</div>
	<p class="text-sm text-gray-600 mb-2">Complete harvesting of wheat in designated area</p>
	<div class="flex justify-between text-xs text-gray-500">
	<span>Started: 9:30 AM</span>
	<span>Est. Time: 2h 15m</span>
	</div>
	</div>
	<div class="flex justify-between items-center">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
	</div>
	<span class="ml-2 text-sm font-medium">45%</span>
	</div>
	<button class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg text-sm font-medium">
	<i class="fas fa-check-circle mr-2"></i> Mark Complete
	</button>
	</div>

	<!-- Environmental Conditions -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Field Conditions</h3>
	<div class="grid grid-cols-2 gap-4">
	<div class="text-center">
	<div class="sensor-value text-blue-600">24°C</div>
	<div class="sensor-label">Temperature</div>
	</div>
	<div class="text-center">
	<div class="sensor-value text-green-600">65%</div>
	<div class="sensor-label">Humidity</div>
	</div>
	<div class="text-center">
	<div class="sensor-value text-yellow-600">32%</div>
	<div class="sensor-label">Soil Moisture</div>
	</div>
	<div class="text-center">
	<div class="sensor-value text-gray-600">12 km/h</div>
	<div class="sensor-label">Wind Speed</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Task Notifications -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6 mb-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold text-gray-800">Task Notifications</h3>
	<span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">3 New</span>
	</div>
	<div class="space-y-3">
	<div class="flex items-start p-3 hover:bg-gray-50 rounded-lg">
	<div class="bg-blue-100 p-2 rounded-full mr-3">
	<i class="fas fa-tasks text-blue-600"></i>
	</div>
	<div class="flex-1">
	<p class="font-medium">New Task Assigned</p>
	<p class="text-sm text-gray-600">Irrigation check in Field 2</p>
	<p class="text-xs text-gray-400">10 min ago</p>
	</div>
	<button class="text-blue-600 text-sm font-medium">View</button>
	</div>
	<div class="flex items-start p-3 hover:bg-gray-50 rounded-lg">
	<div class="bg-green-100 p-2 rounded-full mr-3">
	<i class="fas fa-clock text-green-600"></i>
	</div>
	<div class="flex-1">
	<p class="font-medium">Schedule Update</p>
	<p class="text-sm text-gray-600">Your next task starts at 2:00 PM</p>
	<p class="text-xs text-gray-400">25 min ago</p>
	</div>
	<button class="text-green-600 text-sm font-medium">View</button>
	</div>
	<div class="flex items-start p-3 hover:bg-gray-50 rounded-lg">
	<div class="bg-purple-100 p-2 rounded-full mr-3">
	<i class="fas fa-bullhorn text-purple-600"></i>
	</div>
	<div class="flex-1">
	<p class="font-medium">Team Announcement</p>
	<p class="text-sm text-gray-600">Safety meeting at 3:00 PM</p>
	<p class="text-xs text-gray-400">1 hour ago</p>
	</div>
	<button class="text-purple-600 text-sm font-medium">View</button>
	</div>
	</div>
	</div>

	<!-- Performance Tips -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Performance Tips</h3>
	<div class="bg-green-50 p-4 rounded-lg mb-3">
	<div class="flex items-start">
	<div class="bg-green-100 p-2 rounded-full mr-3">
	<i class="fas fa-lightbulb text-green-600"></i>
	</div>
	<div>
	<p class="font-medium">Harvesting Efficiency</p>
	<p class="text-sm text-gray-600">Try alternating between standing and kneeling positions to reduce fatigue during harvesting tasks.</p>
	</div>
	</div>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg">
	<div class="flex items-start">
	<div class="bg-blue-100 p-2 rounded-full mr-3">
	<i class="fas fa-lightbulb text-blue-600"></i>
	</div>
	<div>
	<p class="font-medium">Tool Maintenance</p>
	<p class="text-sm text-gray-600">Clean and oil your tools at the end of each day to maintain optimal performance.</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Seed Breeder View -->
	<div id="breeder-view" class="role-view hidden">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<!-- Cultivar Performance -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Cultivar Performance</h3>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Cultivar</th>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Yield</th>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Health</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Wheat-X2023</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">92%</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<div class="crop-health-indicator bg-green-500 w-16"></div>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Corn-Pro-5G</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">87%</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<div class="crop-health-indicator bg-green-400 w-16"></div>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Soybean-Elite</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">78%</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<div class="crop-health-indicator bg-yellow-500 w-16"></div>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Barley-Max</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">85%</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<div class="crop-health-indicator bg-green-400 w-16"></div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Optimal Conditions -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Optimal Growing Conditions</h3>
	<div class="bg-blue-50 p-4 rounded-lg mb-4">
	<div class="flex justify-between items-center mb-2">
	<span class="font-medium">Wheat-X2023</span>
	<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Current</span>
	</div>
	<div class="grid grid-cols-2 gap-3 text-sm">
	<div>
	<span class="text-gray-600">Temperature:</span>
	<span class="font-medium">18-24°C</span>
	</div>
	<div>
	<span class="text-gray-600">Soil pH:</span>
	<span class="font-medium">6.0-7.0</span>
	</div>
	<div>
	<span class="text-gray-600">Moisture:</span>
	<span class="font-medium">30-40%</span>
	</div>
	<div>
	<span class="text-gray-600">Sunlight:</span>
	<span class="font-medium">Full</span>
	</div>
	</div>
	</div>
	<div class="bg-green-50 p-4 rounded-lg">
	<div class="flex justify-between items-center mb-2">
	<span class="font-medium">Corn-Pro-5G</span>
	<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Recommended</span>
	</div>
	<div class="grid grid-cols-2 gap-3 text-sm">
	<div>
	<span class="text-gray-600">Temperature:</span>
	<span class="font-medium">21-30°C</span>
	</div>
	<div>
	<span class="text-gray-600">Soil pH:</span>
	<span class="font-medium">5.8-7.0</span>
	</div>
	<div>
	<span class="text-gray-600">Moisture:</span>
	<span class="font-medium">35-45%</span>
	</div>
	<div>
	<span class="text-gray-600">Sunlight:</span>
	<span class="font-medium">Full</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Growth Comparison -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6 mb-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold text-gray-800">Growth Comparison</h3>
	<div class="flex space-x-2">
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded-lg text-xs font-medium">Week</button>
	<button class="bg-green-100 hover:bg-green-200 text-green-800 py-1 px-3 rounded-lg text-xs font-medium">Month</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-3 rounded-lg text-xs font-medium">Year</button>
	</div>
	</div>
	<div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
	<p class="text-gray-400">Growth comparison chart visualization</p>
	</div>
	</div>

	<!-- Research Data -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Research Data</h3>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div class="bg-purple-50 p-4 rounded-lg text-center">
	<div class="sensor-value text-purple-600">24.7kg</div>
	<div class="sensor-label">Avg Yield per m²</div>
	</div>
	<div class="bg-yellow-50 p-4 rounded-lg text-center">
	<div class="sensor-value text-yellow-600">18 days</div>
	<div class="sensor-label">Avg Growth Speed</div>
	</div>
	<div class="bg-red-50 p-4 rounded-lg text-center">
	<div class="sensor-value text-red-600">92%</div>
	<div class="sensor-label">Disease Resistance</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Sustainability Officer View -->
	<div id="sustainability-view" class="role-view hidden">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
	<!-- Resource Efficiency -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Resource Efficiency</h3>
	<div class="space-y-4">
	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium">Water Usage</span>
	<span class="text-sm font-medium">65%</span>
	</div>
	<div class="task-progress bg-blue-500 w-full"></div>
	<p class="text-xs text-gray-500 mt-1">15% reduction from last month</p>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium">Energy Consumption</span>
	<span class="text-sm font-medium">72%</span>
	</div>
	<div class="task-progress bg-green-500 w-full"></div>
	<p class="text-xs text-gray-500 mt-1">8% reduction from last month</p>
	</div>
	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium">Fertilizer Usage</span>
	<span class="text-sm font-medium">58%</span>
	</div>
	<div class="task-progress bg-yellow-500 w-full"></div>
	<p class="text-xs text-gray-500 mt-1">22% reduction from last month</p>
	</div>
	</div>
	</div>

	<!-- Carbon Footprint -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Carbon Footprint</h3>
	<div class="h-48 bg-gray-50 rounded-lg flex items-center justify-center mb-3">
	<p class="text-gray-400">Carbon footprint visualization</p>
	</div>
	<div class="grid grid-cols-2 gap-2 text-sm">
	<div class="bg-green-50 p-2 rounded">
	<p class="text-gray-600">Current</p>
	<p class="font-bold text-green-600">2.4 tCO₂e</p>
	</div>
	<div class="bg-blue-50 p-2 rounded">
	<p class="text-gray-600">Target</p>
	<p class="font-bold text-blue-600">1.8 tCO₂e</p>
	</div>
	<div class="bg-purple-50 p-2 rounded">
	<p class="text-gray-600">Reduction</p>
	<p class="font-bold text-purple-600">15%</p>
	</div>
	<div class="bg-yellow-50 p-2 rounded">
	<p class="text-gray-600">Ranking</p>
	<p class="font-bold text-yellow-600">Top 20%</p>
	</div>
	</div>
	</div>

	<!-- Sustainability Goals -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Sustainability Goals</h3>
	<div class="space-y-3">
	<div class="flex items-center">
	<div class="bg-green-100 p-1 rounded-full mr-3">
	<i class="fas fa-check text-green-600 text-xs"></i>
	</div>
	<div class="flex-1">
	<p class="text-sm font-medium">Reduce water usage by 20%</p>
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-1.5">
	<div class="bg-green-600 h-1.5 rounded-full" style="width: 85%"></div>
	</div>
	<span class="ml-2 text-xs">85%</span>
	</div>
	</div>
	</div>
	<div class="flex items-center">
	<div class="bg-yellow-100 p-1 rounded-full mr-3">
	<i class="fas fa-spinner text-yellow-600 text-xs"></i>
	</div>
	<div class="flex-1">
	<p class="text-sm font-medium">Implement renewable energy</p>
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-1.5">
	<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 45%"></div>
	</div>
	<span class="ml-2 text-xs">45%</span>
	</div>
	</div>
	</div>
	<div class="flex items-center">
	<div class="bg-red-100 p-1 rounded-full mr-3">
	<i class="fas fa-times text-red-600 text-xs"></i>
	</div>
	<div class="flex-1">
	<p class="text-sm font-medium">Zero waste initiative</p>
	<div class="flex items-center">
	<div class="w-full bg-gray-200 rounded-full h-1.5">
	<div class="bg-red-500 h-1.5 rounded-full" style="width: 15%"></div>
	</div>
	<span class="ml-2 text-xs">15%</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Environmental Impact Reports -->
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-lg font-semibold text-gray-800">Environmental Reports</h3>
	<button class="bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded-lg text-sm font-medium">
	<i class="fas fa-download mr-1"></i> Export
	</button>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Report</th>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Period</th>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
	<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Water Usage</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">June 2023</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Completed</span>
	</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<button class="text-blue-600 hover:text-blue-800">View</button>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Carbon Emissions</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">Q2 2023</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Completed</span>
	</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<button class="text-blue-600 hover:text-blue-800">View</button>
	</td>
	</tr>
	<tr>
	<td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">Sustainability Audit</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">2023</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">In Progress</span>
	</td>
	<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
	<button class="text-blue-600 hover:text-blue-800">Continue</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>

	<!-- Tasks Content -->
	<div id="tasks" class="tab-content">
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Task Management</h2>

	<!-- Task Filter -->
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
	<div class="flex space-x-2">
	<button class="bg-green-600 text-white py-1 px-4 rounded-lg text-sm font-medium">All Tasks</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Pending</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Completed</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Overdue</button>
	</div>
	<div class="relative w-full md:w-auto">
	<input type="text" placeholder="Search tasks..." class="bg-gray-100 border-0 rounded-lg py-1 px-4 pr-8 focus:ring-2 focus:ring-green-500 w-full">
	<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	</div>
	</div>

	<!-- Task List -->
	<div class="space-y-4">
	<div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="font-medium text-lg">Harvest Section A</h3>
	<p class="text-gray-600 text-sm">Complete harvesting of wheat in designated area</p>
	<div class="flex items-center mt-2">
	<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-2">High Priority</span>
	<span class="text-gray-500 text-xs"><i class="fas fa-calendar-alt mr-1"></i> Due: Today, 5:00 PM</span>
	</div>
	</div>
	<div class="flex items-center">
	<div class="mr-4 text-center">
	<div class="text-sm text-gray-500">Progress</div>
	<div class="font-bold">45%</div>
	</div>
	<button class="bg-green-600 hover:bg-green-700 text-white p-2 rounded-full">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</div>
	<div class="mt-3 flex items-center justify-between">
	<div class="flex -space-x-2">
	<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Worker">
	<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Worker">
	<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Worker">
	<span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-200 ring-2 ring-white text-xs">+2</span>
	</div>
	<div class="text-sm text-gray-500">
	<i class="fas fa-map-marker-alt mr-1"></i> Field 3
	</div>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="font-medium text-lg">Irrigation Check</h3>
	<p class="text-gray-600 text-sm">Inspect and adjust irrigation system in Field 2</p>
	<div class="flex items-center mt-2">
	<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full mr-2">Medium Priority</span>
	<span class="text-gray-500 text-xs"><i class="fas fa-calendar-alt mr-1"></i> Due: Tomorrow, 9:00 AM</span>
	</div>
	</div>
	<div class="flex items-center">
	<div class="mr-4 text-center">
	<div class="text-sm text-gray-500">Progress</div>
	<div class="font-bold">15%</div>
	</div>
	<button class="bg-green-600 hover:bg-green-700 text-white p-2 rounded-full">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</div>
	<div class="mt-3 flex items-center justify-between">
	<div class="flex -space-x-2">
	<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Worker">
	<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Worker">
	</div>
	<div class="text-sm text-gray-500">
	<i class="fas fa-map-marker-alt mr-1"></i> Field 2
	</div>
	</div>
	</div>

	<div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
	<div class="flex justify-between items-start">
	<div>
	<h3 class="font-medium text-lg">Soil Testing</h3>
	<p class="text-gray-600 text-sm">Collect and analyze soil samples from multiple locations</p>
	<div class="flex items-center mt-2">
	<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full mr-2">Low Priority</span>
	<span class="text-gray-500 text-xs"><i class="fas fa-calendar-alt mr-1"></i> Due: Jul 15, 2023</span>
	</div>
	</div>
	<div class="flex items-center">
	<div class="mr-4 text-center">
	<div class="text-sm text-gray-500">Progress</div>
	<div class="font-bold">0%</div>
	</div>
	<button class="bg-green-600 hover:bg-green-700 text-white p-2 rounded-full">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</div>
	<div class="mt-3 flex items-center justify-between">
	<div class="flex -space-x-2">
	<img class="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="Worker">
	</div>
	<div class="text-sm text-gray-500">
	<i class="fas fa-map-marker-alt mr-1"></i> Multiple Locations
	</div>
	</div>
	</div>
	</div>

	<!-- Add New Task Button -->
	<button class="mt-6 w-full md:w-auto bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg text-sm font-medium flex items-center justify-center">
	<i class="fas fa-plus-circle mr-2"></i> Add New Task
	</button>
	</div>
	</div>

	<!-- Analytics Content -->
	<div id="analytics" class="tab-content">
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Farm Analytics</h2>

	<!-- Analytics Filters -->
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
	<div class="flex space-x-2">
	<button class="bg-green-600 text-white py-1 px-4 rounded-lg text-sm font-medium">Overview</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Crop Health</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Worker Performance</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Resource Usage</button>
	</div>
	<div class="flex space-x-2">
	<select class="bg-gray-100 border-0 rounded-lg py-1 px-4 focus:ring-2 focus:ring-green-500 text-sm">
	<option>Last 7 Days</option>
	<option>Last 30 Days</option>
	<option selected>Last 90 Days</option>
	<option>This Year</option>
	</select>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-download mr-1"></i> Export
	</button>
	</div>
	</div>

	<!-- Charts Grid -->
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<div class="bg-gray-50 rounded-lg p-4 h-64 flex items-center justify-center">
	<p class="text-gray-400">Yield Over Time Chart</p>
	</div>
	<div class="bg-gray-50 rounded-lg p-4 h-64 flex items-center justify-center">
	<p class="text-gray-400">Crop Health Distribution</p>
	</div>
	<div class="bg-gray-50 rounded-lg p-4 h-64 flex items-center justify-center">
	<p class="text-gray-400">Water Usage by Field</p>
	</div>
	<div class="bg-gray-50 rounded-lg p-4 h-64 flex items-center justify-center">
	<p class="text-gray-400">Task Completion Rate</p>
	</div>
	</div>

	<!-- Key Metrics -->
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
	<div class="bg-green-50 p-4 rounded-lg">
	<p class="text-sm text-gray-600">Average Yield</p>
	<p class="text-2xl font-bold">24.7 kg/m²</p>
	<p class="text-xs text-green-600 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12% from last period</p>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg">
	<p class="text-sm text-gray-600">Water Efficiency</p>
	<p class="text-2xl font-bold">78%</p>
	<p class="text-xs text-blue-600 mt-1"><i class="fas fa-arrow-up mr-1"></i> 8% from last period</p>
	</div>
	<div class="bg-yellow-50 p-4 rounded-lg">
	<p class="text-sm text-gray-600">Task Completion</p>
	<p class="text-2xl font-bold">92%</p>
	<p class="text-xs text-yellow-600 mt-1"><i class="fas fa-arrow-up mr-1"></i> 5% from last period</p>
	</div>
	<div class="bg-purple-50 p-4 rounded-lg">
	<p class="text-sm text-gray-600">Worker Satisfaction</p>
	<p class="text-2xl font-bold">88%</p>
	<p class="text-xs text-purple-600 mt-1"><i class="fas fa-arrow-up mr-1"></i> 15% from last period</p>
	</div>
	</div>

	<!-- Recommendations -->
	<div class="bg-white border border-gray-200 rounded-lg p-6">
	<h3 class="text-lg font-semibold text-gray-800 mb-4">Recommendations</h3>
	<div class="space-y-3">
	<div class="flex items-start">
	<div class="bg-green-100 p-2 rounded-full mr-3">
	<i class="fas fa-lightbulb text-green-600"></i>
	</div>
	<div>
	<p class="font-medium">Increase Irrigation in Field 3</p>
	<p class="text-sm text-gray-600">Soil moisture levels are consistently 15% below optimal in the northwest section.</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="bg-blue-100 p-2 rounded-full mr-3">
	<i class="fas fa-lightbulb text-blue-600"></i>
	</div>
	<div>
	<p class="font-medium">Rotate Team Assignments</p>
	<p class="text-sm text-gray-600">Team C shows 22% higher efficiency with harvesting tasks compared to planting.</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="bg-purple-100 p-2 rounded-full mr-3">
	<i class="fas fa-lightbulb text-purple-600"></i>
	</div>
	<div>
	<p class="font-medium">Adjust Fertilizer Mix</p>
	<p class="text-sm text-gray-600">Current nitrogen levels exceed requirements by 18% while potassium is deficient.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Reports Content -->
	<div id="reports" class="tab-content">
	<div class="dashboard-card bg-white rounded-lg shadow-sm p-6">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Farm Reports</h2>

	<!-- Report Filters -->
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
	<div class="flex space-x-2">
	<button class="bg-green-600 text-white py-1 px-4 rounded-lg text-sm font-medium">All Reports</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Weekly</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Monthly</button>
	<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 py-1 px-4 rounded-lg text-sm font-medium">Annual</button>
	</div>
	<div class="relative w-full md:w-auto">
	<input type="text" placeholder="Search reports..." class="bg-gray-100 border-0 rounded-lg py-1 px-4 pr-8 focus:ring-2 focus:ring-green-500 w-full">
	<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	</div>
	</div>

	<!-- Reports List -->
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Report Name</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="font-medium text-gray-900">June 2023 Farm Performance</div>
	<div class="text-sm text-gray-500">Comprehensive overview of farm operations</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Monthly</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 3, 2023</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900 mr-3">View</a>
	<a href="#" class="text-blue-600 hover:text-blue-900">Download</a>
	</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="font-medium text-gray-900">Q2 Sustainability Report</div>
	<div class="text-sm text-gray-500">Resource usage and environmental impact</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Quarterly</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 10, 2023</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900 mr-3">View</a>
	<a href="#" class="text-blue-600 hover:text-blue-900">Download</a>
	</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="font-medium text-gray-900">Weekly Task Completion</div>
	<div class="text-sm text-gray-500">June 26 - Jul 2 task performance</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Weekly</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 3, 2023</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900 mr-3">View</a>
	<a href="#" class="text-blue-600 hover:text-blue-900">Download</a>
	</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="font-medium text-gray-900">Crop Health Analysis</div>
	<div class="text-sm text-gray-500">Detailed cultivar performance metrics</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Monthly</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">In Progress</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900 mr-3">View</a>
	<a href="#" class="text-blue-600 hover:text-blue-900">Download</a>
	</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="font-medium text-gray-900">Annual Farm Summary</div>
	<div class="text-sm text-gray-500">2023 comprehensive annual report</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Annual</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Not Started</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Scheduled</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="#" class="text-green-600 hover:text-green-900 mr-3">View</a>
	<a href="#" class="text-blue-600 hover:text-blue-900">Download</a>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<!-- Pagination -->
	<div class="flex items-center justify-between mt-6">
	<div class="text-sm text-gray-500">
	Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> results
	</div>
	<div class="flex space-x-1">
	<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
	Previous
	</button>
	<button class="px-3 py-1 rounded-md bg-green-600 text-white">
	1
	</button>
	<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
	2
	</button>
	<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
	3
	</button>
	<button class="px-3 py-1 rounded-md bg-gray-100 text-gray-700 hover:bg-gray-200">
	Next
	</button>
	</div>
	</div>

	<!-- Generate Report Button -->
	<button class="mt-6 w-full md:w-auto bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg text-sm font-medium flex items-center justify-center">
	<i class="fas fa-plus-circle mr-2"></i> Generate New Report
	</button>
	</div>
	</div>
	</div>

	<script>
	// Tab functionality
	const tabButtons = document.querySelectorAll('.tab-btn');
	const tabContents = document.querySelectorAll('.tab-content');

	tabButtons.forEach(button => {
	button.addEventListener('click', () => {
	const tabId = button.getAttribute('data-tab');

	// Remove active class from all buttons and contents
	tabButtons.forEach(btn => btn.classList.remove('active'));
	tabContents.forEach(content => content.classList.remove('active'));

	// Add active class to clicked button and corresponding content
	button.classList.add('active');
	document.getElementById(tabId).classList.add('active');
	});
	});

	// Role selector functionality
	const roleSelector = document.getElementById('roleSelector');
	const roleViews = document.querySelectorAll('.role-view');

	roleSelector.addEventListener('change', () => {
	const selectedRole = roleSelector.value;

	// Hide all role views
	roleViews.forEach(view => view.classList.add('hidden'));

	// Show selected role view
	document.getElementById(`${selectedRole}-view`).classList.remove('hidden');
	});

	// Initialize with manager view
	document.getElementById('manager-view').classList.remove('hidden');
	</script>
	<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=ygdswe/smart-farmui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>