chronus/src/pages/dashboard/index.astro

---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import { db } from '../../db';
import { organizations, members, timeEntries, clients, categories } from '../../db/schema';
import { eq, desc, and, isNull, gte, sql } from 'drizzle-orm';
import { formatDuration } from '../../lib/formatTime';

const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');

// Get current team from cookie or first membership
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;

const userOrgs = await db.select({
  id: organizations.id,
  name: organizations.name,
  role: members.role,
  organizationId: members.organizationId,
})
.from(members)
.innerJoin(organizations, eq(members.organizationId, organizations.id))
.where(eq(members.userId, user.id))
.all();

// Use current team or fallback to first
const currentOrg = currentTeamId
  ? userOrgs.find(o => o.organizationId === currentTeamId) || userOrgs[0]
  : userOrgs[0];

let stats = {
  totalTimeThisWeek: 0,
  totalTimeThisMonth: 0,
  activeTimers: 0,
  totalClients: 0,
  recentEntries: [] as any[],
};

if (currentOrg) {
  const now = new Date();
  const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
  const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);

  const weekStats = await db.select({
      totalDuration: sql<number>`sum(${timeEntries.endTime} - ${timeEntries.startTime})`
    })
    .from(timeEntries)
    .where(and(
      eq(timeEntries.organizationId, currentOrg.organizationId),
      gte(timeEntries.startTime, weekAgo),
      sql`${timeEntries.endTime} IS NOT NULL`
    ))
    .get();

  stats.totalTimeThisWeek = weekStats?.totalDuration || 0;

  const monthStats = await db.select({
      totalDuration: sql<number>`sum(${timeEntries.endTime} - ${timeEntries.startTime})`
    })
    .from(timeEntries)
    .where(and(
      eq(timeEntries.organizationId, currentOrg.organizationId),
      gte(timeEntries.startTime, monthAgo),
      sql`${timeEntries.endTime} IS NOT NULL`
    ))
    .get();

  stats.totalTimeThisMonth = monthStats?.totalDuration || 0;

  const activeCount = await db.select({ count: sql<number>`count(*)` })
    .from(timeEntries)
    .where(and(
      eq(timeEntries.organizationId, currentOrg.organizationId),
      isNull(timeEntries.endTime)
    ))
    .get();

  stats.activeTimers = activeCount?.count || 0;

  const clientCount = await db.select({ count: sql<number>`count(*)` })
    .from(clients)
    .where(eq(clients.organizationId, currentOrg.organizationId))
    .get();

  stats.totalClients = clientCount?.count || 0;

  stats.recentEntries = await db.select({
    entry: timeEntries,
    client: clients,
    category: categories,
  })
    .from(timeEntries)
    .innerJoin(clients, eq(timeEntries.clientId, clients.id))
    .innerJoin(categories, eq(timeEntries.categoryId, categories.id))
    .where(eq(timeEntries.organizationId, currentOrg.organizationId))
    .orderBy(desc(timeEntries.startTime))
    .limit(5)
    .all();
}

const hasMembership = userOrgs.length > 0;

---

<DashboardLayout title="Dashboard - Chronus">
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-8">
    <div>
      <h1 class="text-4xl font-bold text-primary mb-2">
        Dashboard
      </h1>
      <p class="text-base-content/60">Welcome back, {user.name}!</p>
    </div>
    <a href="/dashboard/organizations/new" class="btn btn-outline">
      <Icon name="heroicons:plus" class="w-5 h-5" />
      New Team
    </a>
  </div>

  {!hasMembership && (
    <div class="alert alert-info mb-8">
      <Icon name="heroicons:information-circle" class="w-6 h-6" />
      <div>
        <h3 class="font-bold">Welcome to Chronus!</h3>
        <div class="text-sm">You're not part of any team yet. Create one or wait for an invitation.</div>
      </div>
      <a href="/dashboard/organizations/new" class="btn btn-primary btn-sm">
        <Icon name="heroicons:plus" class="w-4 h-4" />
        New Team
      </a>
    </div>
  )}

  {hasMembership && (
    <>
      <!-- Stats Overview -->
      <div class="stats stats-vertical lg:stats-horizontal shadow-lg w-full mb-8">
        <div class="stat">
          <div class="stat-figure text-primary">
            <Icon name="heroicons:clock" class="w-8 h-8" />
          </div>
          <div class="stat-title">This Week</div>
          <div class="stat-value text-primary text-3xl">{formatDuration(stats.totalTimeThisWeek)}</div>
          <div class="stat-desc">Total tracked time</div>
        </div>

        <div class="stat">
          <div class="stat-figure text-secondary">
            <Icon name="heroicons:calendar" class="w-8 h-8" />
          </div>
          <div class="stat-title">This Month</div>
          <div class="stat-value text-secondary text-3xl">{formatDuration(stats.totalTimeThisMonth)}</div>
          <div class="stat-desc">Total tracked time</div>
        </div>

        <div class="stat">
          <div class="stat-figure text-accent">
            <Icon name="heroicons:play-circle" class="w-8 h-8" />
          </div>
          <div class="stat-title">Active Timers</div>
          <div class="stat-value text-accent text-3xl">{stats.activeTimers}</div>
          <div class="stat-desc">Currently running</div>
        </div>

        <div class="stat">
          <div class="stat-figure text-info">
            <Icon name="heroicons:building-office" class="w-8 h-8" />
          </div>
          <div class="stat-title">Clients</div>
          <div class="stat-value text-info text-3xl">{stats.totalClients}</div>
          <div class="stat-desc">Total active</div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Quick Actions -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title">
              <Icon name="heroicons:bolt" class="w-6 h-6 text-warning" />
              Quick Actions
            </h2>
            <div class="flex flex-col gap-3 mt-4">
              <a href="/dashboard/tracker" class="btn btn-primary">
                <Icon name="heroicons:play" class="w-5 h-5" />
                Start Timer
              </a>
              <a href="/dashboard/clients/new" class="btn btn-outline">
                <Icon name="heroicons:plus" class="w-5 h-5" />
                Add Client
              </a>
              <a href="/dashboard/reports" class="btn btn-outline">
                <Icon name="heroicons:chart-bar" class="w-5 h-5" />
                View Reports
              </a>
            </div>
          </div>
        </div>

        <!-- Recent Activity -->
        <div class="card bg-base-100 shadow-xl">
          <div class="card-body">
            <h2 class="card-title">
              <Icon name="heroicons:clock" class="w-6 h-6 text-success" />
              Recent Activity
            </h2>
            {stats.recentEntries.length > 0 ? (
              <ul class="space-y-3 mt-4">
                {stats.recentEntries.map(({ entry, client, category }) => (
                  <li class="p-3 rounded-lg bg-base-200 border-l-4 hover:bg-base-300 transition-colors" style={`border-color: ${category.color || '#3b82f6'}`}>
                    <div class="font-semibold text-sm">{client.name}</div>
                    <div class="text-xs text-base-content/60 mt-1">
                      {category.name} • {entry.endTime ? formatDuration(entry.endTime.getTime() - entry.startTime.getTime()) : 'Running...'}
                    </div>
                  </li>
                ))}
              </ul>
            ) : (
              <div class="flex flex-col items-center justify-center py-8 text-center mt-4">
                <Icon name="heroicons:clock" class="w-12 h-12 text-base-content/20 mb-3" />
                <p class="text-base-content/60 text-sm">No recent time entries</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  )}
</DashboardLayout>