add Sort Function

src/routes/backoffice/timesheets/+page.svelte

@@ -332,9 +332,10 @@
                 '*',
                 { count: "exact" },
             )
-            .order(sortColumn || "created_at", {
-                ascending: sortOrder === "asc",
-            }).range(fromIndex, toIndex);   
+            .order(getDBColumn(sortColumn) || "created_at", {
+            ascending: sortOrder === "asc"
+            })
+            .range(fromIndex, toIndex);   
         
         if (typeof searchTerm === "string" && searchTerm.length > 4) {
             // Supabase ilike only supports one column at a time, so use or for multiple columns
@@ -422,7 +423,13 @@
 
         return range;
     }
-
+    function getDBColumn(key: string) {
+        switch (key) {
+            case "name": return "work_description";
+            case "staff_id": return "entered_by";
+            default: return key;
+    }
+    }
     function changePage(page: number) {
         if (page < 1 || page > totalPages || page === currentPage) return;
         currentPage = page;
@@ -673,7 +680,7 @@
             </button>
         </div>
     </div>
-    <div class="overflow-x-auto rounded-lg shadow mb-4">
+    <div class="overflow-x-auto rounded-lg shadow mb-4 max-h-[70vh]">
         <table class="min-w-[1000px] divide-y divide-gray-200 text-sm w-max">
             <thead class="bg-gray-100">
                 <tr>
@@ -682,8 +689,13 @@
                             <th
                                 class="sticky left-0 px-4 py-3 text-left font-semibold text-gray-700 uppercase tracking-wider whitespace-nowrap"
                                 style="background-color: #f0f8ff; z-index: 10;"
+                                on:click={() => toggleSort(col.key)}
+                                
                             >
                                 {col.title}
+                                {#if sortColumn === col.key}
+                                    {sortOrder === 'asc' ? ' 🔼' : ' 🔽'}
+                                {/if}
                             </th>
                         {:else}
                             <th
@@ -693,7 +705,7 @@
                                 {col.title}
                                     {#if sortColumn === col.key}
                                     {sortOrder === 'asc' ? ' 🔼' : ' 🔽'}
-                                {/if}
+                                    {/if}
                             </th>
                         {/if}
                     {/each}