fix empty-value sorting edge cases and simplify sort components

e2e/clients.spec.ts

@@ -8,7 +8,7 @@ import {
     createProjectViaApi,
     createPublicProjectViaApi,
 } from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 async function goToClientsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/clients');
@@ -210,18 +210,12 @@ test('test that client context menu delete deletes the client', async ({ page, c
 // Sorting Tests
 // =============================================
 
-async function clearClientTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('client-table-state');
-    });
-}
-
 test('test that sorting clients by name and status works', async ({ page, ctx }) => {
     await createClientViaApi(ctx, { name: 'AAA SortClient' });
     await createClientViaApi(ctx, { name: 'ZZZ SortClient' });
 
     await goToClientsOverview(page);
-    await clearClientTableState(page);
+    await clearTableState(page, 'client-table-state');
     await page.reload();
 
     const table = page.getByTestId('client_table');
@@ -253,7 +247,7 @@ test('test that sorting clients by project count works', async ({ page, ctx }) =
     await createProjectViaApi(ctx, { name: 'Proj2', client_id: clientWithMany.id });
 
     await goToClientsOverview(page);
-    await clearClientTableState(page);
+    await clearTableState(page, 'client-table-state');
     await page.reload();
 
     const table = page.getByTestId('client_table');
@@ -274,7 +268,7 @@ test('test that sorting clients by project count works', async ({ page, ctx }) =
 
 test('test that client sort state persists after page reload', async ({ page }) => {
     await goToClientsOverview(page);
-    await clearClientTableState(page);
+    await clearTableState(page, 'client-table-state');
     await page.reload();
 
     const table = page.getByTestId('client_table');
@@ -397,7 +391,7 @@ test.describe('Clients Pagination', () => {
         );
 
         await goToClientsOverview(page);
-        await clearClientTableState(page);
+        await clearTableState(page, 'client-table-state');
         await page.reload();
 
         // Default sort is name asc; first 15 clients (00–14) on page 1.
@@ -450,7 +444,7 @@ test.describe('Clients Pagination', () => {
         );
 
         await goToClientsOverview(page);
-        await clearClientTableState(page);
+        await clearTableState(page, 'client-table-state');
         await page.reload();
 
         await expect(page.getByTestId('client_table')).toBeVisible();
@@ -470,7 +464,7 @@ test.describe('Clients Pagination', () => {
         );
 
         await goToClientsOverview(page);
-        await clearClientTableState(page);
+        await clearTableState(page, 'client-table-state');
         await page.reload();
 
         await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });

e2e/members.spec.ts

@@ -11,7 +11,7 @@ import {
     updateMemberBillableRateViaApi,
     updateOrganizationSettingViaApi,
 } from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 // Tests that invite + accept members need more time
 test.describe.configure({ timeout: 45000 });
@@ -779,20 +779,18 @@ test('test that accepted invitation disappears from invitations tab', async ({ p
 // Sorting Tests
 // =============================================
 
-// Helper to clear localStorage before tests that check sorting
-async function clearMemberTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('member-table-state');
-    });
-}
-
 test('test that sorting members by name, role, and status works', async ({ page, ctx }) => {
-    // Create two placeholder members with names that sort predictably around "John Doe"
+    // Create two placeholder members with names that sort predictably around "John Doe".
+    // Seeded alphabetically a second apart: created_at only has second precision and
+    // same-second rows fall back to a random UUID order. The spacing is what makes the
+    // API order (created_at desc: ZZZ, AAA, John) deterministic, so the tie-break
+    // assertions below are testing the tie-break rather than a coin flip.
     await createPlaceholderMemberViaImportApi(ctx, 'AAA SortFirst');
+    await page.waitForTimeout(1100);
     await createPlaceholderMemberViaImportApi(ctx, 'ZZZ SortLast');
 
     await goToMembersPage(page);
-    await clearMemberTableState(page);
+    await clearTableState(page, 'member-table-state');
     await page.reload();
 
     const table = page.getByTestId('member_table');
@@ -814,20 +812,24 @@ test('test that sorting members by name, role, and status works', async ({ page,
     const ownerIdx = names.indexOf('John Doe');
     const placeholderIdx = names.indexOf('AAA SortFirst');
     expect(ownerIdx).toBeLessThan(placeholderIdx);
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     await roleHeader.click(); // desc: Placeholder first
     names = await getTableRowNames(table);
     expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     // -- Status sorting --
     const statusHeader = table.getByText('Status').first();
     await statusHeader.click(); // asc: Active(0) < Inactive(1)
     names = await getTableRowNames(table);
     expect(names.indexOf('John Doe')).toBeLessThan(names.indexOf('AAA SortFirst'));
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     await statusHeader.click(); // desc: Inactive first
     names = await getTableRowNames(table);
     expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('John Doe'));
+    expect(names.indexOf('AAA SortFirst')).toBeLessThan(names.indexOf('ZZZ SortLast'));
 
     // -- Email: just verify sort indicator appears --
     const emailHeader = table.getByText('Email').first();
@@ -837,7 +839,7 @@ test('test that sorting members by name, role, and status works', async ({ page,
 
 test('test that member sort state persists after page reload', async ({ page }) => {
     await goToMembersPage(page);
-    await clearMemberTableState(page);
+    await clearTableState(page, 'member-table-state');
     await page.reload();
 
     const table = page.getByTestId('member_table');
@@ -875,7 +877,7 @@ test('test that sorting members by billable rate works', async ({ page, ctx }) =
     await updateMemberBillableRateViaApi(ctx, lowRateMember!.id, 5000);
 
     await goToMembersPage(page);
-    await clearMemberTableState(page);
+    await clearTableState(page, 'member-table-state');
     await page.reload();
 
     const table = page.getByTestId('member_table');

e2e/projects.spec.ts

@@ -13,18 +13,12 @@ import {
     archiveProjectViaApi,
     updateOrganizationSettingViaApi,
 } from './utils/api';
+import { clearTableState, getSeededRowOrder } from './utils/table';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
 }
 
-// Helper to clear localStorage before tests that check persistence
-async function clearProjectTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('project-table-state');
-    });
-}
-
 // Create new project via modal
 test('test that creating and deleting a new project via the modal works', async ({ page }) => {
     const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
@@ -84,7 +78,7 @@ test('test that archiving and unarchiving projects works', async ({ page, ctx })
     await createProjectViaApi(ctx, { name: newProjectName });
 
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
     await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });
 
@@ -480,7 +474,7 @@ test('test that sorting projects by all columns works', async ({ page, ctx }) =>
     });
 
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
     await expect(page.getByTestId('project_table')).toBeVisible();
     await expect(page.getByText('AAA Project')).toBeVisible();
@@ -609,7 +603,7 @@ test('test that filtering projects by status works', async ({ page, ctx }) => {
     await createProjectViaApi(ctx, { name: newProjectName });
 
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
     await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });
 
@@ -640,7 +634,7 @@ test('test that filtering projects by status works', async ({ page, ctx }) => {
 
 test('test that filter state persists after page reload', async ({ page }) => {
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
 
     // Apply Active status filter
@@ -656,9 +650,96 @@ test('test that filter state persists after page reload', async ({ page }) => {
     await expect(page.getByTestId('status-filter-badge')).toBeVisible();
 });
 
+test('test that projects without a client or estimate are ordered by name at the bottom', async ({
+    page,
+    ctx,
+}) => {
+    // Seeded a second apart: created_at only has second precision and same-second rows
+    // fall back to a random UUID order. The spacing makes the API order of the clientless
+    // rows (created_at desc: ZZZ, AAA) deterministic and different from the alphabetical
+    // order the name tie-break should produce.
+    await createProjectViaApi(ctx, { name: 'AAA Tiebreak Project' });
+    await page.waitForTimeout(1100);
+    await createProjectViaApi(ctx, { name: 'ZZZ Tiebreak Project' });
+
+    const clientAardvark = await createClientViaApi(ctx, { name: 'Aardvark Co' });
+    const clientZulu = await createClientViaApi(ctx, { name: 'Zulu Co' });
+    const projectM = await createProjectViaApi(ctx, {
+        name: 'MMM Tiebreak Project',
+        client_id: clientAardvark.id,
+        estimated_time: 36000, // 10h, 1h tracked below = 10%
+    });
+    await createTimeEntryViaApi(ctx, { duration: '1h', projectId: projectM.id });
+    const projectN = await createProjectViaApi(ctx, {
+        name: 'NNN Tiebreak Project',
+        client_id: clientZulu.id,
+        estimated_time: 14400, // 4h, 2h tracked below = 50%
+    });
+    await createTimeEntryViaApi(ctx, { duration: '2h', projectId: projectN.id });
+
+    await goToProjectsOverview(page);
+    await clearTableState(page, 'project-table-state');
+    await page.reload();
+
+    const table = page.getByTestId('project_table');
+    await expect(table).toBeVisible();
+
+    const seeded = [
+        'AAA Tiebreak Project',
+        'MMM Tiebreak Project',
+        'NNN Tiebreak Project',
+        'ZZZ Tiebreak Project',
+    ];
+    const getOrder = () => getSeededRowOrder(table, seeded);
+
+    // -- Client: empty rows last in both directions, alphabetical among themselves --
+    const clientHeader = table.locator('.select-none', { hasText: 'Client' }).first();
+    await clientHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'MMM Tiebreak Project',
+            'NNN Tiebreak Project',
+            'AAA Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+
+    await clientHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'NNN Tiebreak Project',
+            'MMM Tiebreak Project',
+            'AAA Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+
+    // -- Progress: same, and the first click sorts highest first --
+    const progressHeader = table.locator('.select-none', { hasText: 'Progress' }).first();
+    await progressHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'NNN Tiebreak Project',
+            'MMM Tiebreak Project',
+            'AAA Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+
+    await progressHeader.click();
+    await expect
+        .poll(getOrder)
+        .toEqual([
+            'MMM Tiebreak Project',
+            'NNN Tiebreak Project',
+            'AAA Tiebreak Project',
+            'ZZZ Tiebreak Project',
+        ]);
+});
+
 test('test that sort state persists after page reload', async ({ page }) => {
     await goToProjectsOverview(page);
-    await clearProjectTableState(page);
+    await clearTableState(page, 'project-table-state');
     await page.reload();
 
     // Click on Name header twice to sort descending
@@ -1114,7 +1195,7 @@ test.describe('Projects Pagination', () => {
         );
 
         await goToProjectsOverview(page);
-        await clearProjectTableState(page);
+        await clearTableState(page, 'project-table-state');
         await page.reload();
 
         // Default sort is name asc; first 15 projects (00–14) should be on page 1.
@@ -1168,7 +1249,7 @@ test.describe('Projects Pagination', () => {
         );
 
         await goToProjectsOverview(page);
-        await clearProjectTableState(page);
+        await clearTableState(page, 'project-table-state');
         await page.reload();
 
         await expect(page.getByTestId('project_table')).toBeVisible();
@@ -1185,7 +1266,7 @@ test.describe('Projects Pagination', () => {
         );
 
         await goToProjectsOverview(page);
-        await clearProjectTableState(page);
+        await clearTableState(page, 'project-table-state');
         await page.reload();
 
         await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });

e2e/tags.spec.ts

@@ -3,7 +3,7 @@ import type { Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
 import { createTagViaApi } from './utils/api';
-import { getTableRowNames } from './utils/table';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 async function goToTagsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/tags');
@@ -147,18 +147,12 @@ test('test that tag context menu delete deletes the tag', async ({ page, ctx })
 // Sorting Tests
 // =============================================
 
-async function clearTagTableState(page: Page) {
-    await page.evaluate(() => {
-        localStorage.removeItem('tag-table-state');
-    });
-}
-
 test('test that sorting tags by name works', async ({ page, ctx }) => {
     await createTagViaApi(ctx, { name: 'AAA SortTag' });
     await createTagViaApi(ctx, { name: 'ZZZ SortTag' });
 
     await goToTagsOverview(page);
-    await clearTagTableState(page);
+    await clearTableState(page, 'tag-table-state');
     await page.reload();
 
     const table = page.getByTestId('tag_table');
@@ -176,7 +170,7 @@ test('test that sorting tags by name works', async ({ page, ctx }) => {
 
 test('test that tag sort state persists after page reload', async ({ page }) => {
     await goToTagsOverview(page);
-    await clearTagTableState(page);
+    await clearTableState(page, 'tag-table-state');
     await page.reload();
 
     const table = page.getByTestId('tag_table');

e2e/tasks.spec.ts

@@ -7,13 +7,56 @@ import {
     createPublicProjectViaApi,
     createTaskViaApi,
     createClientViaApi,
+    createTimeEntryViaApi,
     updateOrganizationSettingViaApi,
+    type TestContext,
 } from './utils/api';
+import { clearTableState, getTableRowNames } from './utils/table';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
 }
 
+async function createSortableTasks(ctx: TestContext) {
+    const project = await createProjectViaApi(ctx, { name: 'Task Sorting Project' });
+    const taskA = await createTaskViaApi(ctx, {
+        name: 'AAA Sorting Task',
+        project_id: project.id,
+        estimated_time: 36000,
+    });
+    const taskB = await createTaskViaApi(ctx, {
+        name: 'BBB Sorting Task',
+        project_id: project.id,
+        estimated_time: 14400,
+    });
+    const taskC = await createTaskViaApi(ctx, {
+        name: 'CCC Sorting Task',
+        project_id: project.id,
+    });
+
+    expect(taskA.estimated_time).toBe(36000);
+    expect(taskB.estimated_time).toBe(14400);
+    expect(taskC.estimated_time).toBeNull();
+
+    await createTimeEntryViaApi(ctx, {
+        duration: '1h',
+        projectId: project.id,
+        taskId: taskA.id,
+    });
+    await createTimeEntryViaApi(ctx, {
+        duration: '2h',
+        projectId: project.id,
+        taskId: taskB.id,
+    });
+    await createTimeEntryViaApi(ctx, {
+        duration: '3h',
+        projectId: project.id,
+        taskId: taskC.id,
+    });
+
+    return { project, taskA, taskB, taskC };
+}
+
 test('test that creating and deleting a new task in a new project works', async ({ page }) => {
     const newProjectName = 'New Project ' + Math.floor(1 + Math.random() * 10000);
     await goToProjectsOverview(page);
@@ -301,6 +344,59 @@ test('test that creating a new project from the task create modal project dropdo
     await expect(page.getByTestId('task_table')).toContainText(newTaskName);
 });
 
+// =============================================
+// Sorting Tests
+// =============================================
+
+test('test that sorting tasks by name, total time and progress works', async ({ page, ctx }) => {
+    const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
+    await goToProjectsOverview(page);
+    await clearTableState(page, 'task-table-state');
+    await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
+    const table = page.getByTestId('task_table');
+    await expect(table).toBeVisible();
+
+    // This project contains only the seeded tasks, so assert the complete order.
+    const expectOrder = async (expected: string[]) => {
+        await expect.poll(() => getTableRowNames(table)).toEqual(expected);
+    };
+    const clickHeader = async (headerText: string) => {
+        await table.getByText(headerText).first().click();
+    };
+
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+    await clickHeader('Task Name');
+    await expectOrder([taskC.name, taskB.name, taskA.name]);
+    await clickHeader('Task Name');
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+
+    await clickHeader('Total Time');
+    await expectOrder([taskC.name, taskB.name, taskA.name]);
+    await clickHeader('Total Time');
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+
+    await clickHeader('Progress');
+    await expectOrder([taskB.name, taskA.name, taskC.name]);
+    await clickHeader('Progress');
+    await expectOrder([taskA.name, taskB.name, taskC.name]);
+});
+
+test('test that task sort state persists after page reload', async ({ page, ctx }) => {
+    const { project, taskA, taskB, taskC } = await createSortableTasks(ctx);
+    await goToProjectsOverview(page);
+    await clearTableState(page, 'task-table-state');
+    await page.goto(PLAYWRIGHT_BASE_URL + '/projects/' + project.id);
+    const table = page.getByTestId('task_table');
+    await expect(table).toBeVisible();
+
+    await table.getByText('Progress').first().click();
+    await expect.poll(() => getTableRowNames(table)).toEqual([taskB.name, taskA.name, taskC.name]);
+    await page.reload();
+
+    // Verify the persisted row order, not just the sort indicator.
+    await expect.poll(() => getTableRowNames(table)).toEqual([taskB.name, taskA.name, taskC.name]);
+});
+
 // =============================================
 // Employee Permission Tests
 // =============================================

e2e/utils/api.ts

@@ -357,7 +357,7 @@ export async function createProjectWithClientViaApi(
 
 export async function createTaskViaApi(
     ctx: TestContext,
-    data: { name: string; project_id: string }
+    data: { name: string; project_id: string; estimated_time?: number }
 ) {
     const response = await ctx.request.post(
         `${PLAYWRIGHT_BASE_URL}/api/v1/organizations/${ctx.orgId}/tasks`,
@@ -365,12 +365,20 @@ export async function createTaskViaApi(
             data: {
                 name: data.name,
                 project_id: data.project_id,
+                ...(data.estimated_time !== undefined
+                    ? { estimated_time: data.estimated_time }
+                    : {}),
             },
         }
     );
     expect(response.status()).toBe(201);
     const body = await response.json();
-    return body.data as { id: string; name: string; project_id: string };
+    return body.data as {
+        id: string;
+        name: string;
+        project_id: string;
+        estimated_time: number | null;
+    };
 }
 
 export async function markTaskDoneViaApi(ctx: TestContext, task: { id: string; name: string }) {

e2e/utils/table.ts

@@ -1,4 +1,4 @@
-import type { Locator } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 
 /**
  * Extract the first cell's text content from each row in a table.
@@ -14,3 +14,22 @@ export async function getTableRowNames(table: Locator): Promise<string[]> {
     }
     return names;
 }
+
+/**
+ * The visual order of the given seeded names within the table, ignoring any other rows.
+ */
+export async function getSeededRowOrder(table: Locator, seeded: string[]): Promise<string[]> {
+    const rowNames = await getTableRowNames(table);
+    return rowNames
+        .map((rowName) => seeded.find((name) => rowName.includes(name)))
+        .filter((name): name is string => Boolean(name));
+}
+
+/**
+ * Drop a table's persisted sort/filter state so a test starts from the defaults.
+ */
+export async function clearTableState(page: Page, key: string) {
+    await page.evaluate((storageKey) => {
+        localStorage.removeItem(storageKey);
+    }, key);
+}

extensions/manifest.json

@@ -1,11 +1,11 @@
 {
     "Billing": {
         "repository": "solidtime-io/extension-billing",
-        "ref": "v0.0.4"
+        "ref": "v0.0.5"
     },
     "Services": {
         "repository": "solidtime-io/extension-services",
-        "ref": "v0.0.1"
+        "ref": "v0.0.2"
     },
     "Invoicing": {
         "repository": "solidtime-io/extension-invoicing",

resources/js/Components/Common/Client/ClientTable.vue

@@ -11,14 +11,13 @@ import Pagination from '@/Components/Common/Pagination.vue';
 import { canCreateClients } from '@/utils/permissions';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 export type SortColumn = 'name' | 'projects_count' | 'status';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     clients: Client[];
@@ -44,17 +43,7 @@ const projectCountMap = computed(() => {
     return map;
 });
 
-// Name is always the secondary sort so rows with equal values render
+const columns = computed<SortableColumnDef<Client, SortColumn>[]>(() => [
-// alphabetically instead of in API (created_at) order.
-const sorting = computed<SortingState>(() => [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-    ...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
-]);
-
-const columns = computed(() => [
     {
         id: 'name',
         accessorFn: (row: Client) => row.name.toLowerCase(),
@@ -70,40 +59,21 @@ const columns = computed(() => [
     },
 ]);
 
-const descFirstColumns = new Set<SortColumn>(
+const {
-    columns.value
+    sortedRows: sortedClients,
-        .filter((c) => 'sortDescFirst' in c && c.sortDescFirst)
+    descFirstColumns,
-        .map((c) => c.id as SortColumn)
+    nextDirection,
-);
+} = useSortableTable({
+    data: () => props.clients,
+    columns: () => columns.value,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+    tieBreakColumn: 'name',
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
 }
-}
-
-const table = useVueTable({
-    get data() {
-        return props.clients;
-    },
-    get columns() {
-        return columns.value;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedClients = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 
 // Client-side pagination: the full list is in memory, only one page is mounted at a time.
 const PAGE_SIZE = 15;

resources/js/Components/Common/Client/ClientTableHeading.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
 
 const props = defineProps<{
@@ -9,57 +9,29 @@ const props = defineProps<{
     descFirstColumns: ReadonlySet<SortColumn>;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     sort: [column: SortColumn];
 }>();
-
-function handleSort(column: SortColumn) {
-    emit('sort', column);
-}
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="props"
+            @sort="$emit('sort', $event)">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+        <SortableTableHeaderCell
-            <span v-else class="w-4 h-4"></span>
+            column="projects_count"
-        </div>
+            v-bind="props"
-        <div
+            @sort="$emit('sort', $event)">
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('projects_count')">
             Projects
-            <ChevronDownIcon v-if="isChevronDown('projects_count')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('projects_count')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
             Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Member/MemberTable.vue

@@ -3,16 +3,14 @@ import MemberTableHeading from '@/Components/Common/Member/MemberTableHeading.vu
 import MemberTableRow from '@/Components/Common/Member/MemberTableRow.vue';
 import { useMembersQuery } from '@/utils/useMembersQuery';
 import type { Member } from '@/packages/api/src';
-import { computed } from 'vue';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 export type SortColumn = 'name' | 'email' | 'role' | 'billable_rate' | 'status';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     sortColumn: SortColumn;
@@ -33,14 +31,7 @@ const roleOrder: Record<string, number> = {
     placeholder: 4,
 };
 
-const sorting = computed<SortingState>(() => [
+const columns: SortableColumnDef<Member, SortColumn>[] = [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-]);
-
-const columns = [
     {
         id: 'name',
         accessorFn: (row: Member) => row.name.toLowerCase(),
@@ -56,7 +47,6 @@ const columns = [
     {
         id: 'billable_rate',
         sortDescFirst: true,
-        sortUndefined: 'last' as const,
         accessorFn: (row: Member) => {
             if (row.billable_rate === null) return undefined;
             return row.billable_rate;
@@ -68,36 +58,21 @@ const columns = [
     },
 ];
 
-const descFirstColumns = new Set<SortColumn>(
+const {
-    columns.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
+    sortedRows: sortedMembers,
-);
+    descFirstColumns,
+    nextDirection,
+} = useSortableTable({
+    data: () => members.value,
+    columns: () => columns,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+    tieBreakColumn: 'name',
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
 }
-}
-
-const table = useVueTable({
-    get data() {
-        return members.value;
-    },
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedMembers = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 </script>
 
 <template>

resources/js/Components/Common/Member/MemberTableHeading.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
 
 const props = defineProps<{
@@ -9,73 +9,35 @@ const props = defineProps<{
     descFirstColumns: ReadonlySet<SortColumn>;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     sort: [column: SortColumn];
 }>();
-
-function handleSort(column: SortColumn) {
-    emit('sort', column);
-}
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="props"
+            @sort="$emit('sort', $event)">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="email" v-bind="props" @sort="$emit('sort', $event)">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('email')">
             Email
-            <ChevronDownIcon v-if="isChevronDown('email')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('email')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="role" v-bind="props" @sort="$emit('sort', $event)">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('role')">
             Role
-            <ChevronDownIcon v-if="isChevronDown('role')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('role')" class="w-4 h-4" />
+        <SortableTableHeaderCell
-            <span v-else class="w-4 h-4"></span>
+            column="billable_rate"
-        </div>
+            v-bind="props"
-        <div
+            @sort="$emit('sort', $event)">
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('billable_rate')">
             Billable Rate
-            <ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="status" v-bind="props" @sort="$emit('sort', $event)">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
             Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12 bg-row-heading-background">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Project/ProjectTable.vue

@@ -16,7 +16,7 @@ export type SortColumn =
     | 'billable_rate'
     | 'status'
     | 'visibility';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 import { canCreateProjects } from '@/utils/permissions';
 import type { CreateProjectBody, Project, Client, CreateClientBody } from '@/packages/api/src';
 import { useProjectsStore } from '@/utils/useProjects';
@@ -27,11 +27,10 @@ import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 const { organization } = useOrganizationQuery(getCurrentOrganizationId()!);
 
@@ -57,28 +56,16 @@ const clientNameMap = computed(() => {
     return map;
 });
 
-// Convert sort props to TanStack Table format.
-// Name is always the secondary sort so rows with equal values render
-// alphabetically instead of in API (created_at) order.
-const sorting = computed<SortingState>(() => [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-    ...(props.sortColumn !== 'name' ? [{ id: 'name', desc: false }] : []),
-]);
-
 // Define column accessors for sorting.
 // Numeric columns use sortDescFirst so that the first click (chevron down) sorts highest-first,
 // while text columns default to ascending (A-Z) on first click (chevron down).
-const columns = computed(() => [
+const columns = computed<SortableColumnDef<Project, SortColumn>[]>(() => [
     {
         id: 'name',
         accessorFn: (row: Project) => row.name.toLowerCase(),
     },
     {
         id: 'client_name',
-        sortUndefined: 'last' as const,
         accessorFn: (row: Project) => {
             if (!row.client_id) return undefined;
             return (clientNameMap.value.get(row.client_id) ?? '').toLowerCase();
@@ -87,12 +74,11 @@ const columns = computed(() => [
     {
         id: 'spent_time',
         sortDescFirst: true,
-        accessorFn: (row: Project) => row.spent_time ?? 0,
+        accessorFn: (row: Project) => row.spent_time,
     },
     {
         id: 'progress',
         sortDescFirst: true,
-        sortUndefined: 'last' as const,
         accessorFn: (row: Project) => {
             if (!row.estimated_time) return undefined;
             return (row.spent_time / row.estimated_time) * 100;
@@ -101,7 +87,7 @@ const columns = computed(() => [
     {
         id: 'billable_rate',
         sortDescFirst: true,
-        accessorFn: (row: Project) => row.billable_rate ?? 0,
+        accessorFn: (row: Project) => row.billable_rate,
     },
     {
         id: 'status',
@@ -113,39 +99,21 @@ const columns = computed(() => [
     },
 ]);
 
-// Columns with sortDescFirst get desc as default direction on first click.
+const {
-const descFirstColumns = new Set<SortColumn>(
+    sortedRows: sortedProjects,
-    columns.value.filter((c) => c.sortDescFirst).map((c) => c.id as SortColumn)
+    descFirstColumns,
-);
+    nextDirection,
+} = useSortableTable({
+    data: () => props.projects,
+    columns: () => columns.value,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+    tieBreakColumn: 'name',
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
 }
-}
-
-const table = useVueTable({
-    get data() {
-        return props.projects;
-    },
-    get columns() {
-        return columns.value;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedProjects = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 
 // Client-side pagination: the full list is in memory, only one page is mounted at a time.
 const PAGE_SIZE = 15;

resources/js/Components/Common/Project/ProjectTableHeading.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Project/ProjectTable.vue';
 
 const props = defineProps<{
@@ -14,90 +15,51 @@ const emit = defineEmits<{
     sort: [column: SortColumn];
 }>();
 
+// Bound once per cell instead of repeating the three sort props on every column.
+const sortState = computed(() => ({
+    sortColumn: props.sortColumn,
+    sortDirection: props.sortDirection,
+    descFirstColumns: props.descFirstColumns,
+}));
+
 function handleSort(column: SortColumn) {
     emit('sort', column);
 }
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="sortState"
+            @sort="handleSort">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="client_name" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('client_name')">
             Client
-            <ChevronDownIcon v-if="isChevronDown('client_name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('client_name')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="spent_time" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('spent_time')">
             Total Time
-            <ChevronDownIcon v-if="isChevronDown('spent_time')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('spent_time')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="progress" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('progress')">
             Progress
-            <ChevronDownIcon v-if="isChevronDown('progress')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('progress')" class="w-4 h-4" />
+        <SortableTableHeaderCell
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
             v-if="showBillableRate"
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            column="billable_rate"
-            @click="handleSort('billable_rate')">
+            v-bind="sortState"
+            @sort="handleSort">
             Billable Rate
-            <ChevronDownIcon v-if="isChevronDown('billable_rate')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('billable_rate')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="status" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('status')">
             Status
-            <ChevronDownIcon v-if="isChevronDown('status')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('status')" class="w-4 h-4" />
+        <SortableTableHeaderCell column="visibility" v-bind="sortState" @sort="handleSort">
-            <span v-else class="w-4 h-4"></span>
-        </div>
-        <div
-            class="px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
-            @click="handleSort('visibility')">
             Visibility
-            <ChevronDownIcon v-if="isChevronDown('visibility')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('visibility')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>
 </template>
-
-<style scoped></style>

resources/js/Components/Common/SortableTableHeaderCell.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts" generic="TColumn extends string">
+import { computed, useAttrs } from 'vue';
+import type { ClassValue } from 'clsx';
+import { cn } from '@/lib/utils';
+import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import type { SortDirection } from '@/utils/useSortableTable';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<{
+    column: TColumn;
+    sortColumn: TColumn;
+    sortDirection: SortDirection;
+    descFirstColumns: ReadonlySet<TColumn>;
+}>();
+
+const emit = defineEmits<{
+    sort: [column: TColumn];
+}>();
+
+const attrs = useAttrs();
+
+const isSorted = computed(() => props.sortColumn === props.column);
+
+const isChevronDown = computed(() => {
+    if (!isSorted.value) return false;
+    return props.descFirstColumns.has(props.column)
+        ? props.sortDirection === 'desc'
+        : props.sortDirection === 'asc';
+});
+
+const cellClass = computed(() =>
+    cn(
+        'px-3 py-1.5 text-left text-text-tertiary cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1',
+        attrs.class as ClassValue
+    )
+);
+</script>
+
+<template>
+    <button type="button" :class="cellClass" @click="emit('sort', column)">
+        <slot></slot>
+        <span class="sr-only">
+            {{
+                isSorted
+                    ? `sorted ${sortDirection === 'asc' ? 'ascending' : 'descending'}`
+                    : 'not sorted'
+            }}
+        </span>
+        <ChevronDownIcon v-if="isChevronDown" aria-hidden="true" class="w-4 h-4" />
+        <ChevronUpIcon v-else-if="isSorted" aria-hidden="true" class="w-4 h-4" />
+        <span v-else aria-hidden="true" class="w-4 h-4"></span>
+    </button>
+</template>

resources/js/Components/Common/Tag/TagTable.vue

@@ -2,7 +2,7 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useTagsQuery } from '@/utils/useTagsQuery';
 import TagTableRow from '@/Components/Common/Tag/TagTableRow.vue';
 import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
@@ -10,14 +10,13 @@ import TagTableHeading from '@/Components/Common/Tag/TagTableHeading.vue';
 import { canCreateTags } from '@/utils/permissions';
 import type { Tag } from '@/packages/api/src';
 import {
-    useVueTable,
+    useSortableTable,
-    getCoreRowModel,
+    type SortableColumnDef,
-    getSortedRowModel,
+    type SortDirection,
-    type SortingState,
+} from '@/utils/useSortableTable';
-} from '@tanstack/vue-table';
 
 export type SortColumn = 'name';
-export type SortDirection = 'asc' | 'desc';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     createTag: (name: string) => Promise<Tag | undefined>;
@@ -32,50 +31,27 @@ const emit = defineEmits<{
 const { tags } = useTagsQuery();
 const showCreateTagModal = ref(false);
 
-const sorting = computed<SortingState>(() => [
+const columns: SortableColumnDef<Tag, SortColumn>[] = [
-    {
-        id: props.sortColumn,
-        desc: props.sortDirection === 'desc',
-    },
-]);
-
-const columns = [
     {
         id: 'name',
         accessorFn: (row: Tag) => row.name.toLowerCase(),
     },
 ];
 
-const descFirstColumns = new Set<SortColumn>(
+const {
-    columns.filter((c) => 'sortDescFirst' in c && c.sortDescFirst).map((c) => c.id as SortColumn)
+    sortedRows: sortedTags,
-);
+    descFirstColumns,
+    nextDirection,
+} = useSortableTable({
+    data: () => tags.value,
+    columns: () => columns,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+});
 
 function handleSort(column: SortColumn) {
-    if (props.sortColumn === column) {
+    emit('sort', column, nextDirection(column));
-        emit('sort', column, props.sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-        emit('sort', column, descFirstColumns.has(column) ? 'desc' : 'asc');
 }
-}
-
-const table = useVueTable({
-    get data() {
-        return tags.value;
-    },
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    state: {
-        get sorting() {
-            return sorting.value;
-        },
-    },
-    manualSorting: false,
-});
-
-const sortedTags = computed(() => {
-    return table.getRowModel().rows.map((row) => row.original);
-});
 </script>
 
 <template>

resources/js/Components/Common/Tag/TagTableHeading.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
-import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/vue/16/solid';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
 import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
 
 const props = defineProps<{
@@ -9,41 +9,20 @@ const props = defineProps<{
     descFirstColumns: ReadonlySet<SortColumn>;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
     sort: [column: SortColumn];
 }>();
-
-function handleSort(column: SortColumn) {
-    emit('sort', column);
-}
-
-function isSorted(column: SortColumn): boolean {
-    return props.sortColumn === column;
-}
-
-function isChevronDown(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return props.descFirstColumns.has(column)
-        ? props.sortDirection === 'desc'
-        : props.sortDirection === 'asc';
-}
-
-function isChevronUp(column: SortColumn): boolean {
-    if (!isSorted(column)) return false;
-    return !isChevronDown(column);
-}
 </script>
 
 <template>
     <TableHeading>
-        <div
+        <SortableTableHeaderCell
-            class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12 cursor-pointer hover:bg-secondary hover:text-text-primary transition-colors select-none flex items-center gap-1"
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
-            @click="handleSort('name')">
+            column="name"
+            v-bind="props"
+            @sort="$emit('sort', $event)">
             Name
-            <ChevronDownIcon v-if="isChevronDown('name')" class="w-4 h-4" />
+        </SortableTableHeaderCell>
-            <ChevronUpIcon v-else-if="isChevronUp('name')" class="w-4 h-4" />
-            <span v-else class="w-4 h-4"></span>
-        </div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>

resources/js/Components/Common/Task/TaskTable.vue

@@ -8,12 +8,62 @@ import TaskTableHeading from '@/Components/Common/Task/TaskTableHeading.vue';
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
 import { canCreateTasks } from '@/utils/permissions';
 import type { Task } from '@/packages/api/src';
+import {
+    useSortableTable,
+    type SortableColumnDef,
+    type SortDirection,
+} from '@/utils/useSortableTable';
+
+export type SortColumn = 'name' | 'spent_time' | 'progress';
+export type { SortDirection } from '@/utils/useSortableTable';
 
 const props = defineProps<{
     projectId: string;
     tasks: Task[];
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
 }>();
 
+const emit = defineEmits<{
+    sort: [column: SortColumn, direction: SortDirection];
+}>();
+
+const columns: SortableColumnDef<Task, SortColumn>[] = [
+    {
+        id: 'name',
+        accessorFn: (row: Task) => row.name.toLowerCase(),
+    },
+    {
+        id: 'spent_time',
+        sortDescFirst: true,
+        accessorFn: (row: Task) => row.spent_time,
+    },
+    {
+        id: 'progress',
+        sortDescFirst: true,
+        accessorFn: (row: Task) => {
+            if (!row.estimated_time) return undefined;
+            return (row.spent_time / row.estimated_time) * 100;
+        },
+    },
+];
+
+const {
+    sortedRows: sortedTasks,
+    descFirstColumns,
+    nextDirection,
+} = useSortableTable({
+    data: () => props.tasks,
+    columns: () => columns,
+    sortColumn: () => props.sortColumn,
+    sortDirection: () => props.sortDirection,
+    tieBreakColumn: 'name',
+});
+
+function handleSort(column: SortColumn) {
+    emit('sort', column, nextDirection(column));
+}
+
 const createTask = ref(false);
 </script>
 
@@ -30,8 +80,12 @@ const createTask = ref(false);
                         1fr minmax(80px, auto) minmax(120px, auto) minmax(50px, auto)
                         80px;
                 ">
-                <TaskTableHeading></TaskTableHeading>
+                <TaskTableHeading
-                <div v-if="tasks.length === 0" class="col-span-5 py-24 text-center">
+                    :sort-column="sortColumn"
+                    :sort-direction="sortDirection"
+                    :desc-first-columns="descFirstColumns"
+                    @sort="handleSort"></TaskTableHeading>
+                <div v-if="sortedTasks.length === 0" class="col-span-5 py-24 text-center">
                     <PlusCircleIcon class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
                     <h3 class="text-text-primary font-semibold">No tasks found</h3>
                     <p v-if="canCreateTasks()" class="pb-5">Create your first task now!</p>
@@ -42,7 +96,7 @@ const createTask = ref(false);
                         >Create your First Task
                     </SecondaryButton>
                 </div>
-                <template v-for="task in tasks" :key="task.id">
+                <template v-for="task in sortedTasks" :key="task.id">
                     <TaskTableRow :task="task"></TaskTableRow>
                 </template>
             </div>

resources/js/Components/Common/Task/TaskTableHeading.vue

@@ -1,19 +1,37 @@
 <script setup lang="ts">
 import TableHeading from '@/Components/Common/TableHeading.vue';
+import SortableTableHeaderCell from '@/Components/Common/SortableTableHeaderCell.vue';
+import type { SortColumn, SortDirection } from '@/Components/Common/Task/TaskTable.vue';
+
+const props = defineProps<{
+    sortColumn: SortColumn;
+    sortDirection: SortDirection;
+    descFirstColumns: ReadonlySet<SortColumn>;
+}>();
+
+defineEmits<{
+    sort: [column: SortColumn];
+}>();
 </script>
 
 <template>
     <TableHeading>
-        <div class="py-1.5 pr-3 text-left text-text-tertiary pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+        <SortableTableHeaderCell
+            class="pr-3 pl-4 sm:pl-6 lg:pl-8 3xl:pl-12"
+            column="name"
+            v-bind="props"
+            @sort="$emit('sort', $event)">
             Task Name
-        </div>
+        </SortableTableHeaderCell>
-        <div class="px-3 py-1.5 text-left text-text-tertiary">Total Time</div>
+        <SortableTableHeaderCell column="spent_time" v-bind="props" @sort="$emit('sort', $event)">
-        <div class="px-3 py-1.5 text-left text-text-tertiary">Progress</div>
+            Total Time
+        </SortableTableHeaderCell>
+        <SortableTableHeaderCell column="progress" v-bind="props" @sort="$emit('sort', $event)">
+            Progress
+        </SortableTableHeaderCell>
         <div class="px-3 py-1.5 text-left text-text-tertiary">Status</div>
         <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
             <span class="sr-only">Edit</span>
         </div>
     </TableHeading>
 </template>
-
-<style scoped></style>

resources/js/Pages/Clients.vue

@@ -11,8 +11,8 @@ import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue'
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateClients } from '@/utils/permissions';
 import { TabBar, TabBarItem } from '@/packages/ui/src';
-import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
-import type { SortColumn, SortDirection } from '@/Components/Common/Client/ClientTable.vue';
+import type { SortColumn } from '@/Components/Common/Client/ClientTable.vue';
 
 const { clients } = useClientsQuery();
 
@@ -20,25 +20,10 @@ const activeTab = ref<'active' | 'archived'>('active');
 
 const createClient = ref(false);
 
-interface ClientTableState {
+const { tableState, handleSort } = useTableSortState<SortColumn>('client-table-state', {
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-}
-
-const tableState = useStorage<ClientTableState>(
-    'client-table-state',
-    {
     sortColumn: 'name',
     sortDirection: 'asc',
-    },
+});
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 
 const shownClients = computed(() => {
     return clients.value.filter((client) => {

resources/js/Pages/Members.vue

@@ -12,8 +12,8 @@ import type { Role } from '@/types/jetstream';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import InvitationTable from '@/Components/Common/Invitation/InvitationTable.vue';
 import { canCreateInvitations } from '@/utils/permissions';
-import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
-import type { SortColumn, SortDirection } from '@/Components/Common/Member/MemberTable.vue';
+import type { SortColumn } from '@/Components/Common/Member/MemberTable.vue';
 
 const inviteMember = ref(false);
 
@@ -23,25 +23,10 @@ defineProps<{
 
 const activeTab = ref<'all' | 'invitations'>('all');
 
-interface MemberTableState {
+const { tableState, handleSort } = useTableSortState<SortColumn>('member-table-state', {
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-}
-
-const tableState = useStorage<MemberTableState>(
-    'member-table-state',
-    {
     sortColumn: 'name',
     sortDirection: 'asc',
-    },
+});
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 </script>
 
 <template>

resources/js/Pages/ProjectShow.vue

@@ -15,6 +15,7 @@ import {
 import { Link } from '@inertiajs/vue3';
 import TaskCreateModal from '@/Components/Common/Task/TaskCreateModal.vue';
 import TaskTable from '@/Components/Common/Task/TaskTable.vue';
+import type { SortColumn } from '@/Components/Common/Task/TaskTable.vue';
 import CardTitle from '@/packages/ui/src/CardTitle.vue';
 import Card from '@/Components/Common/Card.vue';
 import ProjectMemberTable from '@/Components/Common/ProjectMember/ProjectMemberTable.vue';
@@ -29,6 +30,7 @@ import { formatCents } from '../packages/ui/src/utils/money';
 import { getOrganizationCurrencyString } from '../utils/money';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { getCurrentOrganizationId } from '@/utils/useUser';
+import { useTableSortState } from '@/utils/useTableSortState';
 
 const { projects } = useProjectsQuery();
 
@@ -65,6 +67,11 @@ const activeTab = ref<'active' | 'done'>('active');
 
 const { tasks } = useTasksQuery();
 
+const { tableState, handleSort } = useTableSortState<SortColumn>('task-table-state', {
+    sortColumn: 'name',
+    sortDirection: 'asc',
+});
+
 const shownTasks = computed(() => {
     return tasks.value.filter((task) => {
         if (activeTab.value === 'active') {
@@ -159,7 +166,12 @@ const shownTasks = computed(() => {
                         </template>
                     </CardTitle>
                     <Card>
-                        <TaskTable :tasks="shownTasks" :project-id="projectId"></TaskTable>
+                        <TaskTable
+                            :tasks="shownTasks"
+                            :project-id="projectId"
+                            :sort-column="tableState.sortColumn"
+                            :sort-direction="tableState.sortDirection"
+                            @sort="handleSort"></TaskTable>
                     </Card>
                 </div>
                 <div v-if="canViewProjectMembers()">

resources/js/Pages/Projects.vue

@@ -18,6 +18,7 @@ import { getCurrentOrganizationId, getCurrentRole } from '@/utils/useUser';
 import { useOrganizationQuery } from '@/utils/useOrganizationQuery';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
 import ProjectsFilterDropdown from '@/Components/Common/Project/ProjectsFilterDropdown.vue';
 import ProjectStatusFilterBadge from '@/Components/Common/Project/ProjectStatusFilterBadge.vue';
 import ProjectVisibilityFilterBadge from '@/Components/Common/Project/ProjectVisibilityFilterBadge.vue';
@@ -41,7 +42,7 @@ interface ProjectTableState {
     };
 }
 
-const tableState = useStorage<ProjectTableState>(
+const { tableState, handleSort } = useTableSortState<SortColumn, ProjectTableState>(
     'project-table-state',
     {
         sortColumn: 'name',
@@ -52,21 +53,15 @@ const tableState = useStorage<ProjectTableState>(
             visibility: 'all',
         },
     },
-    undefined,
+    // The filters are merged key by key so a stored value missing a newer filter still
-    {
+    // picks up its default instead of the whole object falling back.
-        mergeDefaults: (storage, defaults) => ({
+    (storage, defaults) => ({
         ...defaults,
         ...storage,
         filters: { ...defaults.filters, ...storage.filters },
-        }),
+    })
-    }
 );
 
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
-
 // Filter projects based on current filters
 const filteredProjects = computed(() => {
     return projects.value.filter((project) => {

resources/js/Pages/Tags.vue

@@ -9,30 +9,15 @@ import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import { canCreateTags } from '@/utils/permissions';
 import { useTagsStore } from '@/utils/useTags';
-import { useStorage } from '@vueuse/core';
+import { useTableSortState } from '@/utils/useTableSortState';
-import type { SortColumn, SortDirection } from '@/Components/Common/Tag/TagTable.vue';
+import type { SortColumn } from '@/Components/Common/Tag/TagTable.vue';
 
 const showCreateTagModal = ref(false);
 
-interface TagTableState {
+const { tableState, handleSort } = useTableSortState<SortColumn>('tag-table-state', {
-    sortColumn: SortColumn;
-    sortDirection: SortDirection;
-}
-
-const tableState = useStorage<TagTableState>(
-    'tag-table-state',
-    {
     sortColumn: 'name',
     sortDirection: 'asc',
-    },
+});
-    undefined,
-    { mergeDefaults: true }
-);
-
-function handleSort(column: SortColumn, direction: SortDirection) {
-    tableState.value.sortColumn = column;
-    tableState.value.sortDirection = direction;
-}
 
 async function createTag(tag: string) {
     return await useTagsStore().createTag(tag);

resources/js/packages/ui/src/dialog/DialogContent.vue

@@ -27,7 +27,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         <DialogOverlay
             class="fixed top-0 left-0 z-50 w-screen h-screen [height:100dvh] backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
             <div class="absolute inset-0 bg-default-background opacity-30" />
-            <div class="absolute inset-0 overflow-y-auto overscroll-contain flex items-start justify-center px-2">
+            <div
+                class="absolute inset-0 overflow-y-auto overscroll-contain flex items-start justify-center px-2">
                 <DialogContent
                     v-bind="forwarded"
                     :class="

resources/js/utils/useSortableTable.ts

@@ -0,0 +1,116 @@
+import {
+    getCoreRowModel,
+    getSortedRowModel,
+    sortingFns,
+    type ColumnDef,
+    type Row,
+    type SortingFn,
+    type SortingState,
+    useVueTable,
+} from '@tanstack/vue-table';
+import { computed, type ComputedRef } from 'vue';
+
+export type SortDirection = 'asc' | 'desc';
+
+/**
+ * Comparator for every sortable column: empty values (`null`/`undefined`) sort last in
+ * both directions and compare as equal, so the tie-break orders them. TanStack's own
+ * `sortUndefined` cannot do this: `'last'` bypasses the tie-break and the default flips
+ * empty rows to the top when descending.
+ */
+function sortEmptyLast<TData>(getSorting: () => SortingState): SortingFn<TData> {
+    return (rowA: Row<TData>, rowB: Row<TData>, columnId: string) => {
+        const a = rowA.getValue(columnId);
+        const b = rowB.getValue(columnId);
+
+        if (a == null && b == null) {
+            return 0;
+        }
+        if (a == null || b == null) {
+            const emptyLast = a == null ? 1 : -1;
+            const desc = getSorting().find((entry) => entry.id === columnId)?.desc ?? false;
+            return desc ? -emptyLast : emptyLast;
+        }
+        return typeof a === 'string' || typeof b === 'string'
+            ? sortingFns.alphanumeric(rowA, rowB, columnId)
+            : sortingFns.basic(rowA, rowB, columnId);
+    };
+}
+
+/**
+ * Requires `id` to be one of the table's sortable columns, so a mistyped id is a compile
+ * error instead of a column that silently stops sorting. `sortingFn` is forbidden
+ * because the composable always installs its own comparator.
+ */
+export type SortableColumnDef<TData, TColumn extends string> = ColumnDef<TData, unknown> & {
+    id: TColumn;
+    sortingFn?: never;
+};
+
+export function useSortableTable<TData, TColumn extends string>(options: {
+    data: () => TData[];
+    columns: () => SortableColumnDef<TData, TColumn>[];
+    sortColumn: () => TColumn;
+    sortDirection: () => SortDirection;
+    tieBreakColumn?: TColumn;
+}): {
+    sortedRows: ComputedRef<TData[]>;
+    descFirstColumns: ComputedRef<ReadonlySet<TColumn>>;
+    nextDirection: (column: TColumn) => SortDirection;
+} {
+    const sorting = computed<SortingState>(() => [
+        {
+            id: options.sortColumn(),
+            desc: options.sortDirection() === 'desc',
+        },
+        ...(options.tieBreakColumn && options.sortColumn() !== options.tieBreakColumn
+            ? [{ id: options.tieBreakColumn, desc: false }]
+            : []),
+    ]);
+
+    const resolvedColumns = computed<ColumnDef<TData, unknown>[]>(() =>
+        options.columns().map((column) => ({
+            ...column,
+            sortUndefined: false as const,
+            sortingFn: sortEmptyLast<TData>(() => sorting.value),
+        }))
+    );
+
+    const descFirstColumns = computed<ReadonlySet<TColumn>>(
+        () =>
+            new Set(
+                options
+                    .columns()
+                    .filter((column) => column.sortDescFirst)
+                    .map((column) => column.id)
+            )
+    );
+
+    function nextDirection(column: TColumn): SortDirection {
+        if (options.sortColumn() === column) {
+            return options.sortDirection() === 'asc' ? 'desc' : 'asc';
+        }
+        return descFirstColumns.value.has(column) ? 'desc' : 'asc';
+    }
+
+    const table = useVueTable({
+        get data() {
+            return options.data();
+        },
+        get columns() {
+            return resolvedColumns.value;
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            get sorting() {
+                return sorting.value;
+            },
+        },
+        manualSorting: false,
+    });
+
+    const sortedRows = computed(() => table.getRowModel().rows.map((row) => row.original));
+
+    return { sortedRows, descFirstColumns, nextDirection };
+}

resources/js/utils/useTableSortState.ts

@@ -0,0 +1,32 @@
+import { useStorage } from '@vueuse/core';
+import type { SortDirection } from '@/utils/useSortableTable';
+
+export interface TableSortState<TColumn extends string> {
+    sortColumn: TColumn;
+    sortDirection: SortDirection;
+}
+
+/**
+ * The sort a table page remembers between visits, persisted in localStorage.
+ *
+ * Pages that persist more than the sort (filters, for example) pass the wider defaults
+ * and get them back on `tableState`; `mergeDefaults` is forwarded to `useStorage` so
+ * nested state can be merged key by key rather than wholesale.
+ */
+export function useTableSortState<
+    TColumn extends string,
+    TState extends TableSortState<TColumn> = TableSortState<TColumn>,
+>(
+    key: string,
+    defaults: TState,
+    mergeDefaults: boolean | ((storageValue: TState, defaults: TState) => TState) = true
+) {
+    const tableState = useStorage<TState>(key, defaults, undefined, { mergeDefaults });
+
+    function handleSort(column: TColumn, direction: SortDirection) {
+        tableState.value.sortColumn = column;
+        tableState.value.sortDirection = direction;
+    }
+
+    return { tableState, handleSort };
+}