From 756ab2a38fa523443b89d5d3785c8886427e89f3 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Thu, 1 Jan 2026 00:51:00 -0700
Subject: [PATCH] Fixed a number of issues

---
 package.json                                  |   2 +-
 src/components/Timer.vue                      | 106 +++++----
 src/layouts/DashboardLayout.astro             |  38 ++--
 src/pages/api/clients/[id]/delete.ts          |  71 ++++++
 src/pages/api/clients/[id]/update.ts          |  68 ++++++
 src/pages/api/organizations/update-name.ts    |  48 +++--
 src/pages/dashboard/clients/[id]/edit.astro   | 119 ++++++++++
 src/pages/dashboard/clients/[id]/index.astro  | 203 ++++++++++++++++++
 src/pages/dashboard/index.astro               |  10 +-
 src/pages/dashboard/team.astro                |   4 +-
 src/pages/dashboard/team/invite.astro         |  28 ++-
 src/pages/dashboard/team/settings.astro       |  44 ++--
 .../team/settings/categories/[id]/edit.astro  |  34 +--
 src/pages/index.astro                         |  14 +-
 14 files changed, 648 insertions(+), 141 deletions(-)
 create mode 100644 src/pages/api/clients/[id]/delete.ts
 create mode 100644 src/pages/api/clients/[id]/update.ts
 create mode 100644 src/pages/dashboard/clients/[id]/edit.astro
 create mode 100644 src/pages/dashboard/clients/[id]/index.astro

diff --git a/package.json b/package.json
index e731f95..35418be 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chronus",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
diff --git a/src/components/Timer.vue b/src/components/Timer.vue
index 2ff11da..fece54d 100644
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps<{
-  initialRunningEntry: { startTime: number; description: string | null; clientId: string; categoryId: string } | null;
+  initialRunningEntry: {
+    startTime: number;
+    description: string | null;
+    clientId: string;
+    categoryId: string;
+  } | null;
   clients: { id: string; name: string }[];
   categories: { id: string; name: string; color: string | null }[];
   tags: { id: string; name: string; color: string | null }[];
@@ -11,9 +16,9 @@ const props = defineProps<{
 const isRunning = ref(false);
 const startTime = ref<number | null>(null);
 const elapsedTime = ref(0);
-const description = ref('');
-const selectedClientId = ref('');
-const selectedCategoryId = ref('');
+const description = ref("");
+const selectedClientId = ref("");
+const selectedCategoryId = ref("");
 const selectedTags = ref<string[]>([]);
 let interval: ReturnType<typeof setInterval> | null = null;
 
@@ -22,21 +27,24 @@ function formatTime(ms: number) {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
   const seconds = totalSeconds % 60;
-  
-  const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-  
+
+  const timeStr = `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+
   // Calculate rounded version
   const totalMinutes = Math.round(ms / 1000 / 60);
   const roundedHours = Math.floor(totalMinutes / 60);
   const roundedMinutes = totalMinutes % 60;
-  
-  let roundedStr = '';
+
+  let roundedStr = "";
   if (roundedHours > 0) {
-    roundedStr = roundedMinutes > 0 ? `${roundedHours}h ${roundedMinutes}m` : `${roundedHours}h`;
+    roundedStr =
+      roundedMinutes > 0
+        ? `${roundedHours}h ${roundedMinutes}m`
+        : `${roundedHours}h`;
   } else {
     roundedStr = `${roundedMinutes}m`;
   }
-  
+
   return `${timeStr} (${roundedStr})`;
 }
 
@@ -53,7 +61,7 @@ onMounted(() => {
   if (props.initialRunningEntry) {
     isRunning.value = true;
     startTime.value = props.initialRunningEntry.startTime;
-    description.value = props.initialRunningEntry.description || '';
+    description.value = props.initialRunningEntry.description || "";
     selectedClientId.value = props.initialRunningEntry.clientId;
     selectedCategoryId.value = props.initialRunningEntry.categoryId;
     elapsedTime.value = Date.now() - startTime.value;
@@ -69,26 +77,26 @@ onUnmounted(() => {
 
 async function startTimer() {
   if (!selectedClientId.value) {
-    alert('Please select a client');
+    alert("Please select a client");
     return;
   }
 
   if (!selectedCategoryId.value) {
-    alert('Please select a category');
+    alert("Please select a category");
     return;
   }
 
-  const res = await fetch('/api/time-entries/start', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ 
+  const res = await fetch("/api/time-entries/start", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
       description: description.value,
       clientId: selectedClientId.value,
       categoryId: selectedCategoryId.value,
       tags: selectedTags.value,
     }),
   });
-  
+
   if (res.ok) {
     const data = await res.json();
     startTime.value = new Date(data.startTime).getTime();
@@ -100,8 +108,8 @@ async function startTimer() {
 }
 
 async function stopTimer() {
-  const res = await fetch('/api/time-entries/stop', {
-    method: 'POST',
+  const res = await fetch("/api/time-entries/stop", {
+    method: "POST",
   });
 
   if (res.ok) {
@@ -109,9 +117,9 @@ async function stopTimer() {
     if (interval) clearInterval(interval);
     elapsedTime.value = 0;
     startTime.value = null;
-    description.value = '';
-    selectedClientId.value = '';
-    selectedCategoryId.value = '';
+    description.value = "";
+    selectedClientId.value = "";
+    selectedCategoryId.value = "";
     selectedTags.value = [];
     window.location.reload();
   }
@@ -127,13 +135,17 @@ async function stopTimer() {
           <label class="label pb-2">
             <span class="label-text font-medium">Client</span>
           </label>
-          <select 
-            v-model="selectedClientId" 
+          <select
+            v-model="selectedClientId"
             class="select select-bordered w-full"
             :disabled="isRunning"
           >
             <option value="">Select a client...</option>
-            <option v-for="client in clients" :key="client.id" :value="client.id">
+            <option
+              v-for="client in clients"
+              :key="client.id"
+              :value="client.id"
+            >
               {{ client.name }}
             </option>
           </select>
@@ -143,13 +155,17 @@ async function stopTimer() {
           <label class="label pb-2">
             <span class="label-text font-medium">Category</span>
           </label>
-          <select 
-            v-model="selectedCategoryId" 
+          <select
+            v-model="selectedCategoryId"
             class="select select-bordered w-full"
             :disabled="isRunning"
           >
             <option value="">Select a category...</option>
-            <option v-for="category in categories" :key="category.id" :value="category.id">
+            <option
+              v-for="category in categories"
+              :key="category.id"
+              :value="category.id"
+            >
               {{ category.name }}
             </option>
           </select>
@@ -161,11 +177,11 @@ async function stopTimer() {
         <label class="label pb-2">
           <span class="label-text font-medium">Description</span>
         </label>
-        <input 
-          v-model="description" 
-          type="text" 
-          placeholder="What are you working on?" 
-          class="input input-bordered w-full" 
+        <input
+          v-model="description"
+          type="text"
+          placeholder="What are you working on?"
+          class="input input-bordered w-full"
           :disabled="isRunning"
         />
       </div>
@@ -182,7 +198,7 @@ async function stopTimer() {
             @click="toggleTag(tag.id)"
             :class="[
               'badge badge-lg cursor-pointer transition-all',
-              selectedTags.includes(tag.id) ? 'badge-primary' : 'badge-outline'
+              selectedTags.includes(tag.id) ? 'badge-primary' : 'badge-outline',
             ]"
             :disabled="isRunning"
             type="button"
@@ -194,21 +210,19 @@ async function stopTimer() {
 
       <!-- Timer and Action Row -->
       <div class="flex flex-col sm:flex-row items-center gap-6 pt-4">
-        <div class="font-mono text-5xl font-bold tabular-nums tracking-tight text-center sm:text-left flex-grow">
+        <div
+          class="font-mono text-5xl font-bold tabular-nums tracking-tight text-center sm:text-left grow"
+        >
           {{ formatTime(elapsedTime) }}
         </div>
-        <button 
-          v-if="!isRunning" 
-          @click="startTimer" 
+        <button
+          v-if="!isRunning"
+          @click="startTimer"
           class="btn btn-primary btn-lg min-w-40"
         >
           ▶️ Start Timer
         </button>
-        <button 
-          v-else 
-          @click="stopTimer" 
-          class="btn btn-error btn-lg min-w-40"
-        >
+        <button v-else @click="stopTimer" class="btn btn-error btn-lg min-w-40">
           ⏹️ Stop Timer
         </button>
       </div>
diff --git a/src/layouts/DashboardLayout.astro b/src/layouts/DashboardLayout.astro
index 03bf239..c3372be 100644
--- a/src/layouts/DashboardLayout.astro
+++ b/src/layouts/DashboardLayout.astro
@@ -41,7 +41,7 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
-	<body class="bg-gradient-to-br from-base-100 via-base-200 to-base-100">
+	<body class="bg-linear-to-br from-base-100 via-base-200 to-base-100">
     <div class="drawer lg:drawer-open">
       <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
       <div class="drawer-content flex flex-col">
@@ -54,38 +54,38 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
           </div>
           <div class="flex-1 px-2 flex items-center gap-2">
             <img src="/src/assets/logo.webp" alt="Chronus" class="h-8 w-8" />
-            <span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Chronus</span>
+            <span class="text-xl font-bold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent">Chronus</span>
           </div>
         </div>
-        
+
         <!-- Page content here -->
         <main class="p-6 md:p-8">
           <slot />
         </main>
-      </div> 
+      </div>
       <div class="drawer-side z-50">
-        <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label> 
+        <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>
         <ul class="menu bg-base-200 min-h-full w-80 p-4">
           <!-- Sidebar content here -->
           <li class="mb-6">
-            <a href="/dashboard" class="flex items-center gap-3 text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pointer-events-none">
+            <a href="/dashboard" class="flex items-center gap-3 text-2xl font-bold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent pointer-events-none">
               <img src="/src/assets/logo.webp" alt="Chronus" class="h-10 w-10" />
               Chronus
             </a>
           </li>
-          
+
           {/* Team Switcher */}
           {userMemberships.length > 0 && (
             <li class="mb-4">
               <div class="form-control">
-                <select 
+                <select
                   class="select select-bordered w-full font-semibold"
                   id="team-switcher"
                   onchange="document.cookie = 'currentTeamId=' + this.value + '; path=/'; window.location.reload();"
                 >
                   {userMemberships.map(({ membership, organization }) => (
-                    <option 
-                      value={organization.id} 
+                    <option
+                      value={organization.id}
                       selected={organization.id === currentTeamId}
                     >
                       {organization.name}
@@ -95,7 +95,7 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
               </div>
             </li>
           )}
-          
+
           {userMemberships.length === 0 && (
             <li class="mb-4">
               <a href="/dashboard/organizations/new" class="btn btn-primary btn-sm">
@@ -104,9 +104,9 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
               </a>
             </li>
           )}
-          
+
           <div class="divider my-2"></div>
-          
+
           <li><a href="/dashboard">
             <Icon name="heroicons:home" class="w-5 h-5" />
             Dashboard
@@ -127,7 +127,7 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
             <Icon name="heroicons:user-group" class="w-5 h-5" />
             Team
           </a></li>
-          
+
           {user.isSiteAdmin && (
             <>
               <div class="divider"></div>
@@ -137,13 +137,13 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
               </a></li>
             </>
           )}
-          
+
           <div class="divider"></div>
-          
+
           <li>
             <a href="/dashboard/settings" class="flex items-center gap-3 bg-base-100 hover:bg-base-300 rounded-lg p-3">
               <div class="avatar placeholder">
-                <div class="bg-gradient-to-br from-primary via-secondary to-accent text-primary-content rounded-full w-10 ring ring-primary ring-offset-base-100 ring-offset-2">
+                <div class="bg-linear-to-br from-primary via-secondary to-accent text-primary-content rounded-full w-10 ring ring-primary ring-offset-base-100 ring-offset-2">
                   <span class="text-sm font-bold">{user.name.charAt(0).toUpperCase()}</span>
                 </div>
               </div>
@@ -154,7 +154,7 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
               <Icon name="heroicons:chevron-right" class="w-4 h-4 opacity-50" />
             </a>
           </li>
-          
+
           <li>
             <form action="/api/auth/logout" method="POST">
               <button type="submit" class="w-full text-error hover:bg-error/10">
@@ -164,7 +164,7 @@ const currentTeam = userMemberships.find(m => m.organization.id === currentTeamI
             </form>
           </li>
         </ul>
-      
+
       </div>
     </div>
 	</body>
diff --git a/src/pages/api/clients/[id]/delete.ts b/src/pages/api/clients/[id]/delete.ts
new file mode 100644
index 0000000..ca899bd
--- /dev/null
+++ b/src/pages/api/clients/[id]/delete.ts
@@ -0,0 +1,71 @@
+import type { APIRoute } from 'astro';
+import { db } from '../../../../db';
+import { clients, members, timeEntries, timeEntryTags } from '../../../../db/schema';
+import { eq, and, inArray } from 'drizzle-orm';
+
+export const POST: APIRoute = async ({ params, locals, redirect }) => {
+  const user = locals.user;
+  if (!user) {
+    return redirect('/login');
+  }
+
+  const { id } = params;
+  if (!id) {
+    return new Response('Client ID is required', { status: 400 });
+  }
+
+  try {
+    // Get the client to check organization ownership
+    const client = await db.select()
+      .from(clients)
+      .where(eq(clients.id, id))
+      .get();
+
+    if (!client) {
+      return new Response('Client not found', { status: 404 });
+    }
+
+    // Verify user is a member of the organization
+    const membership = await db.select()
+      .from(members)
+      .where(and(
+        eq(members.userId, user.id),
+        eq(members.organizationId, client.organizationId)
+      ))
+      .get();
+
+    if (!membership) {
+      return new Response('Not authorized', { status: 403 });
+    }
+
+    // Find all time entries for this client to clean up tags
+    const clientEntries = await db.select({ id: timeEntries.id })
+      .from(timeEntries)
+      .where(eq(timeEntries.clientId, id))
+      .all();
+
+    const entryIds = clientEntries.map(e => e.id);
+
+    if (entryIds.length > 0) {
+      // Delete tags associated with these entries
+      await db.delete(timeEntryTags)
+        .where(inArray(timeEntryTags.timeEntryId, entryIds))
+        .run();
+
+      // Delete the time entries
+      await db.delete(timeEntries)
+        .where(eq(timeEntries.clientId, id))
+        .run();
+    }
+
+    // Delete the client
+    await db.delete(clients)
+      .where(eq(clients.id, id))
+      .run();
+
+    return redirect('/dashboard/clients');
+  } catch (error) {
+    console.error('Error deleting client:', error);
+    return new Response('Failed to delete client', { status: 500 });
+  }
+};
diff --git a/src/pages/api/clients/[id]/update.ts b/src/pages/api/clients/[id]/update.ts
new file mode 100644
index 0000000..2eb6476
--- /dev/null
+++ b/src/pages/api/clients/[id]/update.ts
@@ -0,0 +1,68 @@
+import type { APIRoute } from "astro";
+import { db } from "../../../../db";
+import { clients, members } from "../../../../db/schema";
+import { eq, and } from "drizzle-orm";
+
+export const POST: APIRoute = async ({ request, params, locals, redirect }) => {
+  const user = locals.user;
+  if (!user) {
+    return redirect("/login");
+  }
+
+  const { id } = params;
+  if (!id) {
+    return new Response("Client ID is required", { status: 400 });
+  }
+
+  const formData = await request.formData();
+  const name = formData.get("name") as string;
+  const email = formData.get("email") as string;
+
+  if (!name || name.trim().length === 0) {
+    return new Response("Client name is required", { status: 400 });
+  }
+
+  try {
+    // Get the client to check organization ownership
+    const client = await db
+      .select()
+      .from(clients)
+      .where(eq(clients.id, id))
+      .get();
+
+    if (!client) {
+      return new Response("Client not found", { status: 404 });
+    }
+
+    // Verify user is a member of the organization
+    const membership = await db
+      .select()
+      .from(members)
+      .where(
+        and(
+          eq(members.userId, user.id),
+          eq(members.organizationId, client.organizationId),
+        ),
+      )
+      .get();
+
+    if (!membership) {
+      return new Response("Not authorized", { status: 403 });
+    }
+
+    // Update client
+    await db
+      .update(clients)
+      .set({
+        name: name.trim(),
+        email: email?.trim() || null,
+      })
+      .where(eq(clients.id, id))
+      .run();
+
+    return redirect(`/dashboard/clients/${id}`);
+  } catch (error) {
+    console.error("Error updating client:", error);
+    return new Response("Failed to update client", { status: 500 });
+  }
+};
diff --git a/src/pages/api/organizations/update-name.ts b/src/pages/api/organizations/update-name.ts
index cfd9be8..5cd1c67 100644
--- a/src/pages/api/organizations/update-name.ts
+++ b/src/pages/api/organizations/update-name.ts
@@ -1,47 +1,59 @@
-import type { APIRoute } from 'astro';
-import { db } from '../../../db';
-import { organizations, members } from '../../../db/schema';
-import { eq } from 'drizzle-orm';
+import type { APIRoute } from "astro";
+import { db } from "../../../db";
+import { organizations, members } from "../../../db/schema";
+import { eq, and } from "drizzle-orm";
 
 export const POST: APIRoute = async ({ request, locals, redirect }) => {
   const user = locals.user;
   if (!user) {
-    return redirect('/login');
+    return redirect("/login");
   }
 
   const formData = await request.formData();
-  const organizationId = formData.get('organizationId') as string;
-  const name = formData.get('name') as string;
+  const organizationId = formData.get("organizationId") as string;
+  const name = formData.get("name") as string;
 
   if (!organizationId || !name || name.trim().length === 0) {
-    return new Response('Organization ID and name are required', { status: 400 });
+    return new Response("Organization ID and name are required", {
+      status: 400,
+    });
   }
 
   try {
     // Verify user is admin/owner of this organization
-    const membership = await db.select()
+    const membership = await db
+      .select()
       .from(members)
-      .where(eq(members.userId, user.id))
+      .where(
+        and(
+          eq(members.userId, user.id),
+          eq(members.organizationId, organizationId),
+        ),
+      )
       .get();
 
-    if (!membership || membership.organizationId !== organizationId) {
-      return new Response('Not authorized', { status: 403 });
+    if (!membership) {
+      return new Response("Not authorized", { status: 403 });
     }
 
-    const isAdmin = membership.role === 'owner' || membership.role === 'admin';
+    const isAdmin = membership.role === "owner" || membership.role === "admin";
     if (!isAdmin) {
-      return new Response('Only owners and admins can update organization settings', { status: 403 });
+      return new Response(
+        "Only owners and admins can update organization settings",
+        { status: 403 },
+      );
     }
 
     // Update organization name
-    await db.update(organizations)
+    await db
+      .update(organizations)
       .set({ name: name.trim() })
       .where(eq(organizations.id, organizationId))
       .run();
 
-    return redirect('/dashboard/team/settings?success=org-name');
+    return redirect("/dashboard/team/settings?success=org-name");
   } catch (error) {
-    console.error('Error updating organization name:', error);
-    return new Response('Failed to update organization name', { status: 500 });
+    console.error("Error updating organization name:", error);
+    return new Response("Failed to update organization name", { status: 500 });
   }
 };
diff --git a/src/pages/dashboard/clients/[id]/edit.astro b/src/pages/dashboard/clients/[id]/edit.astro
new file mode 100644
index 0000000..1485dfc
--- /dev/null
+++ b/src/pages/dashboard/clients/[id]/edit.astro
@@ -0,0 +1,119 @@
+---
+import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
+import { Icon } from 'astro-icon/components';
+import { db } from '../../../../db';
+import { clients, members } from '../../../../db/schema';
+import { eq, and } from 'drizzle-orm';
+
+const user = Astro.locals.user;
+if (!user) return Astro.redirect('/login');
+
+const { id } = Astro.params;
+if (!id) return Astro.redirect('/dashboard/clients');
+
+// Get current team from cookie
+const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
+
+const userMemberships = await db.select()
+  .from(members)
+  .where(eq(members.userId, user.id))
+  .all();
+
+if (userMemberships.length === 0) return Astro.redirect('/dashboard');
+
+// Use current team or fallback to first membership
+const userMembership = currentTeamId
+  ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
+  : userMemberships[0];
+
+const client = await db.select()
+  .from(clients)
+  .where(and(
+    eq(clients.id, id),
+    eq(clients.organizationId, userMembership.organizationId)
+  ))
+  .get();
+
+if (!client) return Astro.redirect('/dashboard/clients');
+---
+
+<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>
+      <h1 class="text-3xl font-bold">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">
+            <span class="label-text">Client Name</span>
+          </label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={client.name}
+            placeholder="Acme Corp"
+            class="input input-bordered"
+            required
+          />
+        </div>
+
+        <div class="form-control">
+          <label class="label" for="email">
+            <span class="label-text">Email (optional)</span>
+          </label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            value={client.email || ''}
+            placeholder="contact@acme.com"
+            class="input input-bordered"
+          />
+        </div>
+
+        <div class="card-actions justify-between mt-6">
+          <button
+            type="button"
+            class="btn btn-error btn-outline"
+            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>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+
+  <!-- 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">
+        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>
+        </form>
+        <form method="POST" action={`/api/clients/${client.id}/delete`}>
+          <button type="submit" class="btn btn-error">Delete</button>
+        </form>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+</DashboardLayout>
diff --git a/src/pages/dashboard/clients/[id]/index.astro b/src/pages/dashboard/clients/[id]/index.astro
new file mode 100644
index 0000000..70f8835
--- /dev/null
+++ b/src/pages/dashboard/clients/[id]/index.astro
@@ -0,0 +1,203 @@
+---
+import DashboardLayout from '../../../../layouts/DashboardLayout.astro';
+import { Icon } from 'astro-icon/components';
+import { db } from '../../../../db';
+import { clients, timeEntries, members, categories, users } from '../../../../db/schema';
+import { eq, and, desc, sql } from 'drizzle-orm';
+import { formatTimeRange } from '../../../../lib/formatTime';
+
+const user = Astro.locals.user;
+if (!user) return Astro.redirect('/login');
+
+const { id } = Astro.params;
+if (!id) return Astro.redirect('/dashboard/clients');
+
+// Get current team from cookie
+const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
+
+const userMemberships = await db.select()
+  .from(members)
+  .where(eq(members.userId, user.id))
+  .all();
+
+if (userMemberships.length === 0) return Astro.redirect('/dashboard');
+
+// Use current team or fallback to first membership
+const userMembership = currentTeamId
+  ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
+  : userMemberships[0];
+
+const client = await db.select()
+  .from(clients)
+  .where(and(
+    eq(clients.id, id),
+    eq(clients.organizationId, userMembership.organizationId)
+  ))
+  .get();
+
+if (!client) return Astro.redirect('/dashboard/clients');
+
+// Get recent activity
+const recentEntries = await db.select({
+  entry: timeEntries,
+  category: categories,
+  user: users,
+})
+  .from(timeEntries)
+  .leftJoin(categories, eq(timeEntries.categoryId, categories.id))
+  .leftJoin(users, eq(timeEntries.userId, users.id))
+  .where(eq(timeEntries.clientId, client.id))
+  .orderBy(desc(timeEntries.startTime))
+  .limit(10)
+  .all();
+
+// Calculate total time tracked
+const totalTimeResult = await db.select({
+  totalDuration: sql<number>`sum(CASE WHEN ${timeEntries.endTime} IS NOT NULL THEN ${timeEntries.endTime} - ${timeEntries.startTime} ELSE 0 END)`
+})
+  .from(timeEntries)
+  .where(eq(timeEntries.clientId, client.id))
+  .get();
+
+const totalDurationMs = totalTimeResult?.totalDuration || 0;
+const totalHours = Math.floor(totalDurationMs / (1000 * 60 * 60));
+const totalMinutes = Math.floor((totalDurationMs % (1000 * 60 * 60)) / (1000 * 60));
+
+// Get total entries count
+const totalEntriesResult = await db.select({ count: sql<number>`count(*)` })
+  .from(timeEntries)
+  .where(eq(timeEntries.clientId, client.id))
+  .get();
+const totalEntriesCount = totalEntriesResult?.count || 0;
+---
+
+<DashboardLayout title={`${client.name} - Clients - Chronus`}>
+  <div class="flex items-center gap-3 mb-6">
+    <a href="/dashboard/clients" class="btn btn-ghost btn-sm">
+      <Icon name="heroicons:arrow-left" class="w-5 h-5" />
+    </a>
+    <h1 class="text-3xl font-bold">{client.name}</h1>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+    <!-- Client Details Card -->
+    <div class="card bg-base-100 shadow-xl border border-base-200 lg:col-span-2">
+      <div class="card-body">
+        <div class="flex justify-between items-start">
+          <div>
+            <h2 class="card-title text-2xl mb-1">{client.name}</h2>
+            {client.email && (
+              <div class="flex items-center gap-2 text-base-content/70 mb-4">
+                <Icon name="heroicons:envelope" class="w-4 h-4" />
+                <a href={`mailto:${client.email}`} class="link link-hover">{client.email}</a>
+              </div>
+            )}
+          </div>
+          <div class="flex gap-2">
+            <a href={`/dashboard/clients/${client.id}/edit`} class="btn btn-primary btn-sm">
+              <Icon name="heroicons:pencil" class="w-4 h-4" />
+              Edit
+            </a>
+            <form method="POST" action={`/api/clients/${client.id}/delete`} onsubmit="return confirm('Are you sure you want to delete this client? This will also delete all associated time entries.');">
+              <button type="submit" class="btn btn-error btn-outline btn-sm">
+                <Icon name="heroicons:trash" class="w-4 h-4" />
+                Delete
+              </button>
+            </form>
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div class="stats shadow w-full">
+          <div class="stat">
+            <div class="stat-figure text-primary">
+              <Icon name="heroicons:clock" class="w-8 h-8" />
+            </div>
+            <div class="stat-title">Total Time Tracked</div>
+            <div class="stat-value text-primary">{totalHours}h {totalMinutes}m</div>
+            <div class="stat-desc">Across all projects</div>
+          </div>
+
+          <div class="stat">
+            <div class="stat-figure text-secondary">
+              <Icon name="heroicons:list-bullet" class="w-8 h-8" />
+            </div>
+            <div class="stat-title">Total Entries</div>
+            <div class="stat-value text-secondary">{totalEntriesCount}</div>
+            <div class="stat-desc">Recorded entries</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Meta Info Card -->
+    <div class="card bg-base-100 shadow-xl border border-base-200 h-fit">
+      <div class="card-body">
+        <h3 class="card-title text-lg mb-4">Information</h3>
+
+        <div class="space-y-4">
+          <div>
+            <div class="text-sm font-medium text-base-content/60">Created</div>
+            <div>{client.createdAt?.toLocaleDateString() ?? 'N/A'}</div>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Recent Activity -->
+  <div class="card bg-base-100 shadow-xl border border-base-200">
+    <div class="card-body">
+      <h2 class="card-title mb-4">Recent Activity</h2>
+
+      {recentEntries.length > 0 ? (
+        <div class="overflow-x-auto">
+          <table class="table">
+            <thead>
+              <tr>
+                <th>Description</th>
+                <th>Category</th>
+                <th>User</th>
+                <th>Date</th>
+                <th>Duration</th>
+              </tr>
+            </thead>
+            <tbody>
+              {recentEntries.map(({ entry, category, user: entryUser }) => (
+                <tr>
+                  <td>{entry.description || '-'}</td>
+                  <td>
+                    {category ? (
+                      <div class="flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full" style={`background-color: ${category.color}`}></span>
+                        <span>{category.name}</span>
+                      </div>
+                    ) : '-'}
+                  </td>
+                  <td>{entryUser?.name || 'Unknown'}</td>
+                  <td>{entry.startTime.toLocaleDateString()}</td>
+                  <td class="font-mono">{formatTimeRange(entry.startTime, entry.endTime)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div class="text-center py-8 text-base-content/60">
+          No time entries recorded for this client yet.
+        </div>
+      )}
+
+      {recentEntries.length > 0 && (
+        <div class="card-actions justify-center mt-4">
+          <a href={`/dashboard/tracker?client=${client.id}`} class="btn btn-ghost btn-sm">
+            View All Entries
+          </a>
+        </div>
+      )}
+    </div>
+  </div>
+</DashboardLayout>
diff --git a/src/pages/dashboard/index.astro b/src/pages/dashboard/index.astro
index e1b99e7..fc28a2c 100644
--- a/src/pages/dashboard/index.astro
+++ b/src/pages/dashboard/index.astro
@@ -24,7 +24,7 @@ const userOrgs = await db.select({
 .all();
 
 // Use current team or fallback to first
-const currentOrg = currentTeamId 
+const currentOrg = currentTeamId
   ? userOrgs.find(o => o.organizationId === currentTeamId) || userOrgs[0]
   : userOrgs[0];
 
@@ -78,14 +78,14 @@ if (currentOrg) {
       isNull(timeEntries.endTime)
     ))
     .all();
-  
+
   stats.activeTimers = activeCount.length;
 
   const clientCount = await db.select()
     .from(clients)
     .where(eq(clients.organizationId, currentOrg.organizationId))
     .all();
-  
+
   stats.totalClients = clientCount.length;
 
   stats.recentEntries = await db.select({
@@ -109,7 +109,7 @@ const hasMembership = userOrgs.length > 0;
 <DashboardLayout title="Dashboard - Chronus">
   <div class="flex justify-between items-center mb-8">
     <div>
-      <h1 class="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2">
+      <h1 class="text-4xl font-bold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent mb-2">
         Dashboard
       </h1>
       <p class="text-base-content/60">Welcome back, {user.name}!</p>
@@ -174,7 +174,7 @@ const hasMembership = userOrgs.length > 0;
           <div class="stat-desc">Total active</div>
         </div>
       </div>
-  
+
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- Quick Actions -->
         <div class="card bg-base-100 shadow-xl">
diff --git a/src/pages/dashboard/team.astro b/src/pages/dashboard/team.astro
index 0291d71..1477df8 100644
--- a/src/pages/dashboard/team.astro
+++ b/src/pages/dashboard/team.astro
@@ -19,7 +19,7 @@ const userMemberships = await db.select()
 if (userMemberships.length === 0) return Astro.redirect('/dashboard');
 
 // Use current team or fallback to first membership
-const userMembership = currentTeamId 
+const userMembership = currentTeamId
   ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
   : userMemberships[0];
 
@@ -101,7 +101,7 @@ const isAdmin = currentUserMember?.member.role === 'owner' || currentUserMember?
                         <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">
+                        <ul tabindex="0" class="dropdown-content z-1 menu p-2 shadow 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} />
diff --git a/src/pages/dashboard/team/invite.astro b/src/pages/dashboard/team/invite.astro
index 69bb1ef..b4021bf 100644
--- a/src/pages/dashboard/team/invite.astro
+++ b/src/pages/dashboard/team/invite.astro
@@ -8,12 +8,20 @@ import { eq } from 'drizzle-orm';
 const user = Astro.locals.user;
 if (!user) return Astro.redirect('/login');
 
-const userMembership = await db.select()
+// Get current team from cookie
+const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
+
+const userMemberships = await db.select()
   .from(members)
   .where(eq(members.userId, user.id))
-  .get();
+  .all();
 
-if (!userMembership) return Astro.redirect('/dashboard');
+if (userMemberships.length === 0) return Astro.redirect('/dashboard');
+
+// Use current team or fallback to first membership
+const userMembership = currentTeamId
+  ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
+  : userMemberships[0];
 
 const isAdmin = userMembership.role === 'owner' || userMembership.role === 'admin';
 if (!isAdmin) return Astro.redirect('/dashboard/team');
@@ -22,7 +30,7 @@ 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>
-    
+
     <form method="POST" action="/api/team/invite" class="card bg-base-100 shadow-xl border border-base-200">
       <div class="card-body">
         <div class="alert alert-info mb-4">
@@ -34,13 +42,13 @@ if (!isAdmin) return Astro.redirect('/dashboard/team');
           <label class="label" for="email">
             <span class="label-text">Email Address</span>
           </label>
-          <input 
-            type="email" 
+          <input
+            type="email"
             id="email"
-            name="email" 
-            placeholder="user@example.com" 
-            class="input input-bordered" 
-            required 
+            name="email"
+            placeholder="user@example.com"
+            class="input input-bordered"
+            required
           />
         </div>
 
diff --git a/src/pages/dashboard/team/settings.astro b/src/pages/dashboard/team/settings.astro
index 162c627..d8ffcda 100644
--- a/src/pages/dashboard/team/settings.astro
+++ b/src/pages/dashboard/team/settings.astro
@@ -11,18 +11,22 @@ if (!user) return Astro.redirect('/login');
 // Get current team from cookie
 const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
 
-const userMembership = await db.select()
+const userMemberships = await db.select()
   .from(members)
   .where(eq(members.userId, user.id))
-  .get();
+  .all();
 
-if (!userMembership) return Astro.redirect('/dashboard');
+if (userMemberships.length === 0) return Astro.redirect('/dashboard');
+
+// Use current team or fallback to first membership
+const userMembership = currentTeamId
+  ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
+  : userMemberships[0];
 
 const isAdmin = userMembership.role === 'owner' || userMembership.role === 'admin';
 if (!isAdmin) return Astro.redirect('/dashboard/team');
 
-// Use current team or fallback to membership org
-const orgId = currentTeamId || userMembership.organizationId;
+const orgId = userMembership.organizationId;
 
 const organization = await db.select()
   .from(organizations)
@@ -55,34 +59,34 @@ const successType = url.searchParams.get('success');
         <Icon name="heroicons:building-office-2" class="w-6 h-6" />
         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 name updated successfully!</span>
         </div>
       )}
-      
+
       <form action="/api/organizations/update-name" method="POST" class="space-y-4">
         <input type="hidden" name="organizationId" value={organization.id} />
-        
+
         <label class="form-control">
           <div class="label">
             <span class="label-text font-medium">Team Name</span>
           </div>
-          <input 
-            type="text" 
-            name="name" 
+          <input
+            type="text"
+            name="name"
             value={organization.name}
-            placeholder="Organization name" 
-            class="input input-bordered w-full" 
-            required 
+            placeholder="Organization name"
+            class="input input-bordered 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>
         </label>
-        
+
         <div class="flex justify-end">
           <button type="submit" class="btn btn-primary">
             <Icon name="heroicons:check" class="w-5 h-5" />
@@ -106,7 +110,7 @@ const successType = url.searchParams.get('success');
           Add Category
         </a>
       </div>
-      
+
       <p class="text-base-content/70 mb-4">
         Categories help organize time tracking by type of work. All team members use the same categories.
       </p>
@@ -126,16 +130,16 @@ const successType = url.searchParams.get('success');
               <div class="card-body p-4">
                 <div class="flex items-center gap-3">
                   {category.color && (
-                    <span class="w-4 h-4 rounded-full flex-shrink-0" style={`background-color: ${category.color}`}></span>
+                    <span class="w-4 h-4 rounded-full shrink-0" style={`background-color: ${category.color}`}></span>
                   )}
-                  <div class="flex-grow min-w-0">
+                  <div class="grow min-w-0">
                     <h3 class="font-semibold truncate">{category.name}</h3>
                     <p class="text-xs text-base-content/60">
                       Created {category.createdAt?.toLocaleDateString() ?? 'N/A'}
                     </p>
                   </div>
-                  <a 
-                    href={`/dashboard/team/settings/categories/${category.id}/edit`} 
+                  <a
+                    href={`/dashboard/team/settings/categories/${category.id}/edit`}
                     class="btn btn-ghost btn-xs"
                   >
                     <Icon name="heroicons:pencil" class="w-4 h-4" />
diff --git a/src/pages/dashboard/team/settings/categories/[id]/edit.astro b/src/pages/dashboard/team/settings/categories/[id]/edit.astro
index a7d799b..7054ef3 100644
--- a/src/pages/dashboard/team/settings/categories/[id]/edit.astro
+++ b/src/pages/dashboard/team/settings/categories/[id]/edit.astro
@@ -10,12 +10,20 @@ if (!user) return Astro.redirect('/login');
 
 const { id } = Astro.params;
 
-const userMembership = await db.select()
+// Get current team from cookie
+const currentTeamId = Astro.cookies.get('currentTeamId')?.value;
+
+const userMemberships = await db.select()
   .from(members)
   .where(eq(members.userId, user.id))
-  .get();
+  .all();
 
-if (!userMembership) return Astro.redirect('/dashboard');
+if (userMemberships.length === 0) return Astro.redirect('/dashboard');
+
+// Use current team or fallback to first membership
+const userMembership = currentTeamId
+  ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
+  : userMemberships[0];
 
 const isAdmin = userMembership.role === 'owner' || userMembership.role === 'admin';
 if (!isAdmin) return Astro.redirect('/dashboard/team/settings');
@@ -39,21 +47,21 @@ if (!category) return Astro.redirect('/dashboard/team/settings');
       </a>
       <h1 class="text-3xl font-bold">Edit Category</h1>
     </div>
-    
+
     <form method="POST" action={`/api/categories/${id}/update`} class="card bg-base-200 shadow-xl border border-base-300">
       <div class="card-body">
         <div class="form-control">
           <label class="label pb-2" for="name">
             <span class="label-text font-medium">Category Name</span>
           </label>
-          <input 
-            type="text" 
+          <input
+            type="text"
             id="name"
-            name="name" 
+            name="name"
             value={category.name}
-            placeholder="Development" 
-            class="input input-bordered w-full" 
-            required 
+            placeholder="Development"
+            class="input input-bordered w-full"
+            required
           />
         </div>
 
@@ -61,12 +69,12 @@ if (!category) return Astro.redirect('/dashboard/team/settings');
           <label class="label pb-2" for="color">
             <span class="label-text font-medium">Color (optional)</span>
           </label>
-          <input 
-            type="color" 
+          <input
+            type="color"
             id="color"
             name="color"
             value={category.color || '#3b82f6'}
-            class="input input-bordered w-full h-12" 
+            class="input input-bordered w-full h-12"
           />
         </div>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 20a050f..1586d14 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,11 +7,11 @@ if (Astro.locals.user) {
 ---
 
 <Layout title="Chronus - Time Tracking">
-  <div class="hero min-h-screen bg-gradient-to-br from-base-100 via-base-200 to-base-300">
+  <div class="hero min-h-screen bg-linear-to-br from-base-100 via-base-200 to-base-300">
     <div class="hero-content text-center">
       <div class="max-w-4xl">
         <img src="/src/assets/logo.webp" alt="Chronus Logo" class="h-24 w-24 mx-auto mb-6" />
-        <h1 class="text-6xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+        <h1 class="text-6xl md:text-7xl font-bold mb-6 bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent">
           Chronus
         </h1>
         <p class="text-xl md:text-2xl py-6 text-base-content/80 font-light max-w-2xl mx-auto">
@@ -26,28 +26,28 @@ if (Astro.locals.user) {
           </a>
           <a href="/login" class="btn btn-outline btn-lg">Login</a>
         </div>
-        
+
         <!-- Feature highlights -->
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
           <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
             <div class="card-body items-start">
               <div class="text-4xl mb-3">⚡</div>
               <h3 class="card-title text-lg">Lightning Fast</h3>
-              <p class="text-sm text-base-content/70">Track time with a single click. No complexity, just efficiency.</p>
+              <p class="text-sm text-base-content/70">Track tasks with a single click.</p>
             </div>
           </div>
           <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
             <div class="card-body items-start">
               <div class="text-4xl mb-3">📊</div>
-              <h3 class="card-title text-lg">Insightful Reports</h3>
-              <p class="text-sm text-base-content/70">Understand where time goes with beautiful, actionable insights.</p>
+              <h3 class="card-title text-lg">Detailed Reports</h3>
+              <p class="text-sm text-base-content/70">Get actionable insights into your team's tasks.</p>
             </div>
           </div>
           <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
             <div class="card-body items-start">
               <div class="text-4xl mb-3">👥</div>
               <h3 class="card-title text-lg">Team Collaboration</h3>
-              <p class="text-sm text-base-content/70">Built for teams that need to track, manage, and analyze together.</p>
+              <p class="text-sm text-base-content/70">Built for multiple team members.</p>
             </div>
           </div>
         </div>