Merge pull request #2541 from trycompai/sale-34-policy-sort

SALE-34: Sort policies alphabetically by default

Author: tofikwest

apps/app/src/app/(app)/[orgId]/policies/all/components/PolicyFilters.tsx

@@ -16,6 +16,7 @@ import {
 import { Search } from '@trycompai/design-system/icons';
 import { useMemo, useState } from 'react';
 import { PoliciesTableDS } from './PoliciesTableDS';
+import { comparePoliciesByName } from './policy-name-sort';
 
 interface PolicyFiltersProps {
   policies: Policy[];
@@ -33,8 +34,8 @@ export function PolicyFilters({ policies }: PolicyFiltersProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<PolicyStatus | 'all' | 'archived'>('all');
   const [departmentFilter, setDepartmentFilter] = useState<string>('all');
-  const [sortColumn, setSortColumn] = useState<'name' | 'status' | 'updatedAt'>('updatedAt');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [sortColumn, setSortColumn] = useState<'name' | 'status' | 'updatedAt'>('name');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
 
   // Get unique departments from policies
   const departments = useMemo(() => {
@@ -74,7 +75,7 @@ export function PolicyFilters({ policies }: PolicyFiltersProps) {
     result.sort((a, b) => {
       let comparison = 0;
       if (sortColumn === 'name') {
-        comparison = a.name.localeCompare(b.name);
+        comparison = comparePoliciesByName(a, b);
       } else if (sortColumn === 'status') {
         comparison = a.status.localeCompare(b.status);
       } else if (sortColumn === 'updatedAt') {

apps/app/src/app/(app)/[orgId]/policies/all/components/policy-name-sort.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { comparePoliciesByName } from './policy-name-sort';
+
+describe('comparePoliciesByName', () => {
+  it('sorts policy names alphabetically without case sensitivity', () => {
+    const policies = [
+      { id: '2', name: 'zebra policy' },
+      { id: '3', name: 'Alpha policy' },
+      { id: '1', name: 'beta policy' },
+    ];
+
+    const sorted = [...policies].sort(comparePoliciesByName);
+
+    expect(sorted.map((policy) => policy.name)).toEqual([
+      'Alpha policy',
+      'beta policy',
+      'zebra policy',
+    ]);
+  });
+
+  it('falls back to deterministic ordering when names only differ by case', () => {
+    const policies = [
+      { id: 'b', name: 'Policy' },
+      { id: 'a', name: 'policy' },
+      { id: 'c', name: 'policy' },
+    ];
+
+    const sorted = [...policies].sort(comparePoliciesByName);
+
+    expect(sorted.map((policy) => policy.id)).toEqual(['a', 'b', 'c']);
+  });
+});

apps/app/src/app/(app)/[orgId]/policies/all/components/policy-name-sort.ts

@@ -0,0 +1,18 @@
+type NamedPolicy = {
+  id: string;
+  name: string;
+};
+
+const POLICY_NAME_COLLATOR = new Intl.Collator(undefined, { sensitivity: 'base' });
+
+export function comparePoliciesByName(
+  a: NamedPolicy,
+  b: NamedPolicy,
+): number {
+  const byName = POLICY_NAME_COLLATOR.compare(a.name, b.name);
+  if (byName !== 0) {
+    return byName;
+  }
+
+  return a.id.localeCompare(b.id);
+}

apps/portal/src/app/(app)/(home)/[orgId]/components/OrganizationDashboard.tsx

@@ -4,6 +4,7 @@ import { evidenceFormDefinitionList } from '@trycompai/company';
 import { NoAccessMessage } from '../../components/NoAccessMessage';
 import type { FleetPolicy, Host } from '../types';
 import { EmployeeTasksList } from './EmployeeTasksList';
+import { sortPoliciesByName } from './policy/sort-policies-by-name';
 
 const portalForms = evidenceFormDefinitionList
   .filter((f) => f.portalAccessible)
@@ -31,23 +32,25 @@ export async function OrganizationDashboard({
   agentDevices,
 }: OrganizationDashboardProps) {
   // Fetch policies specific to the selected organization
-  const policies = await db.policy.findMany({
-    where: {
-      organizationId: organizationId,
-      isRequiredToSign: true,
-      status: 'published',
-    },
-    include: {
-      currentVersion: {
-        select: {
-          id: true,
-          content: true,
-          pdfUrl: true,
-          version: true,
+  const policies = sortPoliciesByName(
+    await db.policy.findMany({
+      where: {
+        organizationId: organizationId,
+        isRequiredToSign: true,
+        status: 'published',
+      },
+      include: {
+        currentVersion: {
+          select: {
+            id: true,
+            content: true,
+            pdfUrl: true,
+            version: true,
+          },
         },
       },
-    },
-  });
+    }),
+  );
 
   // Fetch training video completions specific to the member
   const trainingVideos = await db.employeeTrainingVideoCompletion.findMany({

apps/portal/src/app/(app)/(home)/[orgId]/components/policy/sort-policies-by-name.ts

@@ -0,0 +1,19 @@
+type NamedPolicy = {
+  id: string;
+  name: string;
+};
+
+const POLICY_NAME_COLLATOR = new Intl.Collator(undefined, { sensitivity: 'base' });
+
+export function sortPoliciesByName<T extends NamedPolicy>(
+  policies: T[],
+): T[] {
+  return [...policies].sort((a, b) => {
+    const byName = POLICY_NAME_COLLATOR.compare(a.name, b.name);
+    if (byName !== 0) {
+      return byName;
+    }
+
+    return a.id.localeCompare(b.id);
+  });
+}

apps/portal/src/app/(app)/(home)/[orgId]/policies/page.tsx

@@ -13,6 +13,7 @@ import { Document } from '@trycompai/design-system/icons';
 import { headers } from 'next/headers';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
+import { sortPoliciesByName } from '../components/policy/sort-policies-by-name';
 
 export default async function SignedPoliciesPage({
   params,
@@ -41,22 +42,23 @@ export default async function SignedPoliciesPage({
     redirect('/');
   }
 
-  const policies = await db.policy.findMany({
-    where: {
-      organizationId: orgId,
-      status: 'published',
-      isRequiredToSign: true,
-      isArchived: false,
-      signedBy: { has: member.id },
-    },
-    orderBy: { name: 'asc' },
-    select: {
-      id: true,
-      name: true,
-      description: true,
-      updatedAt: true,
-    },
-  });
+  const policies = sortPoliciesByName(
+    await db.policy.findMany({
+      where: {
+        organizationId: orgId,
+        status: 'published',
+        isRequiredToSign: true,
+        isArchived: false,
+        signedBy: { has: member.id },
+      },
+      select: {
+        id: true,
+        name: true,
+        description: true,
+        updatedAt: true,
+      },
+    }),
+  );
 
   return (
     <PageLayout>