Refactored a bunch of shit

src/pages/dashboard/reports.astro

@@ -1,31 +1,21 @@
 ---
 import DashboardLayout from '../../layouts/DashboardLayout.astro';
 import { Icon } from 'astro-icon/components';
+import StatCard from '../../components/StatCard.astro';
 import TagChart from '../../components/TagChart.vue';
 import ClientChart from '../../components/ClientChart.vue';
 import MemberChart from '../../components/MemberChart.vue';
 import { db } from '../../db';
 import { timeEntries, members, users, clients, tags, invoices } from '../../db/schema';
 import { eq, and, gte, lte, sql, desc } from 'drizzle-orm';
-import { formatDuration, formatTimeRange } from '../../lib/formatTime';
+import { formatDuration, formatTimeRange, formatCurrency } from '../../lib/formatTime';
+import { getCurrentTeam } from '../../lib/getCurrentTeam';
 
 const user = Astro.locals.user;
 if (!user) return Astro.redirect('/login');
 
-// Get current team from cookie
-const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
-
-const userMemberships = await db.select()
-  .from(members)
-  .where(eq(members.userId, user.id))
-  .all();
-
-if (userMemberships.length === 0) return Astro.redirect('/dashboard');
-
-// Use current team or fallback to first membership
-const userMembership = currentTeamId
-  ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
-  : userMemberships[0];
+const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
+if (!userMembership) return Astro.redirect('/dashboard');
 
 const teamMembers = await db.select({
   id: users.id,
@@ -247,13 +237,6 @@ const revenueByClient = allClients.map(client => {
   };
 }).filter(s => s.revenue > 0).sort((a, b) => b.revenue - a.revenue);
 
-function formatCurrency(amount: number, currency: string = 'USD') {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currency,
-  }).format(amount / 100);
-}
-
 function getTimeRangeLabel(range: string) {
   switch (range) {
     case 'today': return 'Today';
@@ -383,46 +366,44 @@ function getTimeRangeLabel(range: string) {
   <!-- Summary Stats -->
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
     <div class="stats shadow border border-base-300">
-      <div class="stat">
-        <div class="stat-figure text-primary">
-          <Icon name="heroicons:clock" class="w-8 h-8" />
-        </div>
-        <div class="stat-title">Total Time</div>
-        <div class="stat-value text-primary">{formatDuration(totalTime)}</div>
-        <div class="stat-desc">{getTimeRangeLabel(timeRange)}</div>
-      </div>
+      <StatCard
+        title="Total Time"
+        value={formatDuration(totalTime)}
+        description={getTimeRangeLabel(timeRange)}
+        icon="heroicons:clock"
+        color="text-primary"
+      />
     </div>
 
     <div class="stats shadow border border-base-300">
-      <div class="stat">
-        <div class="stat-figure text-secondary">
-          <Icon name="heroicons:list-bullet" class="w-8 h-8" />
-        </div>
-        <div class="stat-title">Total Entries</div>
-        <div class="stat-value text-secondary">{entries.length}</div>
-        <div class="stat-desc">{getTimeRangeLabel(timeRange)}</div>
-      </div>
+      <StatCard
+        title="Total Entries"
+        value={String(entries.length)}
+        description={getTimeRangeLabel(timeRange)}
+        icon="heroicons:list-bullet"
+        color="text-secondary"
+      />
     </div>
 
     <div class="stats shadow border border-base-300">
-      <div class="stat">
-        <div class="stat-figure text-success">
-          <Icon name="heroicons:currency-dollar" class="w-8 h-8" />
-        </div>
-        <div class="stat-title">Revenue</div>
-        <div class="stat-value text-success">{formatCurrency(revenueStats.total)}</div>
-        <div class="stat-desc">{invoiceStats.paid} paid invoices</div>
-      </div>
+      <StatCard
+        title="Revenue"
+        value={formatCurrency(revenueStats.total)}
+        description={`${invoiceStats.paid} paid invoices`}
+        icon="heroicons:currency-dollar"
+        color="text-success"
+      />
     </div>
 
     <div class="stats shadow border border-base-300">
-      <div class="stat">
-        <div class="stat-figure text-accent">
-          <Icon name="heroicons:user-group" class="w-8 h-8" />
-        </div>
-        <div class="stat-title">Active Members</div>
-        <div class="stat-value text-accent">{statsByMember.filter(s => s.entryCount > 0).length}</div>
-        <div class="stat-desc">of {teamMembers.length} total</div>
+      <StatCard
+        title="Active Members"
+        value={String(statsByMember.filter(s => s.entryCount > 0).length)}
+        description={`of ${teamMembers.length} total`}
+        icon="heroicons:user-group"
+        color="text-accent"
+      />
+    </div>
       </div>
     </div>
   </div>