First pass
This commit is contained in:
375
src/pages/dashboard/tracker.astro
Normal file
375
src/pages/dashboard/tracker.astro
Normal file
@@ -0,0 +1,375 @@
|
||||
---
|
||||
import DashboardLayout from '../../layouts/DashboardLayout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Timer from '../../components/Timer.vue';
|
||||
import { db } from '../../db';
|
||||
import { timeEntries, clients, members, tags, timeEntryTags, categories, users } from '../../db/schema';
|
||||
import { eq, desc, asc, and, sql, or, like } from 'drizzle-orm';
|
||||
|
||||
const user = Astro.locals.user;
|
||||
if (!user) return Astro.redirect('/login');
|
||||
|
||||
// Get user's first organization
|
||||
const userOrg = await db.select()
|
||||
.from(members)
|
||||
.where(eq(members.userId, user.id))
|
||||
.get();
|
||||
|
||||
if (!userOrg) return Astro.redirect('/dashboard');
|
||||
|
||||
// Get all clients for the organization
|
||||
const allClients = await db.select()
|
||||
.from(clients)
|
||||
.where(eq(clients.organizationId, userOrg.organizationId))
|
||||
.all();
|
||||
|
||||
// Get all categories for the organization
|
||||
const allCategories = await db.select()
|
||||
.from(categories)
|
||||
.where(eq(categories.organizationId, userOrg.organizationId))
|
||||
.all();
|
||||
|
||||
// Get all tags for the organization
|
||||
const allTags = await db.select()
|
||||
.from(tags)
|
||||
.where(eq(tags.organizationId, userOrg.organizationId))
|
||||
.all();
|
||||
|
||||
// Parse query parameters for filtering, sorting, and pagination
|
||||
const url = new URL(Astro.request.url);
|
||||
const page = parseInt(url.searchParams.get('page') || '1');
|
||||
const pageSize = 20;
|
||||
const offset = (page - 1) * pageSize;
|
||||
|
||||
const filterClient = url.searchParams.get('client') || '';
|
||||
const filterCategory = url.searchParams.get('category') || '';
|
||||
const filterStatus = url.searchParams.get('status') || ''; // completed, running, all
|
||||
const sortBy = url.searchParams.get('sort') || 'start-desc'; // start-desc, start-asc, duration-desc, duration-asc
|
||||
const searchTerm = url.searchParams.get('search') || '';
|
||||
|
||||
// Build query conditions
|
||||
const conditions = [eq(timeEntries.organizationId, userOrg.organizationId)];
|
||||
|
||||
if (filterClient) {
|
||||
conditions.push(eq(timeEntries.clientId, filterClient));
|
||||
}
|
||||
|
||||
if (filterCategory) {
|
||||
conditions.push(eq(timeEntries.categoryId, filterCategory));
|
||||
}
|
||||
|
||||
if (filterStatus === 'completed') {
|
||||
conditions.push(sql`${timeEntries.endTime} IS NOT NULL`);
|
||||
} else if (filterStatus === 'running') {
|
||||
conditions.push(sql`${timeEntries.endTime} IS NULL`);
|
||||
}
|
||||
|
||||
if (searchTerm) {
|
||||
conditions.push(like(timeEntries.description, `%${searchTerm}%`));
|
||||
}
|
||||
|
||||
// Get total count for pagination
|
||||
const totalCount = await db.select({ count: sql<number>`count(*)` })
|
||||
.from(timeEntries)
|
||||
.where(and(...conditions))
|
||||
.get();
|
||||
|
||||
const totalPages = Math.ceil((totalCount?.count || 0) / pageSize);
|
||||
|
||||
// Build order by
|
||||
let orderBy;
|
||||
switch (sortBy) {
|
||||
case 'start-asc':
|
||||
orderBy = asc(timeEntries.startTime);
|
||||
break;
|
||||
case 'duration-desc':
|
||||
orderBy = desc(sql`(CASE WHEN ${timeEntries.endTime} IS NULL THEN 0 ELSE ${timeEntries.endTime} - ${timeEntries.startTime} END)`);
|
||||
break;
|
||||
case 'duration-asc':
|
||||
orderBy = asc(sql`(CASE WHEN ${timeEntries.endTime} IS NULL THEN 0 ELSE ${timeEntries.endTime} - ${timeEntries.startTime} END)`);
|
||||
break;
|
||||
default: // start-desc
|
||||
orderBy = desc(timeEntries.startTime);
|
||||
}
|
||||
|
||||
const entries = await db.select({
|
||||
entry: timeEntries,
|
||||
client: clients,
|
||||
category: categories,
|
||||
user: users,
|
||||
})
|
||||
.from(timeEntries)
|
||||
.leftJoin(clients, eq(timeEntries.clientId, clients.id))
|
||||
.leftJoin(categories, eq(timeEntries.categoryId, categories.id))
|
||||
.leftJoin(users, eq(timeEntries.userId, users.id))
|
||||
.where(and(...conditions))
|
||||
.orderBy(orderBy)
|
||||
.limit(pageSize)
|
||||
.offset(offset)
|
||||
.all();
|
||||
|
||||
const runningEntry = await db.select({
|
||||
entry: timeEntries,
|
||||
client: clients,
|
||||
})
|
||||
.from(timeEntries)
|
||||
.leftJoin(clients, eq(timeEntries.clientId, clients.id))
|
||||
.where(and(
|
||||
eq(timeEntries.userId, user.id),
|
||||
sql`${timeEntries.endTime} IS NULL`
|
||||
))
|
||||
.get();
|
||||
|
||||
function formatDuration(start: Date, end: Date | null) {
|
||||
if (!end) return 'Running...';
|
||||
const ms = end.getTime() - start.getTime();
|
||||
const minutes = Math.round(ms / (1000 * 60));
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
|
||||
// Generate pagination page numbers
|
||||
function getPaginationPages(currentPage: number, totalPages: number): number[] {
|
||||
const pages: number[] = [];
|
||||
const numPagesToShow = Math.min(5, totalPages);
|
||||
|
||||
for (let i = 0; i < numPagesToShow; i++) {
|
||||
let pageNum;
|
||||
if (totalPages <= 5) {
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage <= 3) {
|
||||
pageNum = i + 1;
|
||||
} else if (currentPage >= totalPages - 2) {
|
||||
pageNum = totalPages - 4 + i;
|
||||
} else {
|
||||
pageNum = currentPage - 2 + i;
|
||||
}
|
||||
pages.push(pageNum);
|
||||
}
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
const paginationPages = getPaginationPages(page, totalPages);
|
||||
---
|
||||
|
||||
<DashboardLayout title="Time Tracker - Zamaan">
|
||||
<h1 class="text-3xl font-bold mb-6">Time Tracker</h1>
|
||||
|
||||
{allClients.length === 0 ? (
|
||||
<div class="alert alert-warning mb-6">
|
||||
<span>You need to create a client before tracking time.</span>
|
||||
<a href="/dashboard/clients/new" class="btn btn-sm btn-primary">Add Client</a>
|
||||
</div>
|
||||
) : allCategories.length === 0 ? (
|
||||
<div class="alert alert-warning mb-6">
|
||||
<span>You need to create a category before tracking time.</span>
|
||||
<a href="/dashboard/team/settings" class="btn btn-sm btn-primary">Team Settings</a>
|
||||
</div>
|
||||
) : (
|
||||
<Timer
|
||||
client:load
|
||||
initialRunningEntry={runningEntry ? {
|
||||
startTime: runningEntry.entry.startTime.getTime(),
|
||||
description: runningEntry.entry.description,
|
||||
clientId: runningEntry.entry.clientId,
|
||||
categoryId: runningEntry.entry.categoryId,
|
||||
} : null}
|
||||
clients={allClients.map(c => ({ id: c.id, name: c.name }))}
|
||||
categories={allCategories.map(c => ({ id: c.id, name: c.name, color: c.color }))}
|
||||
tags={allTags.map(t => ({ id: t.id, name: t.name, color: t.color }))}
|
||||
/>
|
||||
)}
|
||||
|
||||
<!-- Filters and Search -->
|
||||
<div class="card bg-base-200 shadow-xl border border-base-300 mb-6">
|
||||
<div class="card-body">
|
||||
<form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Search</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Search descriptions..."
|
||||
class="input input-bordered"
|
||||
value={searchTerm}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Client</span>
|
||||
</label>
|
||||
<select name="client" class="select select-bordered" onchange="this.form.submit()">
|
||||
<option value="">All Clients</option>
|
||||
{allClients.map(client => (
|
||||
<option value={client.id} selected={filterClient === client.id}>
|
||||
{client.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Category</span>
|
||||
</label>
|
||||
<select name="category" class="select select-bordered" onchange="this.form.submit()">
|
||||
<option value="">All Categories</option>
|
||||
{allCategories.map(category => (
|
||||
<option value={category.id} selected={filterCategory === category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Status</span>
|
||||
</label>
|
||||
<select name="status" class="select select-bordered" onchange="this.form.submit()">
|
||||
<option value="" selected={filterStatus === ''}>All Entries</option>
|
||||
<option value="completed" selected={filterStatus === 'completed'}>Completed</option>
|
||||
<option value="running" selected={filterStatus === 'running'}>Running</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Sort By</span>
|
||||
</label>
|
||||
<select name="sort" class="select select-bordered" onchange="this.form.submit()">
|
||||
<option value="start-desc" selected={sortBy === 'start-desc'}>Newest First</option>
|
||||
<option value="start-asc" selected={sortBy === 'start-asc'}>Oldest First</option>
|
||||
<option value="duration-desc" selected={sortBy === 'duration-desc'}>Longest Duration</option>
|
||||
<option value="duration-asc" selected={sortBy === 'duration-asc'}>Shortest Duration</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<div class="form-control md:col-span-2 lg:col-span-5">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<Icon name="heroicons:magnifying-glass" class="w-5 h-5" />
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="card-title">
|
||||
<Icon name="heroicons:list-bullet" class="w-6 h-6" />
|
||||
Time Entries ({totalCount?.count || 0} total)
|
||||
</h2>
|
||||
{(filterClient || filterCategory || filterStatus || searchTerm) && (
|
||||
<a href="/dashboard/tracker" class="btn btn-sm btn-ghost">
|
||||
<Icon name="heroicons:x-mark" class="w-4 h-4" />
|
||||
Clear Filters
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client</th>
|
||||
<th>Category</th>
|
||||
<th>Description</th>
|
||||
<th>Member</th>
|
||||
<th>Start Time</th>
|
||||
<th>End Time</th>
|
||||
<th>Duration</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map(({ entry, client, category, user: entryUser }) => (
|
||||
<tr>
|
||||
<td>{client?.name || 'Unknown'}</td>
|
||||
<td>
|
||||
{category ? (
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full" style={`background-color: ${category.color}`}></span>
|
||||
<span>{category.name}</span>
|
||||
</div>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td>{entry.description || '-'}</td>
|
||||
<td>{entryUser?.name || 'Unknown'}</td>
|
||||
<td class="whitespace-nowrap">
|
||||
{entry.startTime.toLocaleDateString()}<br/>
|
||||
<span class="text-xs opacity-50">
|
||||
{entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap">
|
||||
{entry.endTime ? (
|
||||
<>
|
||||
{entry.endTime.toLocaleDateString()}<br/>
|
||||
<span class="text-xs opacity-50">
|
||||
{entry.endTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span class="badge badge-success">Running</span>
|
||||
)}
|
||||
</td>
|
||||
<td class="font-mono">{formatDuration(entry.startTime, entry.endTime)}</td>
|
||||
<td>
|
||||
<form method="POST" action={`/api/time-entries/${entry.id}/delete`} class="inline">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-ghost btn-sm text-error"
|
||||
onclick="return confirm('Are you sure you want to delete this entry?')"
|
||||
>
|
||||
<Icon name="heroicons:trash" class="w-4 h-4" />
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{totalPages > 1 && (
|
||||
<div class="flex justify-center items-center gap-2 mt-6">
|
||||
<a
|
||||
href={`?page=${Math.max(1, page - 1)}${filterClient ? `&client=${filterClient}` : ''}${filterCategory ? `&category=${filterCategory}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
|
||||
class={`btn btn-sm ${page === 1 ? 'btn-disabled' : ''}`}
|
||||
>
|
||||
<Icon name="heroicons:chevron-left" class="w-4 h-4" />
|
||||
Previous
|
||||
</a>
|
||||
|
||||
<div class="flex gap-1">
|
||||
{paginationPages.map(pageNum => (
|
||||
<a
|
||||
href={`?page=${pageNum}${filterClient ? `&client=${filterClient}` : ''}${filterCategory ? `&category=${filterCategory}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
|
||||
class={`btn btn-sm ${page === pageNum ? 'btn-active' : ''}`}
|
||||
>
|
||||
{pageNum}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`?page=${Math.min(totalPages, page + 1)}${filterClient ? `&client=${filterClient}` : ''}${filterCategory ? `&category=${filterCategory}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
|
||||
class={`btn btn-sm ${page === totalPages ? 'btn-disabled' : ''}`}
|
||||
>
|
||||
Next
|
||||
<Icon name="heroicons:chevron-right" class="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
Reference in New Issue
Block a user