O_O

src/pages/dashboard/invoices/[id].astro

@@ -263,6 +263,13 @@ const isDraft = invoice.status === 'draft';
 
         <!-- Add Item Form (Only if Draft) -->
         {isDraft && (
+          <div class="flex justify-end mb-4">
+            <button onclick="document.getElementById('import_time_modal').showModal()" class="btn btn-sm btn-outline gap-2">
+              <Icon name="heroicons:clock" class="w-4 h-4" />
+              Import Time
+            </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">
@@ -374,4 +381,39 @@ const isDraft = invoice.status === 'draft';
       <button>close</button>
     </form>
   </dialog>
+
+  <!-- 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>
+      <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>
+
+        <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>
+
+        <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>
+        </div>
+      </form>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
 </DashboardLayout>