atash/chronus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Moar
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m6s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2026-02-09 02:28:54 -07:00
parent 12d59bb42f
commit caf763aa1e
24 changed files with 1003 additions and 1169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/dashboard/tracker.astro
View File

@@ -139,7 +139,7 @@ const paginationPages = getPaginationPages(page, totalPages);
---
<DashboardLayout title="Time Tracker - Chronus">
<h1 class="text-3xl font-bold mb-6">Time Tracker</h1>
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Time Tracker</h1>
<!-- Tabs for Timer and Manual Entry -->
<div class="tabs tabs-lift mb-6">
@@ -189,28 +189,24 @@ const paginationPages = getPaginationPages(page, totalPages);
) : null}
<!-- Filters and Search -->
<div class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 hover:border-base-300 transition-all duration-200 mb-6">
<div class="card-body">
<form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
<div class="form-control">
<label class="label font-medium" for="tracker-search">
Search
</label>
<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 input-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full"
class="input w-full"
value={searchTerm}
/>
</div>
</fieldset>
<div class="form-control">
<label class="label font-medium" for="tracker-client">
Client
</label>
<select id="tracker-client" name="client" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Client</legend>
<select id="tracker-client" name="client" class="select w-full" onchange="this.form.submit()">
<option value="">All Clients</option>
{allClients.map(client => (
<option value={client.id} selected={filterClient === client.id}>
@@ -218,48 +214,40 @@ const paginationPages = getPaginationPages(page, totalPages);
</option>
))}
</select>
</div>
</fieldset>
<div class="form-control">
<label class="label font-medium" for="tracker-status">
Status
</label>
<select id="tracker-status" name="status" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Status</legend>
<select id="tracker-status" name="status" class="select w-full" 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>
</fieldset>
<div class="form-control">
<label class="label font-medium" for="tracker-type">
Entry Type
</label>
<select id="tracker-type" name="type" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Entry Type</legend>
<select id="tracker-type" name="type" class="select w-full" onchange="this.form.submit()">
<option value="" selected={filterType === ''}>All Types</option>
<option value="timed" selected={filterType === 'timed'}>Timed</option>
<option value="manual" selected={filterType === 'manual'}>Manual</option>
</select>
</div>
</fieldset>
<div class="form-control">
<label class="label font-medium" for="tracker-sort">
Sort By
</label>
<select id="tracker-sort" name="sort" class="select select-bordered bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors w-full" onchange="this.form.submit()">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Sort By</legend>
<select id="tracker-sort" name="sort" class="select w-full" 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>
</fieldset>
<input type="hidden" name="page" value="1" />
<div class="form-control md:col-span-2 lg:col-span-6">
<button type="submit" class="btn btn-primary shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all">
<Icon name="heroicons:magnifying-glass" class="w-5 h-5" />
<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="heroicons:magnifying-glass" class="w-4 h-4" />
Search
</button>
</div>
@@ -267,24 +255,24 @@ const paginationPages = getPaginationPages(page, totalPages);
</div>
</div>
<div class="card bg-base-200/30 backdrop-blur-sm shadow-lg border border-base-300/50 hover:border-base-300 transition-all duration-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" />
<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="heroicons: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-sm btn-ghost hover:bg-base-300/50 transition-colors">
<Icon name="heroicons:x-mark" class="w-4 h-4" />
<a href="/dashboard/tracker" class="btn btn-xs btn-ghost">
<Icon name="heroicons:x-mark" class="w-3 h-3" />
Clear Filters
</a>
)}
</div>
<div class="overflow-x-auto">
<table class="table table-zebra">
<table class="table table-sm">
<thead>
<tr class="bg-base-300/30">
<tr>
<th>Type</th>
<th>Client</th>
<th>Description</th>
@@ -297,26 +285,26 @@ const paginationPages = getPaginationPages(page, totalPages);
</thead>
<tbody>
{entries.map(({ entry, client, user: entryUser }) => (
<tr class="hover:bg-base-300/20 transition-colors">
<tr class="hover">
<td>
{entry.isManual ? (
<span class="badge badge-info badge-sm gap-1 shadow-sm" title="Manual Entry">
<span class="badge badge-info badge-xs gap-1" title="Manual Entry">
<Icon name="heroicons:pencil" class="w-3 h-3" />
Manual
</span>
) : (
<span class="badge badge-success badge-sm gap-1 shadow-sm" title="Timed Entry">
<span class="badge badge-success badge-xs gap-1" title="Timed Entry">
<Icon name="heroicons:clock" class="w-3 h-3" />
Timed
</span>
)}
</td>
<td class="font-medium">{client?.name || 'Unknown'}</td>
<td class="text-base-content/80">{entry.description || '-'}</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 opacity-50">
<span class="text-xs text-base-content/40">
{entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
</span>
</td>
@@ -324,23 +312,23 @@ const paginationPages = getPaginationPages(page, totalPages);
{entry.endTime ? (
<>
{entry.endTime.toLocaleDateString()}<br/>
<span class="text-xs opacity-50">
<span class="text-xs text-base-content/40">
{entry.endTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
</span>
</>
) : (
<span class="badge badge-success shadow-sm">Running</span>
<span class="badge badge-success badge-xs">Running</span>
)}
</td>
<td class="font-mono font-semibold text-primary">{formatTimeRange(entry.startTime, entry.endTime)}</td>
<td class="font-mono font-semibold text-primary text-sm">{formatTimeRange(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 hover:bg-error/10 transition-colors"
class="btn btn-ghost btn-xs text-error"
onclick="return confirm('Are you sure you want to delete this entry?')"
>
<Icon name="heroicons:trash" class="w-4 h-4" />
<Icon name="heroicons:trash" class="w-3.5 h-3.5" />
</button>
</form>
</td>
@@ -352,20 +340,20 @@ const paginationPages = getPaginationPages(page, totalPages);
<!-- Pagination -->
{totalPages > 1 && (
<div class="flex justify-center items-center gap-2 mt-6">
<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-sm transition-all ${page === 1 ? 'btn-disabled' : 'hover:bg-base-300/50'}`}
class={`btn btn-xs ${page === 1 ? 'btn-disabled' : ''}`}
>
<Icon name="heroicons:chevron-left" class="w-4 h-4" />
Previous
<Icon name="heroicons:chevron-left" class="w-3 h-3" />
Prev
</a>
<div class="flex gap-1">
<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-sm transition-all ${page === pageNum ? 'btn-active' : 'hover:bg-base-300/50'}`}
class={`btn btn-xs ${page === pageNum ? 'btn-active' : ''}`}
>
{pageNum}
</a>
@@ -374,10 +362,10 @@ const paginationPages = getPaginationPages(page, totalPages);
<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-sm transition-all ${page === totalPages ? 'btn-disabled' : 'hover:bg-base-300/50'}`}
class={`btn btn-xs ${page === totalPages ? 'btn-disabled' : ''}`}
>
Next
<Icon name="heroicons:chevron-right" class="w-4 h-4" />
<Icon name="heroicons:chevron-right" class="w-3 h-3" />
</a>
</div>
)}