<div class="w-full space-y-6 pb-24">
  <header class="space-y-6">
    <nav class="flex items-center gap-2">
      <button data-action="sidebar#toggle" class="w-9 h-9 inline-flex rounded-lg items-center justify-center hover:bg-gray-100 cursor-pointer">
        <%= icon("panel-left", color: "gray") %>
      </button>

      <span class="text-sm text-gray-500 font-medium">Home</span>

      <%= icon("chevron-right", color: "gray", size: "sm") %>

      <span class="text-gray-900 font-medium text-sm">Dashboard</span>
    </nav>

    <div class="space-y-1">
      <h1 class="text-3xl font-medium text-gray-900">Welcome back, <%= Current.user.first_name %></h1>
      <p class="text-gray-500">Here's what's happening with your money this week</p>
    </div>
  </header>

  <section class="bg-white py-4 rounded-xl shadow-border-xs">
    <%= render partial: "pages/dashboard/net_worth_chart", locals: { series: @balance_sheet.net_worth_series(period: @period), period: @period } %>
  </section>

  <section>
    <%= render "pages/dashboard/balance_sheet", balance_sheet: @balance_sheet %>
  </section>
</div>
