This commit is contained in:
@@ -21,20 +21,20 @@ const allClients = await db.select()
|
||||
|
||||
<DashboardLayout title="Clients - Chronus">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-3xl font-bold">Clients</h1>
|
||||
<a href="/dashboard/clients/new" class="btn btn-primary">Add Client</a>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">Clients</h1>
|
||||
<a href="/dashboard/clients/new" class="btn btn-primary btn-sm">Add Client</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{allClients.map(client => (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{client.name}</h2>
|
||||
{client.email && <p class="text-sm text-gray-500">{client.email}</p>}
|
||||
<p class="text-xs text-gray-400">Created {client.createdAt?.toLocaleDateString() ?? 'N/A'}</p>
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<a href={`/dashboard/clients/${client.id}`} class="btn btn-sm btn-ghost">View</a>
|
||||
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-sm btn-primary">Edit</a>
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4 gap-1">
|
||||
<h2 class="font-semibold">{client.name}</h2>
|
||||
{client.email && <p class="text-sm text-base-content/60">{client.email}</p>}
|
||||
<p class="text-xs text-base-content/40">Created {client.createdAt?.toLocaleDateString() ?? 'N/A'}</p>
|
||||
<div class="card-actions justify-end mt-3">
|
||||
<a href={`/dashboard/clients/${client.id}`} class="btn btn-xs btn-ghost">View</a>
|
||||
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-xs btn-primary">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,9 +42,9 @@ const allClients = await db.select()
|
||||
</div>
|
||||
|
||||
{allClients.length === 0 && (
|
||||
<div class="text-center py-12">
|
||||
<p class="text-gray-500 mb-4">No clients yet</p>
|
||||
<a href="/dashboard/clients/new" class="btn btn-primary">Add Your First Client</a>
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p class="text-base-content/50 text-sm mb-4">No clients yet</p>
|
||||
<a href="/dashboard/clients/new" class="btn btn-primary btn-sm">Add Your First Client</a>
|
||||
</div>
|
||||
)}
|
||||
</DashboardLayout>
|
||||
|
||||
@@ -29,145 +29,129 @@ if (!client) return Astro.redirect('/dashboard/clients');
|
||||
<DashboardLayout title={`Edit ${client.name} - Chronus`}>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
|
||||
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-xs">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold">Edit Client</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">Edit Client</h1>
|
||||
</div>
|
||||
|
||||
<form method="POST" action={`/api/clients/${client.id}/update`} class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<div class="form-control">
|
||||
<label class="label" for="name">
|
||||
Client Name
|
||||
</label>
|
||||
<form method="POST" action={`/api/clients/${client.id}/update`} class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Client Name</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={client.name}
|
||||
placeholder="Acme Corp"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
Email (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Email (optional)</legend>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={client.email || ''}
|
||||
placeholder="jason.borne@cia.com"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="phone">
|
||||
Phone (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Phone (optional)</legend>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={client.phone || ''}
|
||||
placeholder="+1 (780) 420-1337"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="divider">Address Details</div>
|
||||
<div class="divider text-xs text-base-content/40">Address Details</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="street">
|
||||
Street Address (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Street Address (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="street"
|
||||
name="street"
|
||||
value={client.street || ''}
|
||||
placeholder="123 Business Rd"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="city">
|
||||
City (optional)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">City (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
name="city"
|
||||
value={client.city || ''}
|
||||
placeholder="Edmonton"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="state">
|
||||
State / Province (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">State / Province (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="state"
|
||||
name="state"
|
||||
value={client.state || ''}
|
||||
placeholder="AB"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="zip">
|
||||
Zip / Postal Code (optional)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Zip / Postal Code (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="zip"
|
||||
name="zip"
|
||||
value={client.zip || ''}
|
||||
placeholder="10001"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="country">
|
||||
Country (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Country (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="country"
|
||||
name="country"
|
||||
value={client.country || ''}
|
||||
placeholder="Canada"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-between mt-6">
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-error btn-outline"
|
||||
class="btn btn-error btn-outline btn-sm"
|
||||
onclick={`document.getElementById('delete_modal').showModal()`}
|
||||
>
|
||||
Delete Client
|
||||
</button>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Save Changes</button>
|
||||
<a href={`/dashboard/clients/${client.id}`} class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,17 +161,17 @@ if (!client) return Astro.redirect('/dashboard/clients');
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<dialog id="delete_modal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg text-error">Delete Client?</h3>
|
||||
<p class="py-4">
|
||||
<h3 class="font-semibold text-base text-error">Delete Client?</h3>
|
||||
<p class="py-4 text-sm">
|
||||
Are you sure you want to delete <strong>{client.name}</strong>?
|
||||
This action cannot be undone and will delete all associated time entries.
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog">
|
||||
<button class="btn">Cancel</button>
|
||||
<button class="btn btn-sm">Cancel</button>
|
||||
</form>
|
||||
<form method="POST" action={`/api/clients/${client.id}/delete`}>
|
||||
<button type="submit" class="btn btn-error">Delete</button>
|
||||
<button type="submit" class="btn btn-error btn-sm">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -63,34 +63,34 @@ 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 href="/dashboard/clients" class="btn btn-ghost btn-xs">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold">{client.name}</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">{client.name}</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-6">
|
||||
<!-- 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="card card-border bg-base-100 lg:col-span-2">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-2xl mb-1">{client.name}</h2>
|
||||
<h2 class="text-sm font-semibold mb-3">{client.name}</h2>
|
||||
<div class="space-y-2 mb-4">
|
||||
{client.email && (
|
||||
<div class="flex items-center gap-2 text-base-content/70">
|
||||
<div class="flex items-center gap-2 text-base-content/60 text-sm">
|
||||
<Icon name="heroicons:envelope" class="w-4 h-4" />
|
||||
<a href={`mailto:${client.email}`} class="link link-hover">{client.email}</a>
|
||||
</div>
|
||||
)}
|
||||
{client.phone && (
|
||||
<div class="flex items-center gap-2 text-base-content/70">
|
||||
<div class="flex items-center gap-2 text-base-content/60 text-sm">
|
||||
<Icon name="heroicons:phone" class="w-4 h-4" />
|
||||
<a href={`tel:${client.phone}`} class="link link-hover">{client.phone}</a>
|
||||
</div>
|
||||
)}
|
||||
{(client.street || client.city || client.state || client.zip || client.country) && (
|
||||
<div class="flex items-start gap-2 text-base-content/70">
|
||||
<div class="flex items-start gap-2 text-base-content/60">
|
||||
<Icon name="heroicons:map-pin" class="w-4 h-4 mt-0.5" />
|
||||
<div class="text-sm space-y-0.5">
|
||||
{client.street && <div>{client.street}</div>}
|
||||
@@ -106,22 +106,22 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
|
||||
</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" />
|
||||
<a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-primary btn-xs">
|
||||
<Icon name="heroicons:pencil" class="w-3 h-3" />
|
||||
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" />
|
||||
<button type="submit" class="btn btn-error btn-outline btn-xs">
|
||||
<Icon name="heroicons:trash" class="w-3 h-3" />
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="divider my-2"></div>
|
||||
|
||||
<div class="stats shadow w-full">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<StatCard
|
||||
title="Total Time Tracked"
|
||||
value={`${totalHours}h ${totalMinutes}m`}
|
||||
@@ -141,30 +141,30 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
|
||||
</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="card card-border bg-base-100 h-fit">
|
||||
<div class="card-body p-4">
|
||||
<h3 class="text-sm font-semibold mb-3">Information</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="text-sm font-medium text-base-content/60">Created</div>
|
||||
<div>{client.createdAt?.toLocaleDateString() ?? 'N/A'}</div>
|
||||
<div class="text-xs text-base-content/40">Created</div>
|
||||
<div class="text-sm">{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>
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-4 py-3 border-b border-base-200">
|
||||
<h2 class="text-sm font-semibold">Recent Activity</h2>
|
||||
</div>
|
||||
|
||||
{recentEntries.length > 0 ? (
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
@@ -176,11 +176,11 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
|
||||
</thead>
|
||||
<tbody>
|
||||
{recentEntries.map(({ entry, tag, user: entryUser }) => (
|
||||
<tr>
|
||||
<tr class="hover">
|
||||
<td>{entry.description || '-'}</td>
|
||||
<td>
|
||||
{tag ? (
|
||||
<div class="badge badge-sm badge-outline flex items-center gap-1">
|
||||
<div class="badge badge-xs badge-outline flex items-center gap-1">
|
||||
{tag.color && (
|
||||
<span class="w-2 h-2 rounded-full" style={`background-color: ${tag.color}`}></span>
|
||||
)}
|
||||
@@ -188,8 +188,8 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
|
||||
</div>
|
||||
) : '-'}
|
||||
</td>
|
||||
<td>{entryUser?.name || 'Unknown'}</td>
|
||||
<td>{entry.startTime.toLocaleDateString()}</td>
|
||||
<td class="text-base-content/60">{entryUser?.name || 'Unknown'}</td>
|
||||
<td class="text-base-content/40">{entry.startTime.toLocaleDateString()}</td>
|
||||
<td class="font-mono">{formatTimeRange(entry.startTime, entry.endTime)}</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -197,14 +197,14 @@ const totalEntriesCount = totalEntriesResult?.count || 0;
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div class="text-center py-8 text-base-content/60">
|
||||
<div class="text-center py-8 text-base-content/40 text-sm">
|
||||
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">
|
||||
<div class="flex justify-center py-3 border-t border-base-200">
|
||||
<a href={`/dashboard/tracker?client=${client.id}`} class="btn btn-ghost btn-xs">
|
||||
View All Entries
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -7,124 +7,108 @@ if (!user) return Astro.redirect('/login');
|
||||
|
||||
<DashboardLayout title="New Client - Chronus">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-6">Add New Client</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Add New Client</h1>
|
||||
|
||||
<form method="POST" action="/api/clients/create" class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<div class="form-control">
|
||||
<label class="label" for="name">
|
||||
Client Name
|
||||
</label>
|
||||
<form method="POST" action="/api/clients/create" class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Client Name</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Acme Corp"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
Email (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Email (optional)</legend>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="jason.borne@cia.com"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="phone">
|
||||
Phone (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Phone (optional)</legend>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
placeholder="+1 (780) 420-1337"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="divider">Address Details</div>
|
||||
<div class="divider text-xs text-base-content/40">Address Details</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="street">
|
||||
Street Address (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Street Address (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="street"
|
||||
name="street"
|
||||
placeholder="123 Business Rd"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="city">
|
||||
City (optional)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">City (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
name="city"
|
||||
placeholder="Edmonton"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="state">
|
||||
State / Province (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">State / Province (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="state"
|
||||
name="state"
|
||||
placeholder="AB"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="zip">
|
||||
Zip / Postal Code (optional)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Zip / Postal Code (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="zip"
|
||||
name="zip"
|
||||
placeholder="10001"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="country">
|
||||
Country (optional)
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Country (optional)</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="country"
|
||||
name="country"
|
||||
placeholder="Canada"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-6">
|
||||
<a href="/dashboard/clients" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Create Client</button>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<a href="/dashboard/clients" class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Create Client</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -104,25 +104,25 @@ const hasMembership = userOrgs.length > 0;
|
||||
---
|
||||
|
||||
<DashboardLayout title="Dashboard - Chronus">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-8">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-6">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-primary mb-2">
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p class="text-base-content/60">Welcome back, {user.name}!</p>
|
||||
<p class="text-base-content/60 text-sm mt-1">Welcome back, {user.name}!</p>
|
||||
</div>
|
||||
<a href="/dashboard/organizations/new" class="btn btn-outline">
|
||||
<Icon name="heroicons:plus" class="w-5 h-5" />
|
||||
<a href="/dashboard/organizations/new" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:plus" class="w-4 h-4" />
|
||||
New Team
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{!hasMembership && (
|
||||
<div class="alert alert-info mb-8">
|
||||
<Icon name="heroicons:information-circle" class="w-6 h-6" />
|
||||
<div class="alert alert-info mb-6 text-sm">
|
||||
<Icon name="heroicons:information-circle" class="w-5 h-5" />
|
||||
<div>
|
||||
<h3 class="font-bold">Welcome to Chronus!</h3>
|
||||
<div class="text-sm">You're not part of any team yet. Create one or wait for an invitation.</div>
|
||||
<div class="text-xs">You're not part of any team yet. Create one or wait for an invitation.</div>
|
||||
</div>
|
||||
<a href="/dashboard/organizations/new" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:plus" class="w-4 h-4" />
|
||||
@@ -134,14 +134,13 @@ const hasMembership = userOrgs.length > 0;
|
||||
{hasMembership && (
|
||||
<>
|
||||
<!-- Stats Overview -->
|
||||
<div class="stats stats-vertical lg:stats-horizontal shadow-lg w-full mb-8">
|
||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
|
||||
<StatCard
|
||||
title="This Week"
|
||||
value={formatDuration(stats.totalTimeThisWeek)}
|
||||
description="Total tracked time"
|
||||
icon="heroicons:clock"
|
||||
color="text-primary"
|
||||
valueClass="text-3xl"
|
||||
/>
|
||||
<StatCard
|
||||
title="This Month"
|
||||
@@ -149,7 +148,6 @@ const hasMembership = userOrgs.length > 0;
|
||||
description="Total tracked time"
|
||||
icon="heroicons:calendar"
|
||||
color="text-secondary"
|
||||
valueClass="text-3xl"
|
||||
/>
|
||||
<StatCard
|
||||
title="Active Timers"
|
||||
@@ -157,7 +155,6 @@ const hasMembership = userOrgs.length > 0;
|
||||
description="Currently running"
|
||||
icon="heroicons:play-circle"
|
||||
color="text-accent"
|
||||
valueClass="text-3xl"
|
||||
/>
|
||||
<StatCard
|
||||
title="Clients"
|
||||
@@ -165,29 +162,28 @@ const hasMembership = userOrgs.length > 0;
|
||||
description="Total active"
|
||||
icon="heroicons:building-office"
|
||||
color="text-info"
|
||||
valueClass="text-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- Quick Actions -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<Icon name="heroicons:bolt" class="w-6 h-6 text-warning" />
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2">
|
||||
<Icon name="heroicons:bolt" class="w-4 h-4 text-warning" />
|
||||
Quick Actions
|
||||
</h2>
|
||||
<div class="flex flex-col gap-3 mt-4">
|
||||
<a href="/dashboard/tracker" class="btn btn-primary">
|
||||
<Icon name="heroicons:play" class="w-5 h-5" />
|
||||
<div class="flex flex-col gap-2 mt-3">
|
||||
<a href="/dashboard/tracker" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:play" class="w-4 h-4" />
|
||||
Start Timer
|
||||
</a>
|
||||
<a href="/dashboard/clients/new" class="btn btn-outline">
|
||||
<Icon name="heroicons:plus" class="w-5 h-5" />
|
||||
<a href="/dashboard/clients/new" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:plus" class="w-4 h-4" />
|
||||
Add Client
|
||||
</a>
|
||||
<a href="/dashboard/reports" class="btn btn-outline">
|
||||
<Icon name="heroicons:chart-bar" class="w-5 h-5" />
|
||||
<a href="/dashboard/reports" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:chart-bar" class="w-4 h-4" />
|
||||
View Reports
|
||||
</a>
|
||||
</div>
|
||||
@@ -195,32 +191,32 @@ const hasMembership = userOrgs.length > 0;
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<Icon name="heroicons:clock" class="w-6 h-6 text-success" />
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2">
|
||||
<Icon name="heroicons:clock" class="w-4 h-4 text-success" />
|
||||
Recent Activity
|
||||
</h2>
|
||||
{stats.recentEntries.length > 0 ? (
|
||||
<ul class="space-y-3 mt-4">
|
||||
<ul class="space-y-2 mt-3">
|
||||
{stats.recentEntries.map(({ entry, client, tag }) => (
|
||||
<li class="p-3 rounded-lg bg-base-200 border-l-4 hover:bg-base-300 transition-colors" style={`border-color: ${tag?.color || '#3b82f6'}`}>
|
||||
<div class="font-semibold text-sm">{client.name}</div>
|
||||
<div class="text-xs text-base-content/60 mt-1 flex flex-wrap gap-2 items-center">
|
||||
<li class="p-2.5 rounded-lg bg-base-200/50 border-l-3 hover:bg-base-200 transition-colors" style={`border-color: ${tag?.color || 'oklch(var(--p))'}`}>
|
||||
<div class="font-medium text-sm">{client.name}</div>
|
||||
<div class="text-xs text-base-content/50 mt-0.5 flex flex-wrap gap-2 items-center">
|
||||
<span class="flex gap-1 flex-wrap">
|
||||
{tag ? (
|
||||
<span class="badge badge-xs badge-outline">{tag.name}</span>
|
||||
) : <span class="italic opacity-50">No tag</span>}
|
||||
</span>
|
||||
<span>• {entry.endTime ? formatDuration(entry.endTime.getTime() - entry.startTime.getTime()) : 'Running...'}</span>
|
||||
<span>· {entry.endTime ? formatDuration(entry.endTime.getTime() - entry.startTime.getTime()) : 'Running...'}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div class="flex flex-col items-center justify-center py-8 text-center mt-4">
|
||||
<Icon name="heroicons:clock" class="w-12 h-12 text-base-content/20 mb-3" />
|
||||
<p class="text-base-content/60 text-sm">No recent time entries</p>
|
||||
<div class="flex flex-col items-center justify-center py-6 text-center mt-3">
|
||||
<Icon name="heroicons:clock" class="w-10 h-10 text-base-content/15 mb-2" />
|
||||
<p class="text-base-content/40 text-sm">No recent time entries</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@ const isDraft = invoice.status === 'draft';
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs btn-square">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
</a>
|
||||
<div class={`badge ${
|
||||
<div class={`badge badge-xs ${
|
||||
invoice.status === 'paid' || invoice.status === 'accepted' ? 'badge-success' :
|
||||
invoice.status === 'sent' ? 'badge-info' :
|
||||
invoice.status === 'void' || invoice.status === 'declined' ? 'badge-error' :
|
||||
@@ -71,15 +71,15 @@ const isDraft = invoice.status === 'draft';
|
||||
{invoice.status}
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold">{invoice.number}</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">{invoice.number}</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
{isDraft && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
|
||||
<input type="hidden" name="status" value="sent" />
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<Icon name="heroicons:paper-airplane" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:paper-airplane" class="w-4 h-4" />
|
||||
Mark Sent
|
||||
</button>
|
||||
</form>
|
||||
@@ -87,8 +87,8 @@ const isDraft = invoice.status === 'draft';
|
||||
{(invoice.status !== 'paid' && invoice.status !== 'void' && invoice.type === 'invoice') && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
|
||||
<input type="hidden" name="status" value="paid" />
|
||||
<button type="submit" class="btn btn-success">
|
||||
<Icon name="heroicons:check" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-success btn-sm">
|
||||
<Icon name="heroicons:check" class="w-4 h-4" />
|
||||
Mark Paid
|
||||
</button>
|
||||
</form>
|
||||
@@ -96,25 +96,25 @@ const isDraft = invoice.status === 'draft';
|
||||
{(invoice.status !== 'accepted' && invoice.status !== 'declined' && invoice.status !== 'void' && invoice.type === 'quote') && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/status`}>
|
||||
<input type="hidden" name="status" value="accepted" />
|
||||
<button type="submit" class="btn btn-success">
|
||||
<Icon name="heroicons:check" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-success btn-sm">
|
||||
<Icon name="heroicons:check" class="w-4 h-4" />
|
||||
Mark Accepted
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
{(invoice.type === 'quote' && invoice.status === 'accepted') && (
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/convert`}>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<Icon name="heroicons:document-duplicate" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:document-duplicate" class="w-4 h-4" />
|
||||
Convert to Invoice
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<div class="dropdown dropdown-end">
|
||||
<div role="button" tabindex="0" class="btn btn-square btn-ghost border border-base-300">
|
||||
<Icon name="heroicons:ellipsis-horizontal" class="w-6 h-6" />
|
||||
<div role="button" tabindex="0" class="btn btn-square btn-ghost btn-sm border border-base-200">
|
||||
<Icon name="heroicons:ellipsis-horizontal" class="w-4 h-4" />
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content z-1 menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-200">
|
||||
<ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-200">
|
||||
<li>
|
||||
<a href={`/dashboard/invoices/${invoice.id}/edit`}>
|
||||
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
|
||||
@@ -153,7 +153,7 @@ const isDraft = invoice.status === 'draft';
|
||||
</div>
|
||||
|
||||
<!-- Invoice Paper -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 print:shadow-none print:border-none">
|
||||
<div class="card card-border bg-base-100 print:shadow-none print:border-none">
|
||||
<div class="card-body p-8 sm:p-12">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-8 mb-12">
|
||||
@@ -264,20 +264,20 @@ const isDraft = invoice.status === 'draft';
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200/50 p-4 rounded-lg mb-8 border border-base-300/50">
|
||||
<h4 class="text-sm font-bold mb-3">Add Item</h4>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/items/add`} class="bg-base-200/50 p-4 rounded-lg mb-8 border border-base-200">
|
||||
<h4 class="text-xs font-semibold mb-3">Add Item</h4>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-12 gap-3 items-end">
|
||||
<div class="sm:col-span-6">
|
||||
<label class="label text-xs pt-0" for="item-description">Description</label>
|
||||
<input type="text" id="item-description" name="description" class="input input-sm input-bordered w-full" required placeholder="Service or product..." />
|
||||
<label class="text-xs text-base-content/60" for="item-description">Description</label>
|
||||
<input type="text" id="item-description" name="description" class="input input-sm w-full" required placeholder="Service or product..." />
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="label text-xs pt-0" for="item-quantity">Qty</label>
|
||||
<input type="number" id="item-quantity" name="quantity" step="0.01" class="input input-sm input-bordered w-full" required value="1" />
|
||||
<label class="text-xs text-base-content/60" for="item-quantity">Qty</label>
|
||||
<input type="number" id="item-quantity" name="quantity" step="0.01" class="input input-sm w-full" required value="1" />
|
||||
</div>
|
||||
<div class="sm:col-span-3">
|
||||
<label class="label text-xs pt-0" for="item-unit-price">Unit Price ({invoice.currency})</label>
|
||||
<input type="number" id="item-unit-price" name="unitPrice" step="0.01" class="input input-sm input-bordered w-full" required placeholder="0.00" />
|
||||
<label class="text-xs text-base-content/60" for="item-unit-price">Unit Price ({invoice.currency})</label>
|
||||
<input type="number" id="item-unit-price" name="unitPrice" step="0.01" class="input input-sm w-full" required placeholder="0.00" />
|
||||
</div>
|
||||
<div class="sm:col-span-1">
|
||||
<button type="submit" class="btn btn-sm btn-primary w-full">
|
||||
@@ -346,13 +346,11 @@ const isDraft = invoice.status === 'draft';
|
||||
<!-- Tax Modal -->
|
||||
<dialog id="tax_modal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Update Tax Rate</h3>
|
||||
<p class="py-4">Enter the tax percentage to apply to the subtotal.</p>
|
||||
<h3 class="font-semibold text-base">Update Tax Rate</h3>
|
||||
<p class="py-3 text-sm text-base-content/60">Enter the tax percentage to apply to the subtotal.</p>
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/update-tax`}>
|
||||
<div class="form-control mb-6">
|
||||
<label class="label" for="tax-rate">
|
||||
Tax Rate (%)
|
||||
</label>
|
||||
<fieldset class="fieldset mb-4">
|
||||
<legend class="fieldset-legend text-xs">Tax Rate (%)</legend>
|
||||
<input
|
||||
type="number"
|
||||
id="tax-rate"
|
||||
@@ -360,14 +358,14 @@ const isDraft = invoice.status === 'draft';
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="100"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
value={invoice.taxRate ?? 0}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick="document.getElementById('tax_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update</button>
|
||||
<button type="button" class="btn btn-sm" onclick="document.getElementById('tax_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -379,30 +377,28 @@ const isDraft = invoice.status === 'draft';
|
||||
<!-- Import Time Modal -->
|
||||
<dialog id="import_time_modal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Import Time Entries</h3>
|
||||
<p class="py-4">Import billable time entries for this client.</p>
|
||||
<h3 class="font-semibold text-base">Import Time Entries</h3>
|
||||
<p class="py-3 text-sm text-base-content/60">Import billable time entries for this client.</p>
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/import-time`}>
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="start-date">Start Date</label>
|
||||
<input type="date" id="start-date" name="startDate" class="input input-bordered" required />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="end-date">End Date</label>
|
||||
<input type="date" id="end-date" name="endDate" class="input input-bordered" required />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3 mb-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Start Date</legend>
|
||||
<input type="date" id="start-date" name="startDate" class="input" required />
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">End Date</legend>
|
||||
<input type="date" id="end-date" name="endDate" class="input" required />
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-6">
|
||||
<label class="label cursor-pointer justify-start gap-4">
|
||||
<input type="checkbox" name="groupByDay" class="checkbox" />
|
||||
<span class="label-text">Group entries by day</span>
|
||||
</label>
|
||||
</div>
|
||||
<label class="label cursor-pointer justify-start gap-3 mb-4">
|
||||
<input type="checkbox" name="groupByDay" class="checkbox checkbox-sm" />
|
||||
<span class="text-sm">Group entries by day</span>
|
||||
</label>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick="document.getElementById('import_time_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Import</button>
|
||||
<button type="button" class="btn btn-sm" onclick="document.getElementById('import_time_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Import</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -47,83 +47,73 @@ const discountValueDisplay = invoice.discountType === 'fixed'
|
||||
<DashboardLayout title={`Edit ${invoice.number} - Chronus`}>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="mb-6">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-sm gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
Back to Invoice
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold mt-2">Edit Details</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mt-2">Edit Details</h1>
|
||||
</div>
|
||||
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/update`} class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body gap-6">
|
||||
<form method="POST" action={`/api/invoices/${invoice.id}/update`} class="card card-border bg-base-100">
|
||||
<div class="card-body p-4 gap-3">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<!-- Number -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-number">
|
||||
Number
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Number</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="invoice-number"
|
||||
name="number"
|
||||
class="input input-bordered font-mono"
|
||||
class="input font-mono"
|
||||
value={invoice.number}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Currency -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-currency">
|
||||
Currency
|
||||
</label>
|
||||
<select id="invoice-currency" name="currency" class="select select-bordered w-full">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Currency</legend>
|
||||
<select id="invoice-currency" name="currency" class="select w-full">
|
||||
<option value="USD" selected={invoice.currency === 'USD'}>USD ($)</option>
|
||||
<option value="EUR" selected={invoice.currency === 'EUR'}>EUR (€)</option>
|
||||
<option value="GBP" selected={invoice.currency === 'GBP'}>GBP (£)</option>
|
||||
<option value="CAD" selected={invoice.currency === 'CAD'}>CAD ($)</option>
|
||||
<option value="AUD" selected={invoice.currency === 'AUD'}>AUD ($)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Issue Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-issue-date">
|
||||
Issue Date
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Issue Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-issue-date"
|
||||
name="issueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={issueDateStr}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Due Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-due-date">
|
||||
{invoice.type === 'quote' ? 'Valid Until' : 'Due Date'}
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">{invoice.type === 'quote' ? 'Valid Until' : 'Due Date'}</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-due-date"
|
||||
name="dueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={dueDateStr}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Discount -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-discount-type">
|
||||
Discount
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Discount</legend>
|
||||
<div class="join w-full">
|
||||
<select id="invoice-discount-type" name="discountType" class="select select-bordered join-item">
|
||||
<select id="invoice-discount-type" name="discountType" class="select join-item">
|
||||
<option value="percentage" selected={!invoice.discountType || invoice.discountType === 'percentage'}>%</option>
|
||||
<option value="fixed" selected={invoice.discountType === 'fixed'}>Fixed</option>
|
||||
</select>
|
||||
@@ -133,48 +123,44 @@ const discountValueDisplay = invoice.discountType === 'fixed'
|
||||
name="discountValue"
|
||||
step="0.01"
|
||||
min="0"
|
||||
class="input input-bordered join-item w-full"
|
||||
class="input join-item w-full"
|
||||
value={discountValueDisplay}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Tax Rate -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-tax-rate">
|
||||
Tax Rate (%)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="invoice-tax-rate"
|
||||
name="taxRate"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="100"
|
||||
class="input input-bordered"
|
||||
value={invoice.taxRate}
|
||||
/>
|
||||
</div>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Tax Rate (%)</legend>
|
||||
<input
|
||||
type="number"
|
||||
id="invoice-tax-rate"
|
||||
name="taxRate"
|
||||
step="0.01"
|
||||
min="0"
|
||||
max="100"
|
||||
class="input"
|
||||
value={invoice.taxRate}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Notes -->
|
||||
<div class="form-control flex flex-col">
|
||||
<label class="label font-semibold" for="invoice-notes">
|
||||
Notes / Terms
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Notes / Terms</legend>
|
||||
<textarea
|
||||
id="invoice-notes"
|
||||
name="notes"
|
||||
class="textarea textarea-bordered h-32 font-mono text-sm"
|
||||
class="textarea h-32 font-mono text-sm"
|
||||
placeholder="Payment terms, bank details, or thank you notes..."
|
||||
>{invoice.notes}</textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="divider my-0"></div>
|
||||
|
||||
<div class="card-actions justify-end">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<div class="flex justify-end gap-2">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,8 @@ const currentTeamIdResolved = userMembership.organizationId;
|
||||
// Get filter parameters
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearParam = Astro.url.searchParams.get('year');
|
||||
const selectedYear = yearParam === 'current' || !yearParam ? 'current' : parseInt(yearParam);
|
||||
const selectedYear: string | number = yearParam === 'current' || !yearParam ? 'current' : parseInt(yearParam);
|
||||
const yearNum = typeof selectedYear === 'number' ? selectedYear : currentYear;
|
||||
const selectedType = Astro.url.searchParams.get('type') || 'all';
|
||||
const selectedStatus = Astro.url.searchParams.get('status') || 'all';
|
||||
const sortBy = Astro.url.searchParams.get('sort') || 'date-desc';
|
||||
@@ -43,8 +44,8 @@ if (!availableYears.includes(currentYear)) {
|
||||
}
|
||||
|
||||
// Filter by year
|
||||
const yearStart = selectedYear === 'current' ? new Date(currentYear, 0, 1) : new Date(selectedYear, 0, 1);
|
||||
const yearEnd = selectedYear === 'current' ? new Date() : new Date(selectedYear, 11, 31, 23, 59, 59);
|
||||
const yearStart = new Date(yearNum, 0, 1);
|
||||
const yearEnd = selectedYear === 'current' ? new Date() : new Date(yearNum, 11, 31, 23, 59, 59);
|
||||
|
||||
let filteredInvoices = allInvoicesRaw.filter(i => {
|
||||
const issueDate = i.invoice.issueDate;
|
||||
@@ -103,81 +104,67 @@ const getStatusColor = (status: string) => {
|
||||
<DashboardLayout title="Invoices & Quotes - Chronus">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Invoices & Quotes</h1>
|
||||
<p class="text-base-content/60 mt-1">Manage your billing and estimates</p>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">Invoices & Quotes</h1>
|
||||
<p class="text-base-content/60 text-sm mt-1">Manage your billing and estimates</p>
|
||||
</div>
|
||||
<a href="/dashboard/invoices/new" class="btn btn-primary">
|
||||
<Icon name="heroicons:plus" class="w-5 h-5" />
|
||||
<a href="/dashboard/invoices/new" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:plus" class="w-4 h-4" />
|
||||
Create New
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div class="stats shadow bg-base-100 border border-base-200">
|
||||
<StatCard
|
||||
title="Total Invoices"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'invoice').length)}
|
||||
description={selectedYear === 'current' ? `${currentYear} (YTD)` : selectedYear}
|
||||
icon="heroicons:document-text"
|
||||
color="text-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow bg-base-100 border border-base-200">
|
||||
<StatCard
|
||||
title="Open Quotes"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length)}
|
||||
description="Waiting for approval"
|
||||
icon="heroicons:clipboard-document-list"
|
||||
color="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stats shadow bg-base-100 border border-base-200">
|
||||
<StatCard
|
||||
title="Total Revenue"
|
||||
value={formatCurrency(yearInvoices
|
||||
.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
|
||||
.reduce((acc, curr) => acc + curr.invoice.total, 0), 'USD')}
|
||||
description={`Paid invoices (${selectedYear === 'current' ? `${currentYear} YTD` : selectedYear})`}
|
||||
icon="heroicons:currency-dollar"
|
||||
color="text-success"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
|
||||
<StatCard
|
||||
title="Total Invoices"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'invoice').length)}
|
||||
description={selectedYear === 'current' ? `${currentYear} (YTD)` : String(selectedYear)}
|
||||
icon="heroicons:document-text"
|
||||
color="text-primary"
|
||||
/>
|
||||
<StatCard
|
||||
title="Open Quotes"
|
||||
value={String(yearInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length)}
|
||||
description="Waiting for approval"
|
||||
icon="heroicons:clipboard-document-list"
|
||||
color="text-secondary"
|
||||
/>
|
||||
<StatCard
|
||||
title="Total Revenue"
|
||||
value={formatCurrency(yearInvoices
|
||||
.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
|
||||
.reduce((acc, curr) => acc + curr.invoice.total, 0), 'USD')}
|
||||
description={`Paid invoices (${selectedYear === 'current' ? `${currentYear} YTD` : selectedYear})`}
|
||||
icon="heroicons:currency-dollar"
|
||||
color="text-success"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Year</span>
|
||||
</label>
|
||||
<select name="year" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Year</legend>
|
||||
<select name="year" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="current" selected={selectedYear === 'current'}>Current Year to Date ({currentYear})</option>
|
||||
{availableYears.map(year => (
|
||||
<option value={year} selected={year === selectedYear}>{year}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Type</span>
|
||||
</label>
|
||||
<select name="type" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Type</legend>
|
||||
<select name="type" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="all" selected={selectedType === 'all'}>All Types</option>
|
||||
<option value="invoice" selected={selectedType === 'invoice'}>Invoices</option>
|
||||
<option value="quote" selected={selectedType === 'quote'}>Quotes</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Status</span>
|
||||
</label>
|
||||
<select name="status" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Status</legend>
|
||||
<select name="status" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="all" selected={selectedStatus === 'all'}>All Statuses</option>
|
||||
<option value="draft" selected={selectedStatus === 'draft'}>Draft</option>
|
||||
<option value="sent" selected={selectedStatus === 'sent'}>Sent</option>
|
||||
@@ -186,13 +173,11 @@ const getStatusColor = (status: string) => {
|
||||
<option value="declined" selected={selectedStatus === 'declined'}>Declined</option>
|
||||
<option value="void" selected={selectedStatus === 'void'}>Void</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Sort By</span>
|
||||
</label>
|
||||
<select name="sort" class="select select-bordered w-full" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Sort By</legend>
|
||||
<select name="sort" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="date-desc" selected={sortBy === 'date-desc'}>Date (Newest First)</option>
|
||||
<option value="date-asc" selected={sortBy === 'date-asc'}>Date (Oldest First)</option>
|
||||
<option value="amount-desc" selected={sortBy === 'amount-desc'}>Amount (High to Low)</option>
|
||||
@@ -200,13 +185,13 @@ const getStatusColor = (status: string) => {
|
||||
<option value="number-desc" selected={sortBy === 'number-desc'}>Number (Z-A)</option>
|
||||
<option value="number-asc" selected={sortBy === 'number-asc'}>Number (A-Z)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
{(selectedYear !== 'current' || selectedType !== 'all' || selectedStatus !== 'all' || sortBy !== 'date-desc') && (
|
||||
<div class="mt-4">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:x-mark" class="w-4 h-4" />
|
||||
<div class="mt-3">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs">
|
||||
<Icon name="heroicons:x-mark" class="w-3 h-3" />
|
||||
Clear Filters
|
||||
</a>
|
||||
</div>
|
||||
@@ -214,19 +199,19 @@ const getStatusColor = (status: string) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 py-4 border-b border-base-200 bg-base-200/30">
|
||||
<p class="text-sm text-base-content/70">
|
||||
<div class="px-4 py-3 border-b border-base-200">
|
||||
<p class="text-xs text-base-content/50">
|
||||
Showing <span class="font-semibold text-base-content">{allInvoices.length}</span>
|
||||
{allInvoices.length === 1 ? 'result' : 'results'}
|
||||
{selectedYear === 'current' ? ` for ${currentYear} (year to date)` : ` for ${selectedYear}`}
|
||||
</p>
|
||||
</div>
|
||||
<div class="overflow-x-auto md:overflow-visible pb-32 md:pb-0">
|
||||
<table class="table table-zebra">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr class="bg-base-200/50">
|
||||
<tr>
|
||||
<th>Number</th>
|
||||
<th>Client</th>
|
||||
<th>Date</th>
|
||||
@@ -240,14 +225,14 @@ const getStatusColor = (status: string) => {
|
||||
<tbody>
|
||||
{allInvoices.length === 0 ? (
|
||||
<tr>
|
||||
<td colspan="8" class="text-center py-8 text-base-content/60">
|
||||
<td colspan="8" class="text-center py-8 text-base-content/50 text-sm">
|
||||
No invoices or quotes found. Create one to get started.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
allInvoices.map(({ invoice, client }) => (
|
||||
<tr class="hover:bg-base-200/50 transition-colors">
|
||||
<td class="font-mono font-medium">
|
||||
<tr class="hover">
|
||||
<td class="font-mono font-medium text-sm">
|
||||
<a href={`/dashboard/invoices/${invoice.id}`} class="link link-hover text-primary">
|
||||
{invoice.number}
|
||||
</a>
|
||||
@@ -265,7 +250,7 @@ const getStatusColor = (status: string) => {
|
||||
{formatCurrency(invoice.total, invoice.currency)}
|
||||
</td>
|
||||
<td>
|
||||
<div class={`badge ${getStatusColor(invoice.status)} badge-sm uppercase font-bold tracking-wider`}>
|
||||
<div class={`badge ${getStatusColor(invoice.status)} badge-xs uppercase font-bold tracking-wider`}>
|
||||
{invoice.status}
|
||||
</div>
|
||||
</td>
|
||||
@@ -274,10 +259,10 @@ const getStatusColor = (status: string) => {
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<div class="dropdown dropdown-end">
|
||||
<div role="button" tabindex="0" class="btn btn-ghost btn-sm btn-square">
|
||||
<Icon name="heroicons:ellipsis-vertical" class="w-5 h-5" />
|
||||
<div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
|
||||
<Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow-lg bg-base-100 rounded-box w-52 border border-base-200 z-100">
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 rounded-box w-52 border border-base-200 z-100">
|
||||
<li>
|
||||
<a href={`/dashboard/invoices/${invoice.id}`}>
|
||||
<Icon name="heroicons:eye" class="w-4 h-4" />
|
||||
|
||||
@@ -80,124 +80,112 @@ const defaultDueDate = nextMonth.toISOString().split('T')[0];
|
||||
<DashboardLayout title="New Document - Chronus">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="mb-6">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-xs gap-2 pl-0 hover:bg-transparent text-base-content/60">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
Back to Invoices
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold mt-2">Create New Document</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mt-2">Create New Document</h1>
|
||||
</div>
|
||||
|
||||
{teamClients.length === 0 ? (
|
||||
<div role="alert" class="alert alert-warning shadow-lg">
|
||||
<Icon name="heroicons:exclamation-triangle" class="w-6 h-6" />
|
||||
<div role="alert" class="alert alert-warning">
|
||||
<Icon name="heroicons:exclamation-triangle" class="w-5 h-5" />
|
||||
<div>
|
||||
<h3 class="font-bold">No Clients Found</h3>
|
||||
<h3 class="font-semibold text-sm">No Clients Found</h3>
|
||||
<div class="text-xs">You need to add a client before you can create an invoice or quote.</div>
|
||||
</div>
|
||||
<a href="/dashboard/clients" class="btn btn-sm">Manage Clients</a>
|
||||
</div>
|
||||
) : (
|
||||
<form method="POST" action="/api/invoices/create" class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body gap-6">
|
||||
<form method="POST" action="/api/invoices/create" class="card card-border bg-base-100">
|
||||
<div class="card-body p-4 gap-4">
|
||||
|
||||
<!-- Document Type -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="document-type-invoice">
|
||||
Document Type
|
||||
</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-300 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium" for="document-type-invoice">
|
||||
<input type="radio" id="document-type-invoice" name="type" value="invoice" class="radio radio-primary" checked />
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Document Type</legend>
|
||||
<div class="flex gap-3">
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-invoice">
|
||||
<input type="radio" id="document-type-invoice" name="type" value="invoice" class="radio radio-primary radio-sm" checked />
|
||||
Invoice
|
||||
</label>
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-300 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium" for="document-type-quote">
|
||||
<input type="radio" id="document-type-quote" name="type" value="quote" class="radio radio-primary" />
|
||||
<label class="label cursor-pointer justify-start gap-2 border border-base-200 rounded-lg p-3 flex-1 hover:border-primary has-checked:border-primary has-checked:bg-primary/5 transition-all font-medium text-sm" for="document-type-quote">
|
||||
<input type="radio" id="document-type-quote" name="type" value="quote" class="radio radio-primary radio-sm" />
|
||||
Quote / Estimate
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<!-- Client -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-client">
|
||||
Client
|
||||
</label>
|
||||
<select id="invoice-client" name="clientId" class="select select-bordered w-full" required>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Client</legend>
|
||||
<select id="invoice-client" name="clientId" class="select w-full" required>
|
||||
<option value="" disabled selected>Select a client...</option>
|
||||
{teamClients.map(client => (
|
||||
<option value={client.id}>{client.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Number -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="documentNumber">
|
||||
Number
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Number</legend>
|
||||
<input
|
||||
type="text"
|
||||
name="number"
|
||||
id="documentNumber"
|
||||
class="input input-bordered font-mono"
|
||||
class="input font-mono"
|
||||
value={nextInvoiceNumber}
|
||||
data-invoice-number={nextInvoiceNumber}
|
||||
data-quote-number={nextQuoteNumber}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Issue Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-issue-date">
|
||||
Issue Date
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Issue Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-issue-date"
|
||||
name="issueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={today}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Due Date -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-due-date" id="dueDateLabel">
|
||||
Due Date
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs" id="dueDateLabel">Due Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="invoice-due-date"
|
||||
name="dueDate"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
value={defaultDueDate}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Currency -->
|
||||
<div class="form-control">
|
||||
<label class="label font-semibold" for="invoice-currency">
|
||||
Currency
|
||||
</label>
|
||||
<select id="invoice-currency" name="currency" class="select select-bordered w-full">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Currency</legend>
|
||||
<select id="invoice-currency" name="currency" class="select w-full">
|
||||
<option value="USD" selected={currentOrganization?.defaultCurrency === 'USD'}>USD ($)</option>
|
||||
<option value="EUR" selected={currentOrganization?.defaultCurrency === 'EUR'}>EUR (€)</option>
|
||||
<option value="GBP" selected={currentOrganization?.defaultCurrency === 'GBP'}>GBP (£)</option>
|
||||
<option value="CAD" selected={currentOrganization?.defaultCurrency === 'CAD'}>CAD ($)</option>
|
||||
<option value="AUD" selected={currentOrganization?.defaultCurrency === 'AUD'}>AUD ($)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="divider my-0"></div>
|
||||
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<div class="flex justify-end gap-2">
|
||||
<a href="/dashboard/invoices" class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">
|
||||
Create Draft
|
||||
<Icon name="heroicons:arrow-right" class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
@@ -12,36 +12,34 @@ if (!user) return Astro.redirect('/login');
|
||||
<DashboardLayout title="Create Team - Chronus">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<a href="/dashboard" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
|
||||
<a href="/dashboard" class="btn btn-ghost btn-xs">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold">Create New Team</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">Create New Team</h1>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="/api/organizations/create" class="card bg-base-200 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<form method="POST" action="/api/organizations/create" class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="alert alert-info mb-4">
|
||||
<Icon name="heroicons:information-circle" class="w-6 h-6" />
|
||||
<span>Create a new team to manage separate projects and collaborators. You'll be the owner.</span>
|
||||
<Icon name="heroicons:information-circle" class="w-4 h-4" />
|
||||
<span class="text-sm">Create a new team to manage separate projects and collaborators. You'll be the owner.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label pb-2 font-medium" for="name">
|
||||
Team Name
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Team Name</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
placeholder="Acme Corp"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="card-actions justify-end mt-6">
|
||||
<a href="/dashboard" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Create Team</button>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<a href="/dashboard" class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Create Team</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -252,17 +252,15 @@ function getTimeRangeLabel(range: string) {
|
||||
---
|
||||
|
||||
<DashboardLayout title="Reports - Chronus">
|
||||
<h1 class="text-3xl font-bold mb-6">Team Reports</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Team Reports</h1>
|
||||
|
||||
<!-- Filters -->
|
||||
<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-4 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="reports-range">
|
||||
Time Range
|
||||
</label>
|
||||
<select id="reports-range" name="range" class="select select-bordered" onchange="this.form.submit()">
|
||||
<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-4 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Time Range</legend>
|
||||
<select id="reports-range" name="range" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="today" selected={timeRange === 'today'}>Today</option>
|
||||
<option value="week" selected={timeRange === 'week'}>Last 7 Days</option>
|
||||
<option value="month" selected={timeRange === 'month'}>Last 30 Days</option>
|
||||
@@ -271,44 +269,38 @@ function getTimeRangeLabel(range: string) {
|
||||
<option value="last-month" selected={timeRange === 'last-month'}>Last Month</option>
|
||||
<option value="custom" selected={timeRange === 'custom'}>Custom Range</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{timeRange === 'custom' && (
|
||||
<>
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="reports-from">
|
||||
From Date
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">From Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="reports-from"
|
||||
name="from"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
value={customFrom || (startDate.getFullYear() + '-' + String(startDate.getMonth() + 1).padStart(2, '0') + '-' + String(startDate.getDate()).padStart(2, '0'))}
|
||||
onchange="this.form.submit()"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="reports-to">
|
||||
To Date
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">To Date</legend>
|
||||
<input
|
||||
type="date"
|
||||
id="reports-to"
|
||||
name="to"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
value={customTo || (endDate.getFullYear() + '-' + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + String(endDate.getDate()).padStart(2, '0'))}
|
||||
onchange="this.form.submit()"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="reports-member">
|
||||
Team Member
|
||||
</label>
|
||||
<select id="reports-member" name="member" class="select select-bordered" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Team Member</legend>
|
||||
<select id="reports-member" name="member" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="">All Members</option>
|
||||
{teamMembers.map(member => (
|
||||
<option value={member.id} selected={selectedMemberId === member.id}>
|
||||
@@ -316,13 +308,11 @@ function getTimeRangeLabel(range: string) {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="reports-tag">
|
||||
Tag
|
||||
</label>
|
||||
<select id="reports-tag" name="tag" class="select select-bordered" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Tag</legend>
|
||||
<select id="reports-tag" name="tag" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="">All Tags</option>
|
||||
{allTags.map(tag => (
|
||||
<option value={tag.id} selected={selectedTagId === tag.id}>
|
||||
@@ -330,13 +320,11 @@ function getTimeRangeLabel(range: string) {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="reports-client">
|
||||
Client
|
||||
</label>
|
||||
<select id="reports-client" name="client" class="select select-bordered" onchange="this.form.submit()">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Client</legend>
|
||||
<select id="reports-client" name="client" class="select w-full" onchange="this.form.submit()">
|
||||
<option value="">All Clients</option>
|
||||
{allClients.map(client => (
|
||||
<option value={client.id} selected={selectedClientId === client.id}>
|
||||
@@ -344,76 +332,49 @@ function getTimeRangeLabel(range: string) {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
@media (max-width: 767px) {
|
||||
form {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
.form-control {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
select, input {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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 class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
|
||||
<StatCard
|
||||
title="Total Time"
|
||||
value={formatDuration(totalTime)}
|
||||
description={getTimeRangeLabel(timeRange)}
|
||||
icon="heroicons:clock"
|
||||
color="text-primary"
|
||||
/>
|
||||
<StatCard
|
||||
title="Total Entries"
|
||||
value={String(entries.length)}
|
||||
description={getTimeRangeLabel(timeRange)}
|
||||
icon="heroicons:list-bullet"
|
||||
color="text-secondary"
|
||||
/>
|
||||
<StatCard
|
||||
title="Revenue"
|
||||
value={formatCurrency(revenueStats.total)}
|
||||
description={`${invoiceStats.paid} paid invoices`}
|
||||
icon="heroicons:currency-dollar"
|
||||
color="text-success"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<!-- Invoice & Quote Stats -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:document-text" class="w-6 h-6" />
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:document-text" class="w-4 h-4" />
|
||||
Invoices Overview
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
@@ -446,10 +407,10 @@ function getTimeRangeLabel(range: string) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:clipboard-document-list" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:clipboard-document-list" class="w-4 h-4" />
|
||||
Quotes Overview
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
@@ -487,14 +448,14 @@ function getTimeRangeLabel(range: string) {
|
||||
|
||||
<!-- Revenue by Client - Only show if there's revenue data and no client filter -->
|
||||
{!selectedClientId && revenueByClient.length > 0 && (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:banknotes" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:banknotes" class="w-4 h-4" />
|
||||
Revenue by Client
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client</th>
|
||||
@@ -507,11 +468,11 @@ function getTimeRangeLabel(range: string) {
|
||||
{revenueByClient.slice(0, 10).map(stat => (
|
||||
<tr>
|
||||
<td>
|
||||
<div class="font-bold">{stat.client.name}</div>
|
||||
<div class="font-medium">{stat.client.name}</div>
|
||||
</td>
|
||||
<td class="font-mono font-bold text-success">{formatCurrency(stat.revenue)}</td>
|
||||
<td class="font-mono font-semibold text-success text-sm">{formatCurrency(stat.revenue)}</td>
|
||||
<td>{stat.invoiceCount}</td>
|
||||
<td class="font-mono">
|
||||
<td class="font-mono text-sm">
|
||||
{stat.invoiceCount > 0 ? formatCurrency(stat.revenue / stat.invoiceCount) : formatCurrency(0)}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -526,13 +487,13 @@ function getTimeRangeLabel(range: string) {
|
||||
{/* Charts Section - Only show if there's data */}
|
||||
{totalTime > 0 && (
|
||||
<>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
|
||||
{/* Tag Distribution Chart - Only show when no tag filter */}
|
||||
{!selectedTagId && statsByTag.filter(s => s.totalTime > 0).length > 0 && (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:chart-pie" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:chart-pie" class="w-4 h-4" />
|
||||
Tag Distribution
|
||||
</h2>
|
||||
<div class="h-64 w-full">
|
||||
@@ -551,10 +512,10 @@ function getTimeRangeLabel(range: string) {
|
||||
|
||||
{/* Client Distribution Chart - Only show when no client filter */}
|
||||
{!selectedClientId && statsByClient.filter(s => s.totalTime > 0).length > 0 && (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:chart-bar" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:chart-bar" class="w-4 h-4" />
|
||||
Time by Client
|
||||
</h2>
|
||||
<div class="h-64 w-full">
|
||||
@@ -573,10 +534,10 @@ function getTimeRangeLabel(range: string) {
|
||||
|
||||
{/* Team Member Chart - Only show when no member filter */}
|
||||
{!selectedMemberId && statsByMember.filter(s => s.totalTime > 0).length > 0 && (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:users" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:users" class="w-4 h-4" />
|
||||
Time by Team Member
|
||||
</h2>
|
||||
<div class="h-64 w-full">
|
||||
@@ -596,14 +557,14 @@ function getTimeRangeLabel(range: string) {
|
||||
|
||||
{/* Stats by Member - Only show if there's data and no member filter */}
|
||||
{!selectedMemberId && statsByMember.filter(s => s.totalTime > 0).length > 0 && (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:users" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:users" class="w-4 h-4" />
|
||||
By Team Member
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Member</th>
|
||||
@@ -617,13 +578,13 @@ function getTimeRangeLabel(range: string) {
|
||||
<tr>
|
||||
<td>
|
||||
<div>
|
||||
<div class="font-bold">{stat.member.name}</div>
|
||||
<div class="text-sm opacity-50">{stat.member.email}</div>
|
||||
<div class="font-medium">{stat.member.name}</div>
|
||||
<div class="text-xs text-base-content/40">{stat.member.email}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="font-mono">{formatDuration(stat.totalTime)}</td>
|
||||
<td class="font-mono text-sm">{formatDuration(stat.totalTime)}</td>
|
||||
<td>{stat.entryCount}</td>
|
||||
<td class="font-mono">
|
||||
<td class="font-mono text-sm">
|
||||
{stat.entryCount > 0 ? formatDuration(stat.totalTime / stat.entryCount) : '00:00:00 (0m)'}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -637,14 +598,14 @@ function getTimeRangeLabel(range: string) {
|
||||
|
||||
{/* Stats by Tag - Only show if there's data and no tag filter */}
|
||||
{!selectedTagId && statsByTag.filter(s => s.totalTime > 0).length > 0 && (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:tag" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:tag" class="w-4 h-4" />
|
||||
By Tag
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tag</th>
|
||||
@@ -659,21 +620,21 @@ function getTimeRangeLabel(range: string) {
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
{stat.tag.color && (
|
||||
<span class="w-4 h-4 rounded-full" style={`background-color: ${stat.tag.color}`}></span>
|
||||
<span class="w-3 h-3 rounded-full" style={`background-color: ${stat.tag.color}`}></span>
|
||||
)}
|
||||
<span>{stat.tag.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="font-mono">{formatDuration(stat.totalTime)}</td>
|
||||
<td class="font-mono text-sm">{formatDuration(stat.totalTime)}</td>
|
||||
<td>{stat.entryCount}</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<progress
|
||||
class="progress progress-primary w-20"
|
||||
class="progress progress-primary w-16"
|
||||
value={stat.totalTime}
|
||||
max={totalTime}
|
||||
></progress>
|
||||
<span class="text-sm">
|
||||
<span class="text-xs">
|
||||
{totalTime > 0 ? Math.round((stat.totalTime / totalTime) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
@@ -689,14 +650,14 @@ function getTimeRangeLabel(range: string) {
|
||||
|
||||
{/* Stats by Client - Only show if there's data and no client filter */}
|
||||
{!selectedClientId && statsByClient.filter(s => s.totalTime > 0).length > 0 && (
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:building-office" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-3">
|
||||
<Icon name="heroicons:building-office" class="w-4 h-4" />
|
||||
By Client
|
||||
</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Client</th>
|
||||
@@ -709,16 +670,16 @@ function getTimeRangeLabel(range: string) {
|
||||
{statsByClient.filter(s => s.totalTime > 0).map(stat => (
|
||||
<tr>
|
||||
<td>{stat.client.name}</td>
|
||||
<td class="font-mono">{formatDuration(stat.totalTime)}</td>
|
||||
<td class="font-mono text-sm">{formatDuration(stat.totalTime)}</td>
|
||||
<td>{stat.entryCount}</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<progress
|
||||
class="progress progress-secondary w-20"
|
||||
class="progress progress-secondary w-16"
|
||||
value={stat.totalTime}
|
||||
max={totalTime}
|
||||
></progress>
|
||||
<span class="text-sm">
|
||||
<span class="text-xs">
|
||||
{totalTime > 0 ? Math.round((stat.totalTime / totalTime) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
@@ -733,23 +694,23 @@ function getTimeRangeLabel(range: string) {
|
||||
)}
|
||||
|
||||
{/* Detailed Entries */}
|
||||
<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:document-text" 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:document-text" class="w-4 h-4" />
|
||||
Detailed Entries ({entries.length})
|
||||
</h2>
|
||||
{entries.length > 0 && (
|
||||
<a href={`/api/reports/export${url.search}`} class="btn btn-sm btn-outline" target="_blank">
|
||||
<Icon name="heroicons:arrow-down-tray" class="w-4 h-4" />
|
||||
<a href={`/api/reports/export${url.search}`} class="btn btn-xs btn-ghost" target="_blank">
|
||||
<Icon name="heroicons:arrow-down-tray" class="w-3.5 h-3.5" />
|
||||
Export CSV
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
{entries.length > 0 ? (
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
@@ -765,7 +726,7 @@ function getTimeRangeLabel(range: string) {
|
||||
<tr>
|
||||
<td class="whitespace-nowrap">
|
||||
{e.entry.startTime.toLocaleDateString()}<br/>
|
||||
<span class="text-xs opacity-50">
|
||||
<span class="text-xs text-base-content/40">
|
||||
{e.entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
|
||||
</span>
|
||||
</td>
|
||||
@@ -773,18 +734,18 @@ function getTimeRangeLabel(range: string) {
|
||||
<td>{e.client.name}</td>
|
||||
<td>
|
||||
{e.tag ? (
|
||||
<div class="badge badge-sm badge-outline flex items-center gap-1">
|
||||
<div class="badge badge-xs badge-outline flex items-center gap-1">
|
||||
{e.tag.color && (
|
||||
<span class="w-2 h-2 rounded-full" style={`background-color: ${e.tag.color}`}></span>
|
||||
)}
|
||||
<span>{e.tag.name}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span class="opacity-50">-</span>
|
||||
<span class="text-base-content/30">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{e.entry.description || '-'}</td>
|
||||
<td class="font-mono">
|
||||
<td class="text-base-content/60">{e.entry.description || '-'}</td>
|
||||
<td class="font-mono text-sm">
|
||||
{e.entry.endTime
|
||||
? formatDuration(e.entry.endTime.getTime() - e.entry.startTime.getTime())
|
||||
: 'Running...'
|
||||
@@ -796,12 +757,12 @@ function getTimeRangeLabel(range: string) {
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Icon name="heroicons:inbox" class="w-16 h-16 text-base-content/20 mb-4" />
|
||||
<h3 class="text-lg font-semibold mb-2">No time entries found</h3>
|
||||
<p class="text-base-content/60 mb-4">Try adjusting your filters or select a different time range.</p>
|
||||
<a href="/dashboard/tracker" class="btn btn-primary">
|
||||
<Icon name="heroicons:play" class="w-5 h-5" />
|
||||
<div class="flex flex-col items-center justify-center py-10 text-center">
|
||||
<Icon name="heroicons:inbox" class="w-12 h-12 text-base-content/15 mb-3" />
|
||||
<h3 class="text-base font-semibold mb-1">No time entries found</h3>
|
||||
<p class="text-base-content/50 text-sm mb-4">Try adjusting your filters or select a different time range.</p>
|
||||
<a href="/dashboard/tracker" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:play" class="w-4 h-4" />
|
||||
Start Tracking Time
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@ const userPasskeys = await db.select()
|
||||
|
||||
<DashboardLayout title="Account Settings - Chronus">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 text-primary">
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mb-6 sm:mb-8">
|
||||
Account Settings
|
||||
</h1>
|
||||
|
||||
@@ -69,25 +69,25 @@ const userPasskeys = await db.select()
|
||||
createdAt: t.createdAt ? t.createdAt.toISOString() : ''
|
||||
}))} />
|
||||
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body p-4 sm:p-6">
|
||||
<h2 class="card-title mb-6 text-lg sm:text-xl">
|
||||
<Icon name="heroicons:information-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-4">
|
||||
<Icon name="heroicons:information-circle" class="w-4 h-4" />
|
||||
Account Information
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-300 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/70 text-sm sm:text-base">Account ID</span>
|
||||
<span class="font-mono text-xs sm:text-sm break-all">{user.id}</span>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-200 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/60 text-sm">Account ID</span>
|
||||
<span class="font-mono text-xs break-all">{user.id}</span>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-300 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/70 text-sm sm:text-base">Email</span>
|
||||
<span class="text-sm sm:text-base break-all">{user.email}</span>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-200 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/60 text-sm">Email</span>
|
||||
<span class="text-sm break-all">{user.email}</span>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/70 text-sm sm:text-base">Site Administrator</span>
|
||||
<span class={user.isSiteAdmin ? "badge badge-primary" : "badge badge-ghost"}>
|
||||
<span class="text-base-content/60 text-sm">Site Administrator</span>
|
||||
<span class={user.isSiteAdmin ? "badge badge-xs badge-primary" : "badge badge-xs badge-ghost"}>
|
||||
{user.isSiteAdmin ? "Yes" : "No"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -28,24 +28,27 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
|
||||
|
||||
<DashboardLayout title="Team - Chronus">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
||||
<h1 class="text-3xl font-bold">Team Members</h1>
|
||||
<div>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">Team Members</h1>
|
||||
<p class="text-base-content/60 text-sm mt-1">Manage your organization's team</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
{isAdmin && (
|
||||
<>
|
||||
<a href="/dashboard/team/settings" class="btn btn-ghost">
|
||||
<Icon name="heroicons:cog-6-tooth" class="w-5 h-5" />
|
||||
<a href="/dashboard/team/settings" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:cog-6-tooth" class="w-4 h-4" />
|
||||
Settings
|
||||
</a>
|
||||
<a href="/dashboard/team/invite" class="btn btn-primary">Invite Member</a>
|
||||
<a href="/dashboard/team/invite" class="btn btn-primary btn-sm">Invite Member</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<div class="card card-border bg-base-100">
|
||||
<div class="card-body p-0">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@@ -57,21 +60,21 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
|
||||
</thead>
|
||||
<tbody>
|
||||
{teamMembers.map(({ member, user: teamUser }) => (
|
||||
<tr>
|
||||
<tr class="hover">
|
||||
<td>
|
||||
<div class="flex items-center gap-3">
|
||||
<Avatar name={teamUser.name} />
|
||||
<div>
|
||||
<div class="font-bold">{teamUser.name}</div>
|
||||
<div class="font-medium">{teamUser.name}</div>
|
||||
{teamUser.id === user.id && (
|
||||
<span class="badge badge-sm">You</span>
|
||||
<span class="badge badge-xs">You</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{teamUser.email}</td>
|
||||
<td class="text-base-content/60">{teamUser.email}</td>
|
||||
<td>
|
||||
<span class={`badge ${
|
||||
<span class={`badge badge-xs ${
|
||||
member.role === 'owner' ? 'badge-primary' :
|
||||
member.role === 'admin' ? 'badge-secondary' :
|
||||
'badge-ghost'
|
||||
@@ -79,15 +82,15 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
|
||||
{member.role}
|
||||
</span>
|
||||
</td>
|
||||
<td>{member.joinedAt?.toLocaleDateString() ?? 'N/A'}</td>
|
||||
<td class="text-base-content/40">{member.joinedAt?.toLocaleDateString() ?? 'N/A'}</td>
|
||||
{isAdmin && (
|
||||
<td>
|
||||
{teamUser.id !== user.id && member.role !== 'owner' && (
|
||||
<div class="dropdown dropdown-end">
|
||||
<label tabindex="0" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:ellipsis-vertical" class="w-5 h-5" />
|
||||
</label>
|
||||
<ul tabindex="0" class="dropdown-content z-1 menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-200">
|
||||
<div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
|
||||
<Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content z-1 menu p-2 bg-base-100 rounded-box w-52 border border-base-200">
|
||||
<li>
|
||||
<form method="POST" action={`/api/team/change-role`}>
|
||||
<input type="hidden" name="userId" value={teamUser.id} />
|
||||
|
||||
@@ -29,45 +29,39 @@ if (!isAdmin) return Astro.redirect('/dashboard/team');
|
||||
|
||||
<DashboardLayout title="Invite Team Member - Chronus">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-6">Invite Team Member</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight mb-6">Invite Team Member</h1>
|
||||
|
||||
<form method="POST" action="/api/team/invite" class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body">
|
||||
<form method="POST" action="/api/team/invite" class="card card-border bg-base-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="alert alert-info mb-4">
|
||||
<Icon name="heroicons:information-circle" class="w-6 h-6 shrink-0" />
|
||||
<span>The user must already have an account. They'll be added to your organization.</span>
|
||||
<Icon name="heroicons:information-circle" class="w-4 h-4 shrink-0" />
|
||||
<span class="text-sm">The user must already have an account. They'll be added to your organization.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="email">
|
||||
Email Address
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Email Address</legend>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="user@example.com"
|
||||
class="input input-bordered"
|
||||
class="input"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="role">
|
||||
Role
|
||||
</label>
|
||||
<select id="role" name="role" class="select select-bordered" required>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Role</legend>
|
||||
<select id="role" name="role" class="select" required>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<label class="label h-auto block">
|
||||
<span class="label-text-alt">Members can track time. Admins can manage team and clients.</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-base-content/40 mt-1">Members can track time. Admins can manage team and clients.</p>
|
||||
</fieldset>
|
||||
|
||||
<div class="card-actions justify-end mt-6">
|
||||
<a href="/dashboard/team" class="btn btn-ghost">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Invite Member</button>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<a href="/dashboard/team" class="btn btn-ghost btn-sm">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Invite Member</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -37,42 +37,40 @@ const successType = url.searchParams.get('success');
|
||||
|
||||
<DashboardLayout title="Team Settings - Chronus">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<a href="/dashboard/team" class="btn btn-ghost btn-sm">
|
||||
<Icon name="heroicons:arrow-left" class="w-5 h-5" />
|
||||
<a href="/dashboard/team" class="btn btn-ghost btn-xs">
|
||||
<Icon name="heroicons:arrow-left" class="w-4 h-4" />
|
||||
</a>
|
||||
<h1 class="text-3xl font-bold">Team Settings</h1>
|
||||
<h1 class="text-2xl font-extrabold tracking-tight">Team Settings</h1>
|
||||
</div>
|
||||
|
||||
<!-- Team Settings -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">
|
||||
<Icon name="heroicons:building-office-2" class="w-6 h-6" />
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2 mb-4">
|
||||
<Icon name="heroicons:building-office-2" class="w-4 h-4" />
|
||||
Team Settings
|
||||
</h2>
|
||||
|
||||
{successType === 'org-name' && (
|
||||
<div class="alert alert-success mb-4">
|
||||
<Icon name="heroicons:check-circle" class="w-6 h-6" />
|
||||
<span>Team information updated successfully!</span>
|
||||
<Icon name="heroicons:check-circle" class="w-4 h-4" />
|
||||
<span class="text-sm">Team information updated successfully!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form
|
||||
action="/api/organizations/update-name"
|
||||
method="POST"
|
||||
class="space-y-4"
|
||||
class="space-y-3"
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input type="hidden" name="organizationId" value={organization.id} />
|
||||
|
||||
<div class="form-control">
|
||||
<div class="label">
|
||||
<span class="label-text font-medium">Team Logo</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Team Logo</legend>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-base-200 text-neutral-content rounded-xl w-24 border border-base-300 flex items-center justify-center overflow-hidden">
|
||||
<div class="bg-base-200 text-neutral-content rounded-xl w-20 border border-base-200 flex items-center justify-center overflow-hidden">
|
||||
{organization.logoUrl ? (
|
||||
<img
|
||||
src={organization.logoUrl}
|
||||
@@ -82,7 +80,7 @@ const successType = url.searchParams.get('success');
|
||||
) : (
|
||||
<Icon
|
||||
name="heroicons:photo"
|
||||
class="w-8 h-8 opacity-40 text-base-content"
|
||||
class="w-6 h-6 opacity-40 text-base-content"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -92,118 +90,100 @@ const successType = url.searchParams.get('success');
|
||||
type="file"
|
||||
name="logo"
|
||||
accept="image/png, image/jpeg"
|
||||
class="file-input file-input-bordered w-full max-w-xs"
|
||||
class="file-input file-input-bordered file-input-sm w-full max-w-xs"
|
||||
/>
|
||||
<div class="text-xs text-base-content/60 mt-2">
|
||||
Upload a company logo (PNG, JPG).
|
||||
<br />
|
||||
Will be displayed on invoices and quotes.
|
||||
<div class="text-xs text-base-content/40 mt-1">
|
||||
Upload a company logo (PNG, JPG). Will be displayed on invoices and quotes.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="team-name">
|
||||
Team Name
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Team Name</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="team-name"
|
||||
name="name"
|
||||
value={organization.name}
|
||||
placeholder="Organization name"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
required
|
||||
/>
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-base-content/60">This name is visible to all team members</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-base-content/40 mt-1">This name is visible to all team members</p>
|
||||
</fieldset>
|
||||
|
||||
<div class="divider">Address Information</div>
|
||||
<div class="divider text-xs text-base-content/40 my-2">Address Information</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="team-street">
|
||||
Street Address
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Street Address</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="team-street"
|
||||
name="street"
|
||||
value={organization.street || ''}
|
||||
placeholder="123 Main Street"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="team-city">
|
||||
City
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">City</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="team-city"
|
||||
name="city"
|
||||
value={organization.city || ''}
|
||||
placeholder="City"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="team-state">
|
||||
State/Province
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">State/Province</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="team-state"
|
||||
name="state"
|
||||
value={organization.state || ''}
|
||||
placeholder="State/Province"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="team-zip">
|
||||
Postal Code
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Postal Code</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="team-zip"
|
||||
name="zip"
|
||||
value={organization.zip || ''}
|
||||
placeholder="12345"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="team-country">
|
||||
Country
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Country</legend>
|
||||
<input
|
||||
type="text"
|
||||
id="team-country"
|
||||
name="country"
|
||||
value={organization.country || ''}
|
||||
placeholder="Country"
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="divider">Defaults</div>
|
||||
<div class="divider text-xs text-base-content/40 my-2">Defaults</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="default-tax-rate">
|
||||
Default Tax Rate (%)
|
||||
</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Default Tax Rate (%)</legend>
|
||||
<input
|
||||
type="number"
|
||||
id="default-tax-rate"
|
||||
@@ -212,18 +192,16 @@ const successType = url.searchParams.get('success');
|
||||
min="0"
|
||||
max="100"
|
||||
value={organization.defaultTaxRate || 0}
|
||||
class="input input-bordered w-full"
|
||||
class="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label font-medium" for="default-currency">
|
||||
Default Currency
|
||||
</label>
|
||||
<fieldset class="fieldset">
|
||||
<legend class="fieldset-legend text-xs">Default Currency</legend>
|
||||
<select
|
||||
id="default-currency"
|
||||
name="defaultCurrency"
|
||||
class="select select-bordered w-full"
|
||||
class="select w-full"
|
||||
>
|
||||
<option value="USD" selected={!organization.defaultCurrency || organization.defaultCurrency === 'USD'}>USD ($)</option>
|
||||
<option value="EUR" selected={organization.defaultCurrency === 'EUR'}>EUR (€)</option>
|
||||
@@ -231,16 +209,16 @@ const successType = url.searchParams.get('success');
|
||||
<option value="CAD" selected={organization.defaultCurrency === 'CAD'}>CAD ($)</option>
|
||||
<option value="AUD" selected={organization.defaultCurrency === 'AUD'}>AUD ($)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 mt-6">
|
||||
<span class="text-xs text-base-content/60 text-center sm:text-left">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-center gap-3 mt-4">
|
||||
<span class="text-xs text-base-content/40 text-center sm:text-left">
|
||||
Address information appears on invoices and quotes
|
||||
</span>
|
||||
|
||||
<button type="submit" class="btn btn-primary w-full sm:w-auto">
|
||||
<Icon name="heroicons:check" class="w-5 h-5" />
|
||||
<button type="submit" class="btn btn-primary btn-sm w-full sm:w-auto">
|
||||
<Icon name="heroicons:check" class="w-4 h-4" />
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
@@ -249,35 +227,34 @@ const successType = url.searchParams.get('success');
|
||||
</div>
|
||||
|
||||
<!-- Tags Section -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body">
|
||||
<div class="card card-border bg-base-100 mb-6">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="card-title">
|
||||
<Icon name="heroicons:tag" class="w-6 h-6" />
|
||||
<h2 class="text-sm font-semibold flex items-center gap-2">
|
||||
<Icon name="heroicons:tag" class="w-4 h-4" />
|
||||
Tags & Rates
|
||||
</h2>
|
||||
{/* We'll use a simple form submission for now or client-side JS for better UX later */}
|
||||
<button onclick="document.getElementById('new_tag_modal').showModal()" class="btn btn-primary btn-sm">
|
||||
<Icon name="heroicons:plus" class="w-5 h-5" />
|
||||
<button onclick="document.getElementById('new_tag_modal').showModal()" class="btn btn-primary btn-xs">
|
||||
<Icon name="heroicons:plus" class="w-3 h-3" />
|
||||
Add Tag
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-base-content/70 mb-4">
|
||||
<p class="text-base-content/60 text-xs mb-4">
|
||||
Tags can be used to categorize time entries. You can also associate an hourly rate with a tag for billing purposes.
|
||||
</p>
|
||||
|
||||
{allTags.length === 0 ? (
|
||||
<div class="alert alert-info">
|
||||
<Icon name="heroicons:information-circle" class="w-6 h-6" />
|
||||
<Icon name="heroicons:information-circle" class="w-4 h-4" />
|
||||
<div>
|
||||
<div class="font-bold">No tags yet</div>
|
||||
<div class="text-sm">Create tags to add context and rates to your time entries.</div>
|
||||
<div class="font-semibold text-sm">No tags yet</div>
|
||||
<div class="text-xs">Create tags to add context and rates to your time entries.</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@@ -287,7 +264,7 @@ const successType = url.searchParams.get('success');
|
||||
</thead>
|
||||
<tbody>
|
||||
{allTags.map(tag => (
|
||||
<tr>
|
||||
<tr class="hover">
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
{tag.color && (
|
||||
@@ -298,22 +275,22 @@ const successType = url.searchParams.get('success');
|
||||
</td>
|
||||
<td>
|
||||
{tag.rate ? (
|
||||
<span class="font-mono">{new Intl.NumberFormat('en-US', { style: 'currency', currency: organization.defaultCurrency || 'USD' }).format(tag.rate / 100)}</span>
|
||||
<span class="font-mono text-sm">{new Intl.NumberFormat('en-US', { style: 'currency', currency: organization.defaultCurrency || 'USD' }).format(tag.rate / 100)}</span>
|
||||
) : (
|
||||
<span class="text-base-content/40 text-xs italic">No rate</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
onclick={`document.getElementById('edit_tag_modal_${tag.id}').showModal()`}
|
||||
class="btn btn-ghost btn-xs btn-square"
|
||||
>
|
||||
<Icon name="heroicons:pencil" class="w-4 h-4" />
|
||||
<Icon name="heroicons:pencil" class="w-3 h-3" />
|
||||
</button>
|
||||
<form method="POST" action={`/api/tags/${tag.id}/delete`} onsubmit="return confirm('Are you sure you want to delete this tag?');">
|
||||
<button class="btn btn-ghost btn-xs btn-square text-error">
|
||||
<Icon name="heroicons:trash" class="w-4 h-4" />
|
||||
<Icon name="heroicons:trash" class="w-3 h-3" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -321,32 +298,24 @@ const successType = url.searchParams.get('success');
|
||||
{/* Edit Modal */}
|
||||
<dialog id={`edit_tag_modal_${tag.id}`} class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Edit Tag</h3>
|
||||
<h3 class="font-semibold text-base">Edit Tag</h3>
|
||||
<form method="POST" action={`/api/tags/${tag.id}/update`}>
|
||||
<div class="form-control w-full mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input type="text" name="name" value={tag.name} class="input input-bordered w-full" required />
|
||||
</div>
|
||||
<div class="form-control w-full mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text">Color</span>
|
||||
</label>
|
||||
<input type="color" name="color" value={tag.color || '#3b82f6'} class="input input-bordered w-full h-12 p-1" />
|
||||
</div>
|
||||
<div class="form-control w-full mb-6">
|
||||
<label class="label">
|
||||
<span class="label-text">Hourly Rate (cents)</span>
|
||||
</label>
|
||||
<input type="number" name="rate" value={tag.rate || 0} min="0" class="input input-bordered w-full" />
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">Enter rate in cents (e.g. 5000 = $50.00)</span>
|
||||
</label>
|
||||
</div>
|
||||
<fieldset class="fieldset mb-3">
|
||||
<legend class="fieldset-legend text-xs">Name</legend>
|
||||
<input type="text" name="name" value={tag.name} class="input w-full" required />
|
||||
</fieldset>
|
||||
<fieldset class="fieldset mb-3">
|
||||
<legend class="fieldset-legend text-xs">Color</legend>
|
||||
<input type="color" name="color" value={tag.color || '#3b82f6'} class="input w-full h-12 p-1" />
|
||||
</fieldset>
|
||||
<fieldset class="fieldset mb-4">
|
||||
<legend class="fieldset-legend text-xs">Hourly Rate (cents)</legend>
|
||||
<input type="number" name="rate" value={tag.rate || 0} min="0" class="input w-full" />
|
||||
<p class="text-xs text-base-content/40 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
|
||||
</fieldset>
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick={`document.getElementById('edit_tag_modal_${tag.id}').close()`}>Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
<button type="button" class="btn btn-sm" onclick={`document.getElementById('edit_tag_modal_${tag.id}').close()`}>Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -366,33 +335,25 @@ const successType = url.searchParams.get('success');
|
||||
|
||||
<dialog id="new_tag_modal" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">New Tag</h3>
|
||||
<h3 class="font-semibold text-base">New Tag</h3>
|
||||
<form method="POST" action="/api/tags/create">
|
||||
<input type="hidden" name="organizationId" value={organization.id} />
|
||||
<div class="form-control w-full mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input type="text" name="name" class="input input-bordered w-full" required placeholder="e.g. Billable, Rush" />
|
||||
</div>
|
||||
<div class="form-control w-full mb-4">
|
||||
<label class="label">
|
||||
<span class="label-text">Color</span>
|
||||
</label>
|
||||
<input type="color" name="color" value="#3b82f6" class="input input-bordered w-full h-12 p-1" />
|
||||
</div>
|
||||
<div class="form-control w-full mb-6">
|
||||
<label class="label">
|
||||
<span class="label-text">Hourly Rate (cents)</span>
|
||||
</label>
|
||||
<input type="number" name="rate" value="0" min="0" class="input input-bordered w-full" />
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/60">Enter rate in cents (e.g. 5000 = $50.00)</span>
|
||||
</label>
|
||||
</div>
|
||||
<fieldset class="fieldset mb-3">
|
||||
<legend class="fieldset-legend text-xs">Name</legend>
|
||||
<input type="text" name="name" class="input w-full" required placeholder="e.g. Billable, Rush" />
|
||||
</fieldset>
|
||||
<fieldset class="fieldset mb-3">
|
||||
<legend class="fieldset-legend text-xs">Color</legend>
|
||||
<input type="color" name="color" value="#3b82f6" class="input w-full h-12 p-1" />
|
||||
</fieldset>
|
||||
<fieldset class="fieldset mb-4">
|
||||
<legend class="fieldset-legend text-xs">Hourly Rate (cents)</legend>
|
||||
<input type="number" name="rate" value="0" min="0" class="input w-full" />
|
||||
<p class="text-xs text-base-content/40 mt-1">Enter rate in cents (e.g. 5000 = $50.00)</p>
|
||||
</fieldset>
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" onclick="document.getElementById('new_tag_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Create Tag</button>
|
||||
<button type="button" class="btn btn-sm" onclick="document.getElementById('new_tag_modal').close()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Create Tag</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user