Cashflow Overview Card with Radar Chart

<section class="shadow-black/20 bg-[radial-gradient(circle_at_top_left,var(--tw-gradient-stops))] from-slate-200/10 to-slate-800/0 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 shadow-xl">
  <div class="flex items-start justify-between">
    <div class="">
      <h2 class="text-[18px] tracking-tight font-semibold text-white">Cashflow</h2>
      <p class="text-xs text-white/60">per month</p>
    </div>
    
  </div>

  <div class="mt-3 text-2xl font-semibold tracking-tight text-white">$2,895.89</div>

  <div class="mt-6">
    <div class="h-56 md:h-64">
      <canvas id="radarChart" class="w-full h-full" width="694" height="512" style="display: block; box-sizing: border-box; height: 256px; width: 347px;"></canvas>
    </div>
  </div>

  <div class="mt-4 flex items-center justify-between text-xs text-white/70">
    <span class="inline-flex items-center gap-2">
      <span class="h-1.5 w-8 rounded-full bg-sky-400"></span> Income <span class="text-white/40">6:47 AM</span>
    </span>
    <span class="inline-flex items-center gap-2">
      <span class="h-1.5 w-8 rounded-full bg-fuchsia-400"></span> Outcome <span class="text-white/40">6:51 PM</span>
    </span>
  </div>

  <script>
    (function () {
      if (!window.Chart) return;
      const canvas = document.getElementById('radarChart');
      if (!canvas) return;

      // Destroy existing chart on this canvas if any
      const existing = Chart.getChart(canvas);
      if (existing) existing.destroy();

      const ctx = canvas.getContext('2d');
      const container = canvas.parentElement;
      const height = (container && container.clientHeight) ? container.clientHeight : 256;

      // Local colors
      const gridColor = 'rgba(255,255,255,0.08)';
      const labelColor = 'rgba(255,255,255,0.7)';

      // Gradients that fit container height
      const gradientIncome = ctx.createLinearGradient(0, 0, 0, height);
      gradientIncome.addColorStop(0, 'rgba(56, 189, 248, 0.35)');
      gradientIncome.addColorStop(1, 'rgba(56, 189, 248, 0.05)');

      const gradientOutcome = ctx.createLinearGradient(0, 0, 0, height);
      gradientOutcome.addColorStop(0, 'rgba(232, 121, 249, 0.35)');
      gradientOutcome.addColorStop(1, 'rgba(232, 121, 249, 0.05)');

      new Chart(ctx, {
        type: 'radar',
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
          datasets: [
            {
              label: 'Income',
              data: [65, 45, 60, 30, 40, 55],
              borderColor: 'rgba(56, 189, 248, 1)',
              backgroundColor: gradientIncome,
              pointBackgroundColor: 'rgba(56, 189, 248, 1)',
              pointBorderColor: '#0b1020',
              pointRadius: 3,
              tension: 0.3
            },
            {
              label: 'Outcome',
              data: [50, 55, 70, 20, 35, 65],
              borderColor: 'rgba(167, 139, 250, 1)',
              backgroundColor: gradientOutcome,
              pointBackgroundColor: 'rgba(167, 139, 250, 1)',
              pointBorderColor: '#0b1020',
              pointRadius: 3,
              tension: 0.3
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: { display: false },
            tooltip: {
              backgroundColor: 'rgba(0,0,0,0.8)',
              borderColor: 'rgba(255,255,255,0.1)',
              borderWidth: 1,
              padding: 10,
              titleColor: '#fff',
              bodyColor: 'rgba(255,255,255,0.9)',
              titleFont: { family: 'Inter', size: 12, weight: '600' },
              bodyFont: { family: 'Inter', size: 12, weight: '500' }
            }
          },
          scales: {
            r: {
              angleLines: { color: gridColor },
              grid: { color: gridColor },
              pointLabels: { color: labelColor, font: { family: 'Inter', size: 11 } },
              ticks: { display: false, beginAtZero: true, max: 80 }
            }
          }
        }
      });
    })();
  </script>
</section>