Dashboard_Agriculture_ForestGreen_Luxury

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="flex flex-col lg:flex-row">
    <!-- Sidebar -->
    <aside class="w-full lg:w-64 bg-white dark:bg-gray-800 shadow-lg p-4 lg:p-6 flex flex-col items-center lg:items-start border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
      <div class="flex items-center mb-6">
        <svg class="h-10 w-10 text-emerald-600 dark:text-emerald-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 10H14.75L14.25 17H9.75Z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10L6.5 7H17.5L17 10M12 21V10" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.5 15C5.5 15.5 5 16 4.5 16C4 16 3.5 15.5 3.5 15C3.5 14.5 4 14 4.5 14C5 14 5.5 14.5 5.5 15Z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 15C18.5 15.5 19 16 19.5 16C20 16 20.5 15.5 20.5 15C20.5 14.5 20 14 19.5 14C19 14 18.5 14.5 18.5 15Z" />
        </svg>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 hidden lg:block">FarmFlow</h1>
      </div>
      <nav class="w-full">
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-900/40 font-medium transition duration-200 hover:bg-emerald-100 dark:hover:bg-emerald-900 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-1.5-1.5L21 12m-9 9v-7.5" />
          </svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M2 7l2 1m-2-1l2-1m-2 1v2.5M10 21h4c.54 0 1.05-.18 1.45-.5L19.5 17c.6-.45 1.5-.02 1.5.76V21c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1v-3.24c0-.78.9-1.21 1.5-.76L8.55 20.5c.4.32.91.5 1.45.5zm4.07-16.74C14.07 3.5 13.9 3 13.5 3c-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26c.4-.76.23-1.26-.17-1.26-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26z" />
          </svg>
          Crops
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
          </svg>
          Livestock
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L13 21 21 13M9 3v13a4 4 0 004 4h4a2 2 0 002-2V9.586a1 1 0 00-.293-.707l-2.586-2.586A1 1 0 0015.414 6H13a2 2 0 00-2 2z" />
          </svg>
          Inventory
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4v2m0 0h.01M17 17H7a2 2 0 01-2-2v-3a2 2 0 012-2h10a2 2 0 012 2v3a2 2 0 01-2 2zm0 0h.01" />
          </svg>
          Finance
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          Settings
        </a>
      </nav>

      <div class="mt-auto w-full pt-4 border-t border-gray-200 dark:border-gray-700 text-center lg:text-left">
        <div class="flex items-center justify-center lg:justify-start">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-3 hidden lg:block">
            <p class="text-sm font-semibold">John Davis</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Farm Manager</p>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 p-4 lg:p-8 overflow-y-auto">
      <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 sm:mb-0">Agricultural Overview</h2>
        <div class="flex items-center space-x-4">
          <button class="px-4 py-2 bg-emerald-600 dark:bg-emerald-700 text-white rounded-lg shadow-md hover:bg-emerald-700 dark:hover:bg-emerald-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
            <svg class="h-5 w-5 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Add New
          </button>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
          </button>
        </div>
      </header>

      <!-- Analytics Cards -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Total Yield (tons)</p>
            <svg class="h-6 w-6 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3,105</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-green-600 dark:text-green-400 font-semibold">+4.2%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. last month</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Active Fields</p>
            <svg class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657A8 8 0 1117.657 16.657z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">18</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-red-600 dark:text-red-400 font-semibold">-1.5%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">since new season</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Healthy Livestock</p>
            <svg class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c.045 4.383 3.633 7.792 8.52 8.167S22.03 16.03 21.072 12A12.001 12.001 0 0019.618 7.984z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">452</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-green-600 dark:text-green-400 font-semibold">+0.8%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">health rate</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Resources Used</p>
            <svg class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11V7l4-6 4 6v4m0 8a2 2 0 11-4 0 2 2 0 014 0zm-4-8c0 .828.672 1.5 1.5 1.5S15 11.828 15 11V6a1 1 0 00-1-1h-4a1 1 0 00-1 1v5c0 .828.672 1.5 1.5 1.5zm1.5-1.5z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">$8,750</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-red-600 dark:text-red-400 font-semibold">+7.1%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. average</span>
          </div>
        </div>
      </div>

      <!-- Main Charts and Tables -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Crop Health Chart -->
        <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Crop Health & Growth</h3>
          <div class="relative h-64 w-full flex items-center justify-center">
            <img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart for crop health" class="w-full h-full object-cover rounded-md opacity-70" />
            <div class="absolute text-lg text-gray-500 dark:text-gray-400">[Placeholder Chart Area]</div>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Visual representation of crop health indicators and growth trends over time.</p>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Recent Activities</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-center">
              <span class="text-emerald-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Harvested Wheat Field A</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago - 1.5 tons</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-blue-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Watering System Check</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday - Field B</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-yellow-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Purchased new fertilizer batch</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">2 days ago - $500</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-purple-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Vaccinated 10 cattle</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago - Barn 2</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Upcoming Tasks & Weather -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Upcoming Tasks -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Upcoming Tasks</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Soil Analysis - Field C</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 24th Oct, 2023</p>
              </div>
            </li>
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Plant Soybeans - Field D</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 26th Oct, 2023</p>
              </div>
            </li>
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Fertilize Orchard</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 30th Oct, 2023</p>
              </div>
            </li>
          </ul>
        </div>

        <!-- Weather Forecast -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Weather Forecast</h3>
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
              <svg class="h-12 w-12 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m-8-4v10l8 4 8-4V7m-8 4V4" />
              </svg>
              <div>
                <p class="text-4xl font-bold">18°C</p>
                <p class="text-gray-600 dark:text-gray-400">Partly Cloudy</p>
              </div>
            </div>
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Today</p>
          </div>
          <div class="grid grid-cols-3 gap-4 text-center text-gray-600 dark:text-gray-400">
            <div>
              <p class="text-sm">Tomorrow</p>
              <svg class="h-8 w-8 text-blue-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15C3 15.5 3 16 3.5 16.5C4 17 4.5 17 5 17H19C19.5 17 20 16.5 20 16V10M17 14L12 9 7 14M12 9V3" />
              </svg>
              <p class="text-sm">16°C</p>
            </div>
            <div>
              <p class="text-sm">Fri</p>
              <svg class="h-8 w-8 text-gray-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 11.5c0 1.93-1.57 3.5-3.5 3.5S10 13.43 10 11.5V10M15 10c0 1.1-.9 2-2 2s-2-.9-2-2m-1 7l4 4 4-4m-4 4V13" />
              </svg>
              <p class="text-sm">15°C</p>
            </div>
            <div>
              <p class="text-sm">Sat</p>
              <svg class="h-8 w-8 text-green-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18M18 13.06L12 18 6 13.06M6 10L12 5 18 10" />
              </svg>
              <p class="text-sm">20°C</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>