Strengthened CRF, added more vue, and removed viewtransitions

src/pages/dashboard/reports.astro

@@ -5,6 +5,8 @@ import StatCard from '../../components/StatCard.astro';
 import TagChart from '../../components/TagChart.vue';
 import ClientChart from '../../components/ClientChart.vue';
 import MemberChart from '../../components/MemberChart.vue';
+import AutoSubmit from '../../components/AutoSubmit.vue';
+import ColorDot from '../../components/ColorDot.vue';
 import { db } from '../../db';
 import { timeEntries, members, users, clients, tags, invoices } from '../../db/schema';
 import { eq, and, gte, lte, sql, desc } from 'drizzle-orm';
@@ -260,78 +262,88 @@ function getTimeRangeLabel(range: string) {
       <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>
-            <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>
+          <AutoSubmit client:load>
+            <select id="reports-range" name="range" class="select w-full">
+              <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>
+              <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>
+          </AutoSubmit>
         </fieldset>
 
         {timeRange === 'custom' && (
           <>
             <fieldset class="fieldset">
               <legend class="fieldset-legend text-xs">From Date</legend>
-              <input
-                type="date"
-                id="reports-from"
-                name="from"
-                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()"
-              />
+              <AutoSubmit client:load>
+                <input
+                  type="date"
+                  id="reports-from"
+                  name="from"
+                  class="input w-full"
+                  value={customFrom || (startDate.getFullYear() + '-' + String(startDate.getMonth() + 1).padStart(2, '0') + '-' + String(startDate.getDate()).padStart(2, '0'))}
+                />
+              </AutoSubmit>
             </fieldset>
             <fieldset class="fieldset">
               <legend class="fieldset-legend text-xs">To Date</legend>
-              <input
-                type="date"
-                id="reports-to"
-                name="to"
-                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()"
-              />
+              <AutoSubmit client:load>
+                <input
+                  type="date"
+                  id="reports-to"
+                  name="to"
+                  class="input w-full"
+                  value={customTo || (endDate.getFullYear() + '-' + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + String(endDate.getDate()).padStart(2, '0'))}
+                />
+              </AutoSubmit>
             </fieldset>
           </>
         )}
 
         <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}>
-                {member.name}
-              </option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select id="reports-member" name="member" class="select w-full">
+              <option value="">All Members</option>
+              {teamMembers.map(member => (
+                <option value={member.id} selected={selectedMemberId === member.id}>
+                  {member.name}
+                </option>
+              ))}
+            </select>
+          </AutoSubmit>
         </fieldset>
 
         <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}>
-                {tag.name}
-              </option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select id="reports-tag" name="tag" class="select w-full">
+              <option value="">All Tags</option>
+              {allTags.map(tag => (
+                <option value={tag.id} selected={selectedTagId === tag.id}>
+                  {tag.name}
+                </option>
+              ))}
+            </select>
+          </AutoSubmit>
         </fieldset>
 
         <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}>
-                {client.name}
-              </option>
-            ))}
-          </select>
+          <AutoSubmit client:load>
+            <select id="reports-client" name="client" class="select w-full">
+              <option value="">All Clients</option>
+              {allClients.map(client => (
+                <option value={client.id} selected={selectedClientId === client.id}>
+                  {client.name}
+                </option>
+              ))}
+            </select>
+          </AutoSubmit>
         </fieldset>
       </form>
     </div>
@@ -620,7 +632,7 @@ function getTimeRangeLabel(range: string) {
                   <td>
                     <div class="flex items-center gap-2">
                       {stat.tag.color && (
-                        <span class="w-3 h-3 rounded-full" style={`background-color: ${stat.tag.color}`}></span>
+                        <ColorDot client:load color={stat.tag.color} class="w-3 h-3 rounded-full" />
                       )}
                       <span>{stat.tag.name}</span>
                     </div>
@@ -736,7 +748,7 @@ function getTimeRangeLabel(range: string) {
                     {e.tag ? (
                       <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>
+                          <ColorDot client:load color={e.tag.color} class="w-2 h-2 rounded-full" />
                         )}
                         <span>{e.tag.name}</span>
                       </div>