function App() {
  return (
    <>
      <div class="p-6 bg-gray-100 min-h-screen">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
          <div class="bg-red-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
            <div>
              <p class="text-sm opacity-90">Total Employees</p>
              <h2 class="text-3xl font-bold mt-1">125</h2>
            </div>
            <div class="text-4xl opacity-90">👥</div>
          </div>

          <div class="bg-blue-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
            <div>
              <p class="text-sm opacity-90">Departments</p>
              <h2 class="text-3xl font-bold mt-1">8</h2>
            </div>
            <div class="text-4xl opacity-90">🏢</div>
          </div>

          <div class="bg-green-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
            <div>
              <p class="text-sm opacity-90">Attendance Today</p>
              <h2 class="text-3xl font-bold mt-1">113</h2>
            </div>
            <div class="text-4xl opacity-90">🕒</div>
          </div>

          <div class="bg-yellow-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
            <div>
              <p class="text-sm opacity-90">Pending Payroll</p>
              <h2 class="text-3xl font-bold mt-1">12</h2>
            </div>
            <div class="text-4xl opacity-90">💼</div>
          </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-6">
          <div class="bg-white rounded-2xl shadow-sm p-5">
            <h3 class="text-lg font-bold text-gray-800 mb-4">
              Monthly Attendance
            </h3>
            <div class="h-72 flex items-end justify-between gap-3 border-t pt-6">
              <div class="flex flex-col items-center w-full">
                <div class="flex items-end gap-1 h-52">
                  <div class="w-4 bg-green-600 rounded-t-md h-24"></div>
                  <div class="w-4 bg-green-400 rounded-t-md h-16"></div>
                  <div class="w-4 bg-slate-400 rounded-t-md h-28"></div>
                </div>
                <span class="text-xs text-gray-500 mt-2">Jan</span>
              </div>

              <div class="flex flex-col items-center w-full">
                <div class="flex items-end gap-1 h-52">
                  <div class="w-4 bg-green-600 rounded-t-md h-32"></div>
                  <div class="w-4 bg-green-400 rounded-t-md h-24"></div>
                  <div class="w-4 bg-slate-400 rounded-t-md h-36"></div>
                </div>
                <span class="text-xs text-gray-500 mt-2">Feb</span>
              </div>

              <div class="flex flex-col items-center w-full">
                <div class="flex items-end gap-1 h-52">
                  <div class="w-4 bg-green-600 rounded-t-md h-28"></div>
                  <div class="w-4 bg-green-400 rounded-t-md h-20"></div>
                  <div class="w-4 bg-slate-400 rounded-t-md h-30"></div>
                </div>
                <span class="text-xs text-gray-500 mt-2">Mar</span>
              </div>

              <div class="flex flex-col items-center w-full">
                <div class="flex items-end gap-1 h-52">
                  <div class="w-4 bg-green-600 rounded-t-md h-20"></div>
                  <div class="w-4 bg-green-400 rounded-t-md h-24"></div>
                  <div class="w-4 bg-slate-400 rounded-t-md h-24"></div>
                </div>
                <span class="text-xs text-gray-500 mt-2">Apr</span>
              </div>

              <div class="flex flex-col items-center w-full">
                <div class="flex items-end gap-1 h-52">
                  <div class="w-4 bg-green-600 rounded-t-md h-32"></div>
                  <div class="w-4 bg-green-400 rounded-t-md h-16"></div>
                  <div class="w-4 bg-slate-400 rounded-t-md h-36"></div>
                </div>
                <span class="text-xs text-gray-500 mt-2">May</span>
              </div>

              <div class="flex flex-col items-center w-full">
                <div class="flex items-end gap-1 h-52">
                  <div class="w-4 bg-green-600 rounded-t-md h-28"></div>
                  <div class="w-4 bg-green-400 rounded-t-md h-20"></div>
                  <div class="w-4 bg-slate-400 rounded-t-md h-30"></div>
                </div>
                <span class="text-xs text-gray-500 mt-2">Jun</span>
              </div>

              <div class="flex flex-col items-center w-full">
                <div class="flex items-end gap-1 h-52">
                  <div class="w-4 bg-green-600 rounded-t-md h-36"></div>
                  <div class="w-4 bg-green-400 rounded-t-md h-28"></div>
                  <div class="w-4 bg-slate-400 rounded-t-md h-40"></div>
                </div>
                <span class="text-xs text-gray-500 mt-2">Jul</span>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-2xl shadow-sm p-5">
            <h3 class="text-lg font-bold text-gray-800 mb-4">
              Expense Breakdown
            </h3>
            <div class="flex flex-col items-center justify-center h-72">
              <div class="relative w-56 h-56 rounded-full bg-[conic-gradient(#3b82f6_0%_45%,#f97316_45%_60%,#16a34a_60%_85%,#facc15_85%_100%)]">
                <div class="absolute inset-10 bg-white rounded-full flex items-center justify-center text-center">
                  <div>
                    <p class="text-sm text-gray-500">Salaries</p>
                    <h4 class="text-2xl font-bold text-blue-600">45%</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-2xl shadow-sm p-5">
            <h3 class="text-lg font-bold text-gray-800 mb-4">
              Recent Activities
            </h3>
            <div class="space-y-4">
              <div class="flex items-center justify-between border-b pb-3">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">
                    👨
                  </div>
                  <p class="text-sm text-gray-700">
                    John Doe added a new employee
                  </p>
                </div>
                <span class="text-xs text-gray-500">5 mins ago</span>
              </div>

              <div class="flex items-center justify-between border-b pb-3">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">
                    👩
                  </div>
                  <p class="text-sm text-gray-700">
                    Payroll processed for June
                  </p>
                </div>
                <span class="text-xs text-gray-500">30 mins ago</span>
              </div>

              <div class="flex items-center justify-between border-b pb-3">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">
                    🧑
                  </div>
                  <p class="text-sm text-gray-700">Finance report updated</p>
                </div>
                <span class="text-xs text-gray-500">1 hour ago</span>
              </div>
            </div>

            <button class="mt-5 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-xl font-medium transition">
              🔔 New Notifications
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;