384 lines
14 KiB
Plaintext
384 lines
14 KiB
Plaintext
---
|
|
import DashboardLayout from '../../layouts/DashboardLayout.astro';
|
|
import Icon from '../../components/Icon.astro';
|
|
import Timer from '../../components/Timer.vue';
|
|
import ManualEntry from '../../components/ManualEntry.vue';
|
|
import AutoSubmit from '../../components/AutoSubmit.vue';
|
|
import ConfirmForm from '../../components/ConfirmForm.vue';
|
|
import { db } from '../../db';
|
|
import { timeEntries, clients, tags, users } from '../../db/schema';
|
|
import { eq, desc, asc, and, sql, or, like } from 'drizzle-orm';
|
|
import { formatTimeRange } from '../../lib/formatTime';
|
|
import { getCurrentTeam } from '../../lib/getCurrentTeam';
|
|
|
|
const user = Astro.locals.user;
|
|
if (!user) return Astro.redirect('/login');
|
|
|
|
const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
|
|
if (!userMembership) return Astro.redirect('/dashboard');
|
|
|
|
const organizationId = userMembership.organizationId;
|
|
|
|
const allClients = await db.select()
|
|
.from(clients)
|
|
.where(eq(clients.organizationId, organizationId))
|
|
.all();
|
|
|
|
const allTags = await db.select()
|
|
.from(tags)
|
|
.where(eq(tags.organizationId, organizationId))
|
|
.all();
|
|
|
|
// Query params
|
|
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 filterStatus = url.searchParams.get('status') || '';
|
|
const filterType = url.searchParams.get('type') || '';
|
|
const sortBy = url.searchParams.get('sort') || 'start-desc';
|
|
const searchTerm = url.searchParams.get('search') || '';
|
|
|
|
const conditions = [eq(timeEntries.organizationId, organizationId)];
|
|
|
|
if (filterClient) {
|
|
conditions.push(eq(timeEntries.clientId, filterClient));
|
|
}
|
|
|
|
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}%`));
|
|
}
|
|
|
|
if (filterType === 'manual') {
|
|
conditions.push(eq(timeEntries.isManual, true));
|
|
} else if (filterType === 'timed') {
|
|
conditions.push(eq(timeEntries.isManual, false));
|
|
}
|
|
|
|
const totalCount = await db.select({ count: sql<number>`count(*)` })
|
|
.from(timeEntries)
|
|
.where(and(...conditions))
|
|
.get();
|
|
|
|
const totalPages = Math.ceil((totalCount?.count || 0) / pageSize);
|
|
|
|
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:
|
|
orderBy = desc(timeEntries.startTime);
|
|
}
|
|
|
|
const entries = await db.select({
|
|
entry: timeEntries,
|
|
client: clients,
|
|
user: users,
|
|
tag: tags,
|
|
})
|
|
.from(timeEntries)
|
|
.leftJoin(clients, eq(timeEntries.clientId, clients.id))
|
|
.leftJoin(users, eq(timeEntries.userId, users.id))
|
|
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
|
|
.where(and(...conditions))
|
|
.orderBy(orderBy)
|
|
.limit(pageSize)
|
|
.offset(offset)
|
|
.all();
|
|
|
|
const runningEntry = await db.select({
|
|
entry: timeEntries,
|
|
client: clients,
|
|
tag: tags,
|
|
})
|
|
.from(timeEntries)
|
|
.leftJoin(clients, eq(timeEntries.clientId, clients.id))
|
|
.leftJoin(tags, eq(timeEntries.tagId, tags.id))
|
|
.where(and(
|
|
eq(timeEntries.userId, user.id),
|
|
sql`${timeEntries.endTime} IS NULL`
|
|
))
|
|
.get();
|
|
|
|
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 - Chronus">
|
|
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Time Tracker</h1>
|
|
|
|
<!-- Tabs for Timer and Manual Entry -->
|
|
<div class="tabs tabs-border mb-6">
|
|
<input type="radio" name="tracker_tabs" class="tab" aria-label="Timer" checked="checked" />
|
|
<div class="tab-content border-base-content/20 p-6">
|
|
{allClients.length === 0 ? (
|
|
<div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
|
|
<Icon name="exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
|
|
<span class="flex-1 text-center sm:text-left">You need to create a client before tracking time.</span>
|
|
<a href="/dashboard/clients/new" class="btn btn-sm btn-primary whitespace-nowrap">Add Client</a>
|
|
</div>
|
|
) : (
|
|
<Timer
|
|
client:load
|
|
initialRunningEntry={runningEntry ? {
|
|
startTime: runningEntry.entry.startTime.getTime(),
|
|
description: runningEntry.entry.description,
|
|
clientId: runningEntry.entry.clientId,
|
|
tagId: runningEntry.tag?.id,
|
|
} : null}
|
|
clients={allClients.map(c => ({ id: c.id, name: c.name }))}
|
|
tags={allTags.map(t => ({ id: t.id, name: t.name, color: t.color }))}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<input type="radio" name="tracker_tabs" class="tab" aria-label="Manual Entry" />
|
|
<div class="tab-content border-base-content/20 p-6">
|
|
{allClients.length === 0 ? (
|
|
<div class="alert alert-warning flex flex-col sm:flex-row items-center gap-4">
|
|
<Icon name="exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
|
|
<span class="flex-1 text-center sm:text-left">You need to create a client before adding time entries.</span>
|
|
<a href="/dashboard/clients/new" class="btn btn-sm btn-primary whitespace-nowrap">Add Client</a>
|
|
</div>
|
|
) : (
|
|
<ManualEntry
|
|
client:idle
|
|
clients={allClients.map(c => ({ id: c.id, name: c.name }))}
|
|
tags={allTags.map(t => ({ id: t.id, name: t.name, color: t.color }))}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{allClients.length === 0 ? (
|
|
<!-- If no clients/categories, show nothing extra here since tabs handle warnings -->
|
|
) : null}
|
|
|
|
<!-- Filters and Search -->
|
|
<div class="card card-border bg-base-100 mb-6">
|
|
<div class="card-body p-4">
|
|
<form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-3">
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-xs">Search</legend>
|
|
<input
|
|
type="text"
|
|
id="tracker-search"
|
|
name="search"
|
|
placeholder="Search descriptions..."
|
|
class="input w-full"
|
|
value={searchTerm}
|
|
/>
|
|
</fieldset>
|
|
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-xs">Client</legend>
|
|
<AutoSubmit client:load>
|
|
<select id="tracker-client" name="client" class="select w-full">
|
|
<option value="">All Clients</option>
|
|
{allClients.map(client => (
|
|
<option value={client.id} selected={filterClient === client.id}>
|
|
{client.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</AutoSubmit>
|
|
</fieldset>
|
|
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-xs">Status</legend>
|
|
<AutoSubmit client:load>
|
|
<select id="tracker-status" name="status" class="select w-full">
|
|
<option value="" selected={filterStatus === ''}>All Entries</option>
|
|
<option value="completed" selected={filterStatus === 'completed'}>Completed</option>
|
|
<option value="running" selected={filterStatus === 'running'}>Running</option>
|
|
</select>
|
|
</AutoSubmit>
|
|
</fieldset>
|
|
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-xs">Entry Type</legend>
|
|
<AutoSubmit client:load>
|
|
<select id="tracker-type" name="type" class="select w-full">
|
|
<option value="" selected={filterType === ''}>All Types</option>
|
|
<option value="timed" selected={filterType === 'timed'}>Timed</option>
|
|
<option value="manual" selected={filterType === 'manual'}>Manual</option>
|
|
</select>
|
|
</AutoSubmit>
|
|
</fieldset>
|
|
|
|
<fieldset class="fieldset">
|
|
<legend class="fieldset-legend text-xs">Sort By</legend>
|
|
<AutoSubmit client:load>
|
|
<select id="tracker-sort" name="sort" class="select w-full">
|
|
<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>
|
|
</AutoSubmit>
|
|
</fieldset>
|
|
|
|
<input type="hidden" name="page" value="1" />
|
|
<div class="flex items-end md:col-span-2 lg:col-span-1">
|
|
<button type="submit" class="btn btn-primary btn-sm w-full">
|
|
<Icon name="magnifying-glass" class="w-4 h-4" />
|
|
Search
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-border bg-base-100">
|
|
<div class="card-body p-4">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="text-sm font-semibold flex items-center gap-2">
|
|
<Icon name="list-bullet" class="w-4 h-4" />
|
|
Time Entries ({totalCount?.count || 0} total)
|
|
</h2>
|
|
{(filterClient || filterStatus || filterType || searchTerm) && (
|
|
<a href="/dashboard/tracker" class="btn btn-xs btn-ghost">
|
|
<Icon name="x-mark" class="w-3 h-3" />
|
|
Clear Filters
|
|
</a>
|
|
)}
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Client</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, user: entryUser }) => (
|
|
<tr class="hover">
|
|
<td>
|
|
{entry.isManual ? (
|
|
<span class="badge badge-info badge-xs gap-1" title="Manual Entry">
|
|
<Icon name="pencil" class="w-3 h-3" />
|
|
Manual
|
|
</span>
|
|
) : (
|
|
<span class="badge badge-success badge-xs gap-1" title="Timed Entry">
|
|
<Icon name="clock" class="w-3 h-3" />
|
|
Timed
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td class="font-medium">{client?.name || 'Unknown'}</td>
|
|
<td class="text-base-content/60">{entry.description || '-'}</td>
|
|
<td>{entryUser?.name || 'Unknown'}</td>
|
|
<td class="whitespace-nowrap">
|
|
{entry.startTime.toLocaleDateString()}<br/>
|
|
<span class="text-xs text-base-content/60">
|
|
{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 text-base-content/60">
|
|
{entry.endTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<span class="badge badge-success badge-xs">Running</span>
|
|
)}
|
|
</td>
|
|
<td class="font-mono font-semibold text-primary text-sm">{formatTimeRange(entry.startTime, entry.endTime)}</td>
|
|
<td>
|
|
<ConfirmForm client:load message="Are you sure you want to delete this entry?" action={`/api/time-entries/${entry.id}/delete`} class="inline">
|
|
<button
|
|
type="submit"
|
|
class="btn btn-ghost btn-xs text-error"
|
|
>
|
|
<Icon name="trash" class="w-3.5 h-3.5" />
|
|
</button>
|
|
</ConfirmForm>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{totalPages > 1 && (
|
|
<div class="flex justify-center items-center gap-1 mt-4">
|
|
<a
|
|
href={`?page=${Math.max(1, page - 1)}${filterClient ? `&client=${filterClient}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
|
|
class={`btn btn-xs ${page === 1 ? 'btn-disabled' : ''}`}
|
|
>
|
|
<Icon name="chevron-left" class="w-3 h-3" />
|
|
Prev
|
|
</a>
|
|
|
|
<div class="flex gap-0.5">
|
|
{paginationPages.map(pageNum => (
|
|
<a
|
|
href={`?page=${pageNum}${filterClient ? `&client=${filterClient}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
|
|
class={`btn btn-xs ${page === pageNum ? 'btn-active' : ''}`}
|
|
>
|
|
{pageNum}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<a
|
|
href={`?page=${Math.min(totalPages, page + 1)}${filterClient ? `&client=${filterClient}` : ''}${filterStatus ? `&status=${filterStatus}` : ''}${filterType ? `&type=${filterType}` : ''}${sortBy ? `&sort=${sortBy}` : ''}${searchTerm ? `&search=${searchTerm}` : ''}`}
|
|
class={`btn btn-xs ${page === totalPages ? 'btn-disabled' : ''}`}
|
|
>
|
|
Next
|
|
<Icon name="chevron-right" class="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|