Time Tracking Dashboard Card with Sessions & Analytics

<div class="relative bg-zinc-900/40 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur">
              <!-- Toolbar -->
              <div class="flex items-center justify-between rounded-lg border border-white/10 bg-zinc-900/50 px-3 py-2 animate-fade-in-up delay-800">
                <div class="flex items-center gap-2">
                  <div class="flex h-6 w-6 items-center justify-center rounded-md bg-indigo-500/20 ring-1 ring-indigo-300/30 animate-bounce-subtle">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="timer" class="lucide lucide-timer h-3.5 w-3.5 text-indigo-300"><line x1="10" x2="14" y1="2" y2="2"></line><line x1="12" x2="15" y1="14" y2="11"></line><circle cx="12" cy="14" r="8"></circle></svg>
                  </div>
                  <span class="text-xs text-zinc-300 font-geist tracking-tight">Current timer</span>
                </div>
                <div class="flex items-center gap-1.5 stagger-entrance">
                  <button class="inline-flex items-center gap-1 rounded-md bg-white/5 px-2.5 py-1.5 text-xs text-white ring-1 ring-white/10 transition hover:bg-white/10 hover:ring-white/30 font-geist tracking-tight animate-scale-in delay-900">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-3.5 w-3.5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
                    Start
                  </button>
                  <button class="inline-flex items-center gap-1 rounded-md bg-white/5 px-2.5 py-1.5 text-xs text-white ring-1 ring-white/10 transition hover:bg-white/10 hover:ring-white/30 font-geist tracking-tight animate-scale-in delay-1000">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="pause" class="lucide lucide-pause h-3.5 w-3.5"><rect x="14" y="3" width="5" height="18" rx="1"></rect><rect x="5" y="3" width="5" height="18" rx="1"></rect></svg>
                    Pause
                  </button>
                  <button class="inline-flex items-center gap-1 rounded-md bg-white text-zinc-900 px-2.5 py-1.5 text-xs ring-1 ring-white/10 transition hover:bg-zinc-100 hover:ring-white/30 font-geist tracking-tight animate-scale-in delay-1100">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5"><path d="M20 6 9 17l-5-5"></path></svg>
                    Log
                  </button>
                </div>
              </div>
              <!-- Session List -->
              <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2 stagger-entrance">
                <div class="rounded-lg border border-white/10 bg-zinc-900/50 p-3 animate-fade-in-up delay-1000">
                  <div class="flex items-start justify-between">
                    <div>
                      <p class="text-xs text-zinc-400 font-geist tracking-tight">Client</p>
                      <p class="text-sm text-white font-geist tracking-tight">Aster Studio</p>
                    </div>
                    <span class="inline-flex items-center gap-1 rounded-md bg-emerald-500/15 px-2 py-0.5 text-[11px] text-emerald-300 ring-1 ring-emerald-400/20 font-geist tracking-tight animate-bounce-subtle">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="dollar-sign" class="lucide lucide-dollar-sign h-3 w-3"><line x1="12" x2="12" y1="2" y2="22"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                      Billable
                    </span>
                  </div>
                  <div class="mt-2 flex items-center justify-between">
                    <div class="flex items-center gap-2 text-sm text-zinc-300 font-geist 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="hammer" class="lucide lucide-hammer h-4 w-4 text-zinc-400"><path d="m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9"></path><path d="m18 15 4-4"></path><path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"></path></svg>
                      Design QA
                    </div>
                    <div class="text-sm text-zinc-400 font-geist tracking-tight">02:13:08</div>
                  </div>
                  <div class="mt-3 flex items-center justify-between">
                    <div class="flex items-center gap-2 stagger-entrance">
                      <span class="rounded-md bg-white/5 px-2 py-1 text-[11px] text-zinc-300 ring-1 ring-white/10 font-geist tracking-tight animate-scale-in delay-1200">UI</span>
                      <span class="rounded-md bg-white/5 px-2 py-1 text-[11px] text-zinc-300 ring-1 ring-white/10 font-geist tracking-tight animate-scale-in delay-1300">Review</span>
                    </div>
                    <button class="inline-flex items-center gap-1.5 rounded-md bg-white/5 px-2.5 py-1.5 text-xs text-white ring-1 ring-white/10 transition hover:bg-white/10 hover:ring-white/30 font-geist 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="square" class="lucide lucide-square h-3.5 w-3.5"><rect width="18" height="18" x="3" y="3" rx="2"></rect></svg>
                      Stop
                    </button>
                  </div>
                </div>
                <div class="rounded-lg border border-white/10 bg-zinc-900/50 p-3 animate-fade-in-up delay-1100">
                  <div class="flex items-start justify-between">
                    <div>
                      <p class="text-xs text-zinc-400 font-geist tracking-tight">Client</p>
                      <p class="text-sm text-white font-geist tracking-tight">Northbound</p>
                    </div>
                    <span class="inline-flex items-center gap-1 rounded-md bg-zinc-100/10 px-2 py-0.5 text-[11px] text-zinc-300 ring-1 ring-white/10 font-geist 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="tag" class="lucide lucide-tag h-3 w-3"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>
                      Non-billable
                    </span>
                  </div>
                  <div class="mt-2 flex items-center justify-between">
                    <div class="flex items-center gap-2 text-sm text-zinc-300 font-geist 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 h-4 w-4 text-zinc-400"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
                      Internal tooling
                    </div>
                    <div class="text-sm text-zinc-400 font-geist tracking-tight">00:47:15</div>
                  </div>
                  <div class="mt-3 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <span class="rounded-md bg-white/5 px-2 py-1 text-[11px] text-zinc-300 ring-1 ring-white/10 font-geist tracking-tight animate-scale-in delay-1400">Ops</span>
                    </div>
                    <button class="inline-flex items-center gap-1.5 rounded-md bg-white/5 px-2.5 py-1.5 text-xs text-white ring-1 ring-white/10 transition hover:bg-white/10 hover:ring-white/30 font-geist 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-3.5 w-3.5"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
                      Resume
                    </button>
                  </div>
                </div>
                <!-- Invoice mini card -->
                <div class="rounded-lg border border-white/10 bg-gradient-to-br from-zinc-900/60 to-zinc-900/30 p-3 md:col-span-2 animate-fade-in-up delay-1200">
                  <div class="flex items-center justify-between">
                    <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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="receipt" class="lucide lucide-receipt h-4 w-4 text-amber-300 animate-bounce-subtle"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"></path><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path><path d="M12 17.5v-11"></path></svg>
                      <p class="text-sm font-geist tracking-tight">Invoice #1043</p>
                    </div>
                    <span class="rounded-md bg-emerald-500/15 px-2 py-1 text-[11px] text-emerald-300 ring-1 ring-emerald-400/20 font-geist tracking-tight animate-bounce-subtle">Due in 7 days</span>
                  </div>
                  <div class="mt-2 grid grid-cols-3 gap-4 text-sm">
                    <div class="space-y-0.5">
                      <p class="text-zinc-400 font-geist tracking-tight">Client</p>
                      <p class="text-white font-geist tracking-tight">Aster Studio</p>
                    </div>
                    <div class="space-y-0.5">
                      <p class="text-zinc-400 font-geist tracking-tight">Amount</p>
                      <p class="text-white font-geist tracking-tight">$2,480.00</p>
                    </div>
                    <div class="flex items-end justify-end">
                      <button class="inline-flex items-center gap-1.5 rounded-lg bg-white text-zinc-900 px-3 py-1.5 text-xs ring-1 ring-white/10 transition hover:bg-zinc-100 hover:ring-white/30 font-geist tracking-tight animate-float">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send h-3.5 w-3.5"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg>
                        Send Invoice
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Analytics widget with chart -->
              <div class="animate-fade-in-up delay-1400 bg-zinc-900/50 border-white/10 border rounded-lg mt-4 pt-4 pr-4 pb-4 pl-4">
                <div class="flex items-center justify-between">
                  <div>
                    <h3 class="text-sm text-white font-geist tracking-tight">Weekly hours</h3>
                    <p class="text-xs text-zinc-400 font-geist tracking-tight">Billable vs non-billable</p>
                  </div>
                  <div class="flex items-center gap-2 stagger-entrance">
                    <span class="inline-flex items-center gap-1 rounded-md bg-emerald-500/15 px-2 py-0.5 text-[11px] text-emerald-300 ring-1 ring-emerald-400/20 font-geist tracking-tight animate-scale-in">
                      <span class="h-1.5 w-1.5 rounded-full bg-emerald-300 animate-bounce-subtle"></span>
                      Billable
                    </span>
                    <span class="inline-flex items-center gap-1 rounded-md bg-zinc-100/10 px-2 py-0.5 text-[11px] text-zinc-300 ring-1 ring-white/10 font-geist tracking-tight animate-scale-in">
                      <span class="h-1.5 w-1.5 rounded-full bg-zinc-400"></span>
                      Non
                    </span>
                  </div>
                </div>
                <div class="mt-3 rounded-md border border-white/10 p-2 animate-scale-in delay-200">
                  <div class="relative h-36 w-full">
                    <div class="h-full w-full">
                      <canvas id="hoursChart" width="926" height="288" style="display: block; box-sizing: border-box; height: 144px; width: 463px;" class=""></canvas>
                    </div>
                  </div>
                </div>
              </div>
            </div>