Finance Overview Card with Chart & Activity

<section class="flex flex-col gap-8 bg-white/5 border-white/10 border rounded-xl pt-6 pr-6 pb-6 pl-6 backdrop-blur" style="animation: slideRightFadeBlurIn 1s cubic-bezier(.42,0,.58,1) 1.25s both;">
      <div class="flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 w-5 h-5 text-indigo-400"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>
        <span class="text-xs text-white/60 font-sans tracking-tight">OVERVIEW</span>
      </div>
      <!-- Stats -->
      <div class="flex flex-col sm:flex-row justify-between gap-6">
        <div>
          <div class="flex items-center gap-1 text-sm text-white/60 font-sans tracking-tight">
            Today's Net Flow 
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="help-circle" class="lucide lucide-help-circle w-3 h-3"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
          </div>
          <div class="text-5xl sm:text-6xl font-bricolage tracking-tighter">$<span id="todayNet" class="font-bricolage tracking-tighter">1,150</span></div>
          <div class="flex gap-1 text-xs text-green-400 tracking-tight mt-2 items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-4 h-4"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg> +5.4%</div>
        </div>
        <div class="sm:text-right">
          <div class="flex items-center gap-1 text-sm text-white/60 font-sans tracking-tight">
            Month Estimate
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="help-circle" class="lucide lucide-help-circle w-3 h-3"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>
          </div>
          <div class="text-2xl font-bricolage tracking-tighter">$29,500</div>
          <div class="flex items-center gap-1 mt-2 text-yellow-300 text-xs font-sans tracking-tight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-4 h-4"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg> Forecast</div>
        </div>
      </div>
      <!-- Chart -->
      <div>
        <div class="border border-white/10 rounded-lg overflow-hidden p-4 bg-white/5">
          <div class="relative h-56 sm:h-40 md:h-48">
            <canvas id="financeChart" style="max-height: 200px; display: block; box-sizing: border-box; height: 192px; width: 476px;" width="952" height="384"></canvas>
          </div>
          <div class="flex justify-between text-xs text-white/60 mt-3">
            <span class="flex items-center gap-1 font-sans tracking-tight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-down-right" class="lucide lucide-arrow-down-right w-3 h-3"><path d="m7 7 10 10"></path><path d="M17 7v10H7"></path></svg>Expenses</span>
            <span class="flex items-center gap-1 font-sans tracking-tight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-3 h-3"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>Income</span>
          </div>
        </div>
      </div>
      <!-- Recent Activity -->
      <div>
        <div class="flex items-center gap-2 mb-3 text-xs text-white/60 font-sans tracking-tight">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="history" class="lucide lucide-history w-4 h-4 text-indigo-400"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg> RECENT ACTIVITY
        </div>
        <ul class="divide-y divide-white/10">
          <li class="flex items-center py-2 gap-4">
            <div class="flex-shrink-0 w-9 h-9 rounded-md bg-pink-500/20 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shopping-bag" class="lucide lucide-shopping-bag w-5 h-5 text-pink-300"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg>
            </div>
            <div class="flex-1">
              <div class="font-sans tracking-tight">GroceryMart</div>
              <div class="text-xs text-white/60 font-sans tracking-tight">Card · 9:30 AM</div>
            </div>
            <div class="text-right">
              <span class="text-pink-300 font-sans tracking-tight">- $74.22</span>
            </div>
          </li>
          <li class="flex items-center py-2 gap-4">
            <div class="flex-shrink-0 w-9 h-9 rounded-md bg-green-500/20 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="badge-dollar-sign" class="lucide lucide-badge-dollar-sign w-5 h-5 text-green-300"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path><path d="M12 18V6"></path></svg>
            </div>
            <div class="flex-1">
              <div class="font-sans tracking-tight">Freelance Payment</div>
              <div class="text-xs text-white/60 font-sans tracking-tight">BitFlux · 7:10 AM</div>
            </div>
            <div class="text-right">
              <span class="text-green-300 font-sans tracking-tight">+ $600.00</span>
            </div>
          </li>
          <li class="flex items-center py-2 gap-4">
            <div class="flex-shrink-0 w-9 h-9 rounded-md bg-indigo-400/20 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cloud" class="lucide lucide-cloud w-5 h-5 text-indigo-200"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path></svg>
            </div>
            <div class="flex-1">
              <div class="font-sans tracking-tight">Cloud Service</div>
              <div class="text-xs text-white/60 font-sans tracking-tight">VitaCard · Yesterday</div>
            </div>
            <div class="text-right">
              <span class="text-indigo-200 font-sans tracking-tight">- $42.00</span>
            </div>
          </li>
        </ul>
      </div>
    </section>