データ視覚化コンポーネント

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">
  <div class="w-full max-w-4xl">
    <!-- Chart Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mb-8">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Overview</h2>
      <!-- Replace with your chart library integration (e.g., Chart.js, D3.js) -->
      <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
        [Your Chart Goes Here]
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- KPl Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">Revenue</h3>
        <p class="text-2xl font-bold text-green-600 dark:text-green-400">$12,345</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
      </div>

      <!-- KPl Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">New Users</h3>
        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>
    </div>

    <!-- Table Container (Placeholder) -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark mt-8">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Recent Activity</h2>
        <!-- Replace with your table implementation -->
        <div class="overflow-x-auto">
            <table class="min-w-full text-gray-700 dark:text-gray-300">
                <thead>
                    <tr>
                        <th class="text-left py-2">User</th>
                        <th class="text-left py-2">Action</th>
                        <th class="text-left py-2">Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            John Doe
                        </td>
                        <td class="py-2">Viewed Dashboard</td>
                        <td class="py-2">1 hour ago</td>
                    </tr>
                     <tr>
                        <td class="py-2 flex items-center">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
                            Jane Smith
                            </td>
                        <td class="py-2">Updated Profile</td>
                        <td class="py-2">2 hours ago</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

  </div>
</div>

<style>
@layer components {
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
  }
}
</style>