Added custom ranges for report filtering + CSV exports

src/pages/dashboard/reports.astro

@@ -52,6 +52,8 @@ const selectedMemberId = url.searchParams.get('member') || '';
 const selectedCategoryId = url.searchParams.get('category') || '';
 const selectedClientId = url.searchParams.get('client') || '';
 const timeRange = url.searchParams.get('range') || 'week';
+const customFrom = url.searchParams.get('from');
+const customTo = url.searchParams.get('to');
 
 const now = new Date();
 let startDate = new Date();
@@ -78,6 +80,16 @@ switch (timeRange) {
     startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1);
     endDate = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
     break;
+  case 'custom':
+    if (customFrom) {
+      const parts = customFrom.split('-');
+      startDate = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 0, 0, 0, 0);
+    }
+    if (customTo) {
+      const parts = customTo.split('-');
+      endDate = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 23, 59, 59, 999);
+    }
+    break;
 }
 
 const conditions = [
@@ -250,6 +262,7 @@ function getTimeRangeLabel(range: string) {
     case 'mtd': return 'Month to Date';
     case 'ytd': return 'Year to Date';
     case 'last-month': return 'Last Month';
+    case 'custom': return 'Custom Range';
     default: return 'Last 7 Days';
   }
 }
@@ -273,9 +286,39 @@ function getTimeRangeLabel(range: string) {
             <option value="mtd" selected={timeRange === 'mtd'}>Month to Date</option>
             <option value="ytd" selected={timeRange === 'ytd'}>Year to Date</option>
             <option value="last-month" selected={timeRange === 'last-month'}>Last Month</option>
+            <option value="custom" selected={timeRange === 'custom'}>Custom Range</option>
           </select>
         </div>
 
+        {timeRange === 'custom' && (
+          <>
+            <div class="form-control">
+              <label class="label">
+                <span class="label-text font-medium">From Date</span>
+              </label>
+              <input
+                type="date"
+                name="from"
+                class="input input-bordered 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">
+                <span class="label-text font-medium">To Date</span>
+              </label>
+              <input
+                type="date"
+                name="to"
+                class="input input-bordered w-full"
+                value={customTo || (endDate.getFullYear() + '-' + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + String(endDate.getDate()).padStart(2, '0'))}
+                onchange="this.form.submit()"
+              />
+            </div>
+          </>
+        )}
+
         <div class="form-control">
           <label class="label">
             <span class="label-text font-medium">Team Member</span>
@@ -328,7 +371,7 @@ function getTimeRangeLabel(range: string) {
             width: 100%;
           }
         }
-        select {
+        select, input {
           width: 100%;
         }
       </style>
@@ -709,10 +752,18 @@ function getTimeRangeLabel(range: string) {
   {/* Detailed Entries */}
   <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" />
-        Detailed Entries ({entries.length})
-      </h2>
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="card-title">
+          <Icon name="heroicons:document-text" class="w-6 h-6" />
+          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" />
+            Export CSV
+          </a>
+        )}
+      </div>
       {entries.length > 0 ? (
         <div class="overflow-x-auto">
           <table class="table table-zebra">