Adding manual entries + UI cleanup

src/components/Avatar.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  name: string;
+  class?: string;
+}
+
+const { name, class: className } = Astro.props;
+const initial = name ? name.charAt(0).toUpperCase() : '?';
+---
+
+<div class:list={["avatar placeholder", className]}>
+  <div class="bg-primary text-primary-content w-10 rounded-full flex items-center justify-center">
+    <span class="text-lg font-semibold">{initial}</span>
+  </div>
+</div>

src/components/ManualEntry.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{
+  clients: { id: string; name: string }[];
+  categories: { id: string; name: string; color: string | null }[];
+  tags: { id: string; name: string; color: string | null }[];
+}>();
+
+const emit = defineEmits<{
+  (e: "entryCreated"): void;
+}>();
+
+const description = ref("");
+const selectedClientId = ref("");
+const selectedCategoryId = ref("");
+const selectedTags = ref<string[]>([]);
+const startDate = ref("");
+const startTime = ref("");
+const endDate = ref("");
+const endTime = ref("");
+const isSubmitting = ref(false);
+const error = ref("");
+const success = ref(false);
+
+// Set default dates to today
+const today = new Date().toISOString().split("T")[0];
+startDate.value = today;
+endDate.value = today;
+
+function toggleTag(tagId: string) {
+  const index = selectedTags.value.indexOf(tagId);
+  if (index > -1) {
+    selectedTags.value.splice(index, 1);
+  } else {
+    selectedTags.value.push(tagId);
+  }
+}
+
+function formatDuration(start: Date, end: Date): string {
+  const ms = end.getTime() - start.getTime();
+  const totalMinutes = Math.round(ms / 1000 / 60);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+
+  if (hours > 0) {
+    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+  }
+  return `${minutes}m`;
+}
+
+function validateForm(): string | null {
+  if (!selectedClientId.value) {
+    return "Please select a client";
+  }
+
+  if (!selectedCategoryId.value) {
+    return "Please select a category";
+  }
+
+  if (!startDate.value || !startTime.value) {
+    return "Please enter start date and time";
+  }
+
+  if (!endDate.value || !endTime.value) {
+    return "Please enter end date and time";
+  }
+
+  const start = new Date(`${startDate.value}T${startTime.value}`);
+  const end = new Date(`${endDate.value}T${endTime.value}`);
+
+  if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+    return "Invalid date or time format";
+  }
+
+  if (end <= start) {
+    return "End time must be after start time";
+  }
+
+  return null;
+}
+
+async function submitManualEntry() {
+  error.value = "";
+  success.value = false;
+
+  const validationError = validateForm();
+  if (validationError) {
+    error.value = validationError;
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  try {
+    const startDateTime = `${startDate.value}T${startTime.value}`;
+    const endDateTime = `${endDate.value}T${endTime.value}`;
+
+    const res = await fetch("/api/time-entries/manual", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        description: description.value,
+        clientId: selectedClientId.value,
+        categoryId: selectedCategoryId.value,
+        startTime: startDateTime,
+        endTime: endDateTime,
+        tags: selectedTags.value,
+      }),
+    });
+
+    const data = await res.json();
+
+    if (res.ok) {
+      success.value = true;
+
+      // Calculate duration for success message
+      const start = new Date(startDateTime);
+      const end = new Date(endDateTime);
+      const duration = formatDuration(start, end);
+
+      // Reset form
+      description.value = "";
+      selectedClientId.value = "";
+      selectedCategoryId.value = "";
+      selectedTags.value = [];
+      startDate.value = today;
+      endDate.value = today;
+      startTime.value = "";
+      endTime.value = "";
+
+      // Emit event and reload after a short delay
+      setTimeout(() => {
+        emit("entryCreated");
+        window.location.reload();
+      }, 1500);
+    } else {
+      error.value = data.error || "Failed to create time entry";
+    }
+  } catch (err) {
+    error.value = "An error occurred. Please try again.";
+    console.error("Error creating manual entry:", err);
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+function clearForm() {
+  description.value = "";
+  selectedClientId.value = "";
+  selectedCategoryId.value = "";
+  selectedTags.value = [];
+  startDate.value = today;
+  endDate.value = today;
+  startTime.value = "";
+  endTime.value = "";
+  error.value = "";
+  success.value = false;
+}
+</script>
+
+<template>
+  <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"
+  >
+    <div class="card-body gap-6">
+      <div class="flex justify-between items-center">
+        <h3 class="text-xl font-semibold">Add Manual Entry</h3>
+        <button
+          type="button"
+          @click="clearForm"
+          class="btn btn-ghost btn-sm"
+          :disabled="isSubmitting"
+        >
+          Clear
+        </button>
+      </div>
+
+      <!-- Success Message -->
+      <div v-if="success" class="alert alert-success">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="stroke-current shrink-0 h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span>Manual time entry created successfully!</span>
+      </div>
+
+      <!-- Error Message -->
+      <div v-if="error" class="alert alert-error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="stroke-current shrink-0 h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span>{{ error }}</span>
+      </div>
+
+      <!-- Client and Category Row -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="form-control">
+          <label class="label pb-2">
+            <span class="label-text font-medium">Client</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <select
+            v-model="selectedClientId"
+            class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            :disabled="isSubmitting"
+          >
+            <option value="">Select a client...</option>
+            <option
+              v-for="client in clients"
+              :key="client.id"
+              :value="client.id"
+            >
+              {{ client.name }}
+            </option>
+          </select>
+        </div>
+
+        <div class="form-control">
+          <label class="label pb-2">
+            <span class="label-text font-medium">Category</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <select
+            v-model="selectedCategoryId"
+            class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            :disabled="isSubmitting"
+          >
+            <option value="">Select a category...</option>
+            <option
+              v-for="category in categories"
+              :key="category.id"
+              :value="category.id"
+            >
+              {{ category.name }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <!-- Start Date and Time -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="form-control">
+          <label class="label pb-2">
+            <span class="label-text font-medium">Start Date</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <input
+            v-model="startDate"
+            type="date"
+            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            :disabled="isSubmitting"
+          />
+        </div>
+
+        <div class="form-control">
+          <label class="label pb-2">
+            <span class="label-text font-medium">Start Time</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <input
+            v-model="startTime"
+            type="time"
+            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            :disabled="isSubmitting"
+          />
+        </div>
+      </div>
+
+      <!-- End Date and Time -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="form-control">
+          <label class="label pb-2">
+            <span class="label-text font-medium">End Date</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <input
+            v-model="endDate"
+            type="date"
+            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            :disabled="isSubmitting"
+          />
+        </div>
+
+        <div class="form-control">
+          <label class="label pb-2">
+            <span class="label-text font-medium">End Time</span>
+            <span class="label-text-alt text-error">*</span>
+          </label>
+          <input
+            v-model="endTime"
+            type="time"
+            class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+            :disabled="isSubmitting"
+          />
+        </div>
+      </div>
+
+      <!-- Description Row -->
+      <div class="form-control">
+        <label class="label pb-2">
+          <span class="label-text font-medium">Description</span>
+        </label>
+        <input
+          v-model="description"
+          type="text"
+          placeholder="What did you work on?"
+          class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
+          :disabled="isSubmitting"
+        />
+      </div>
+
+      <!-- Tags Section -->
+      <div v-if="tags.length > 0" class="form-control">
+        <label class="label pb-2">
+          <span class="label-text font-medium">Tags</span>
+        </label>
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="tag in tags"
+            :key="tag.id"
+            @click="toggleTag(tag.id)"
+            :class="[
+              'badge badge-lg cursor-pointer transition-all hover:scale-105',
+              selectedTags.includes(tag.id)
+                ? 'badge-primary shadow-lg shadow-primary/20'
+                : 'badge-outline hover:bg-base-300/50',
+            ]"
+            :disabled="isSubmitting"
+            type="button"
+          >
+            {{ tag.name }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="flex gap-4 pt-4">
+        <button
+          @click="submitManualEntry"
+          class="btn btn-primary flex-1 shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all"
+          :disabled="isSubmitting"
+        >
+          <span v-if="isSubmitting" class="loading loading-spinner"></span>
+          {{ isSubmitting ? "Creating..." : "Add Manual Entry" }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

src/components/Timer.vue

@@ -127,7 +127,9 @@ async function stopTimer() {
 </script>
 
 <template>
-  <div class="card bg-base-200 shadow-xl border border-base-300 mb-6">
+  <div
+    class="card bg-base-200/50 backdrop-blur-sm shadow-lg border border-base-300/50 mb-6 hover:border-base-300 transition-all duration-200"
+  >
     <div class="card-body gap-6">
       <!-- Client and Description Row -->
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -137,7 +139,7 @@ async function stopTimer() {
           </label>
           <select
             v-model="selectedClientId"
-            class="select select-bordered w-full"
+            class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
             :disabled="isRunning"
           >
             <option value="">Select a client...</option>
@@ -157,7 +159,7 @@ async function stopTimer() {
           </label>
           <select
             v-model="selectedCategoryId"
-            class="select select-bordered w-full"
+            class="select select-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
             :disabled="isRunning"
           >
             <option value="">Select a category...</option>
@@ -181,7 +183,7 @@ async function stopTimer() {
           v-model="description"
           type="text"
           placeholder="What are you working on?"
-          class="input input-bordered w-full"
+          class="input input-bordered w-full bg-base-300/50 hover:bg-base-300 focus:bg-base-300 border-base-300/50 focus:border-primary transition-colors"
           :disabled="isRunning"
         />
       </div>
@@ -197,8 +199,10 @@ async function stopTimer() {
             :key="tag.id"
             @click="toggleTag(tag.id)"
             :class="[
-              'badge badge-lg cursor-pointer transition-all',
-              selectedTags.includes(tag.id) ? 'badge-primary' : 'badge-outline',
+              'badge badge-lg cursor-pointer transition-all hover:scale-105',
+              selectedTags.includes(tag.id)
+                ? 'badge-primary shadow-lg shadow-primary/20'
+                : 'badge-outline hover:bg-base-300/50',
             ]"
             :disabled="isRunning"
             type="button"
@@ -211,18 +215,22 @@ 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 grow"
+          class="font-mono text-5xl font-bold tabular-nums tracking-tight text-center sm:text-left grow text-primary"
         >
           {{ formatTime(elapsedTime) }}
         </div>
         <button
           v-if="!isRunning"
           @click="startTimer"
-          class="btn btn-primary btn-lg min-w-40"
+          class="btn btn-primary btn-lg min-w-40 shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all"
         >
           ▶️ 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 shadow-lg shadow-error/20 hover:shadow-xl hover:shadow-error/30 transition-all"
+        >
           ⏹️ Stop Timer
         </button>
       </div>