Industrial_Chart_Component_Ocean_Blue_Simple

<div class="bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl border border-blue-200 dark:border-blue-800">
  <div class="flex justify-between items-center mb-6 border-b pb-4 border-blue-300 dark:border-blue-700">
    <h2 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 font-mono tracking-wide">Donation Impact Overview</h2>
    <p class="text-sm text-blue-600 dark:text-blue-400 uppercase tracking-widest font-mono">Q4 2023</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Total Contributions</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">$12,450</p>
      </div>
      <div class="w-full bg-blue-200 dark:bg-blue-700 rounded-full h-2 mt-4">
        <div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Beneficiaries Reached</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">87</p>
      </div>
      <div class="text-xs text-blue-600 dark:text-blue-400 mt-4">+15% from Q3</div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Volunteer Hours</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">320 hrs</p>
      </div>
      <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-4 self-end">View Details &rarr;</a>
    </div>
  </div>

  <div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-md border border-blue-300 dark:border-blue-700">
    <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4">Impact Distribution</h3>
    <div class="relative h-48 sm:h-64">
      <!-- Placeholder for a simple bar chart or pie chart representation -->
      <div class="absolute inset-0 flex items-end p-2 sm:p-4">
        <div class="flex flex-grow justify-around items-end h-full">
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 70%; animation-delay: 0s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 50%; animation-delay: 0.1s;"></div>
          <div class="w-8 sm:w-10 bg-blue-800 dark:bg-sky-600 rounded-t-sm animate-bar-grow" style="height: 90%; animation-delay: 0.2s;"></div>
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 40%; animation-delay: 0.3s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 60%; animation-delay: 0.4s;"></div>
        </div>
      </div>

      <div class="absolute bottom-0 left-0 right-0 h-px bg-blue-400 dark:bg-blue-600"></div>
      <div class="absolute top-0 bottom-0 left-4 w-px bg-blue-400 dark:bg-blue-600"></div>
      
      <div class="absolute bottom-0 left-0 right-0 flex justify-around text-xs text-blue-700 dark:text-blue-300 pt-2 pb-1">
        <span>Food</span>
        <span>Water</span>
        <span>Shelter</span>
        <span>Health</span>
        <span>Educ.</span>
      </div>
    </div>
  </div>

  <div class="mt-6 text-center">
    <button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md font-semibold transition-colors duration-200 border border-blue-900 dark:border-blue-400 shadow-md font-mono">
      Generate Report
    </button>
  </div>
</div>

<style>
  @keyframes bar-grow {
    from { height: 0%; transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0%); opacity: 1; }
  }
  .animate-bar-grow {
    animation: bar-grow 0.8s ease-out forwards;
  }
</style>