Fixed a number of issues
This commit is contained in:
203
src/pages/dashboard/clients/[id]/index.astro
Normal file
203
src/pages/dashboard/clients/[id]/index.astro
Normal file
@@ -0,0 +1,203 @@
|
||||
---
|
||||
import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { db } from '../../../../db';
|
||||
import { clients, timeEntries, members, categories, users } from '../../../../db/schema';
|
||||
import { eq, and, desc, sql } from 'drizzle-orm';
|
||||
import { formatTimeRange } from '../../../../lib/formatTime';
|
||||
|
||||
const user = Astro.locals.user;
|
||||
if (!user) return Astro.redirect('/login');
|
||||
|
||||
const { id } = Astro.params;
|
||||
if (!id) return Astro.redirect('/dashboard/clients');
|
||||
|
||||
// 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 client = await db.select()
|
||||
.from(clients)
|
||||
.where(and(
|
||||
eq(clients.id, id),
|
||||
eq(clients.organizationId, userMembership.organizationId)
|
||||
))
|
||||
.get();
|
||||
|
||||
if (!client) return Astro.redirect('/dashboard/clients');
|
||||
|
||||
// Get recent activity
|
||||
const recentEntries = await db.select({
|
||||
entry: timeEntries,
|
||||
category: categories,
|
||||
user: users,
|
||||
})
|
||||
.from(timeEntries)
|
||||
.leftJoin(categories, eq(timeEntries.categoryId, categories.id))
|
||||
.leftJoin(users, eq(timeEntries.userId, users.id))
|
||||
.where(eq(timeEntries.clientId, client.id))
|
||||
.orderBy(desc(timeEntries.startTime))
|
||||
.limit(10)
|
||||
.all();
|
||||
|
||||
// Calculate total time tracked
|
||||
const totalTimeResult = await db.select({
|
||||
totalDuration: sql<number>`sum(CASE WHEN ${timeEntries.endTime} IS NOT NULL THEN ${timeEntries.endTime} - ${timeEntries.startTime} ELSE 0 END)`
|
||||
})
|
||||
.from(timeEntries)
|
||||
.where(eq(timeEntries.clientId, client.id))
|
||||
.get();
|
||||
|
||||
const totalDurationMs = totalTimeResult?.totalDuration || 0;
|
||||
const totalHours = Math.floor(totalDurationMs / (1000 * 60 * 60));
|
||||
const totalMinutes = Math.floor((totalDurationMs % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
// Get total entries count
|
||||
const totalEntriesResult = await db.select({ count: sql<number>`count(*)` })
|
||||
.from(timeEntries)
|
||||
.where(eq(timeEntries.clientId, client.id))
|
||||
.get();
|
||||
const totalEntriesCount = totalEntriesResult?.count || 0;
|
||||
---
|
||||
|
||||
<DashboardLayout title={`${client.name} - Clients - Chronus`}>
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<a href="/dashboard/clients" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold">{client.name}</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
<!-- Client Details Card -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 lg:col-span-2">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-2xl mb-1">{client.name}</h2>
|
||||
{client.email && (
|
||||
<div class="flex items-center gap-2 text-base-content/70 mb-4">
|
||||
<Icon name="heroicons:envelope" class="w-4 h-4" />
|
||||
<a href={`mailto:${client.email}`} class="link link-hover">{client.email}</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:pencil" class="w-4 h-4" />
|
||||
Edit
|
||||
</a>
|
||||
<form method="POST" action={`/api/clients/${client.id}/delete`} onsubmit="return confirm('Are you sure you want to delete this client? This will also delete all associated time entries.');">
|
||||
<button type="submit" class="btn btn-error btn-outline btn-sm">
|
||||
<Icon name="heroicons:trash" class="w-4 h-4" />
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="stats shadow w-full">
|
||||
<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 Tracked</div>
|
||||
<div class="stat-value text-primary">{totalHours}h {totalMinutes}m</div>
|
||||
<div class="stat-desc">Across all projects</div>
|
||||
</div>
|
||||
|
||||
<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">{totalEntriesCount}</div>
|
||||
<div class="stat-desc">Recorded entries</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meta Info Card -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 h-fit">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-lg mb-4">Information</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="text-sm font-medium text-base-content/60">Created</div>
|
||||
<div>{client.createdAt?.toLocaleDateString() ?? 'N/A'}</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">Recent Activity</h2>
|
||||
|
||||
{recentEntries.length > 0 ? (
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Category</th>
|
||||
<th>User</th>
|
||||
<th>Date</th>
|
||||
<th>Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recentEntries.map(({ entry, category, user: entryUser }) => (
|
||||
<tr>
|
||||
<td>{entry.description || '-'}</td>
|
||||
<td>
|
||||
{category ? (
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full" style={`background-color: ${category.color}`}></span>
|
||||
<span>{category.name}</span>
|
||||
</div>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td>{entryUser?.name || 'Unknown'}</td>
|
||||
<td>{entry.startTime.toLocaleDateString()}</td>
|
||||
<td class="font-mono">{formatTimeRange(entry.startTime, entry.endTime)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div class="text-center py-8 text-base-content/60">
|
||||
No time entries recorded for this client yet.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{recentEntries.length > 0 && (
|
||||
<div class="card-actions justify-center mt-4">
|
||||
<a href={`/dashboard/tracker?client=${client.id}`} class="btn btn-ghost btn-sm">
|
||||
View All Entries
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
Reference in New Issue
Block a user