[dev] [carhartlewis] lewis/comp-filter-evidence-tasks (#2106)

github-actions[bot] · carhartlewis · web-flow · commit 4e5f32165c28 · 2026-02-06T06:31:37.000-05:00
* feat(tasks): add framework instances support to task filtering

* feat(tasks): define FrameworkInstanceForTasks type for task components and added a handler for non-existent frameworks

* feat(tasks): add validation for frameworkFilter in TaskList component

---------

Co-authored-by: Lewis Carhart &lt;lewis@trycomp.ai&gt;
diff --git a/apps/app/src/app/(app)/[orgId]/tasks/components/TaskList.tsx b/apps/app/src/app/(app)/[orgId]/tasks/components/TaskList.tsx
@@ -28,6 +28,7 @@ import { Check, Circle, FolderTree, List, Search, XCircle } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useQueryState } from 'nuqs';
 import { useEffect, useMemo, useState } from 'react';
+import type { FrameworkInstanceForTasks } from '../types';
 import { ModernTaskList } from './ModernTaskList';
 import { TasksByCategory } from './TasksByCategory';
 
@@ -42,6 +43,7 @@ const statuses = [
 export function TaskList({
   tasks: initialTasks,
   members,
+  frameworkInstances,
   activeTab,
 }: {
   tasks: (Task & {
@@ -61,20 +63,34 @@ export function TaskList({
     }>;
   })[];
   members: (Member & { user: User })[];
+  frameworkInstances: FrameworkInstanceForTasks[];
   activeTab: 'categories' | 'list';
 }) {
   const params = useParams();
   const orgId = params.orgId as string;
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useQueryState('status');
   const [assigneeFilter, setAssigneeFilter] = useQueryState('assignee');
+  const [frameworkFilter, setFrameworkFilter] = useQueryState('framework');
   const [currentTab, setCurrentTab] = useState<'categories' | 'list'>(activeTab);
 
   // Sync activeTab prop with state when it changes
   useEffect(() => {
     setCurrentTab(activeTab);
   }, [activeTab]);
 
+  // Clear frameworkFilter when it's invalid or frameworks are empty.
+  // Prevents invisible filter (no dropdown when empty) and stale bookmarked URLs.
+  useEffect(() => {
+    if (!frameworkFilter) return;
+    const isValid =
+      frameworkInstances.length > 0 &&
+      frameworkInstances.some((fw) => fw.id === frameworkFilter);
+    if (!isValid) {
+      setFrameworkFilter(null);
+    }
+  }, [frameworkFilter, frameworkInstances, setFrameworkFilter]);
+
   const handleTabChange = async (value: string) => {
     const newTab = value as 'categories' | 'list';
     setCurrentTab(newTab);
@@ -100,7 +116,17 @@ export function TaskList({
       });
   }, [members]);
 
-  // Filter tasks by search query, status, and assignee
+  // Build a map of control IDs to their framework instances for efficient lookup
+  const frameworkControlIds = useMemo(() => {
+    const map = new Map<string, Set<string>>();
+    for (const fw of frameworkInstances) {
+      const controlIds = new Set(fw.requirementsMapped.map((r) => r.controlId));
+      map.set(fw.id, controlIds);
+    }
+    return map;
+  }, [frameworkInstances]);
+
+  // Filter tasks by search query, status, assignee, and framework
   const filteredTasks = initialTasks.filter((task) => {
     const matchesSearch =
       searchQuery === '' ||
@@ -110,7 +136,16 @@ export function TaskList({
     const matchesStatus = !statusFilter || task.status === statusFilter;
     const matchesAssignee = !assigneeFilter || task.assigneeId === assigneeFilter;
 
-    return matchesSearch && matchesStatus && matchesAssignee;
+    const matchesFramework =
+      !frameworkFilter ||
+      (() => {
+        const fwControlIds = frameworkControlIds.get(frameworkFilter);
+        // Stale/invalid framework ID (e.g. from bookmarked URL): treat as "All frameworks" to match dropdown display
+        if (!fwControlIds) return true;
+        return task.controls.some((c) => fwControlIds.has(c.id));
+      })();
+
+    return matchesSearch && matchesStatus && matchesAssignee && matchesFramework;
   });
 
   // Calculate overall stats from all tasks (not filtered)
@@ -571,6 +606,36 @@ export function TaskList({
                   </SelectContent>
                 </Select>
 
+                {frameworkInstances.length > 0 && (
+                  <Select
+                    value={frameworkFilter || 'all'}
+                    onValueChange={(value) => setFrameworkFilter(value === 'all' ? null : value)}
+                  >
+                    <SelectTrigger size="sm">
+                      <SelectValue placeholder="All frameworks">
+                        {(() => {
+                          if (!frameworkFilter) return 'All frameworks';
+                          const selectedFramework = frameworkInstances.find(
+                            (fw) => fw.id === frameworkFilter,
+                          );
+                          if (!selectedFramework) return 'All frameworks';
+                          return selectedFramework.framework.name;
+                        })()}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">
+                        <span className="text-xs">All frameworks</span>
+                      </SelectItem>
+                      {frameworkInstances.map((fw) => (
+                        <SelectItem key={fw.id} value={fw.id}>
+                          <span className="text-xs">{fw.framework.name}</span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+
                 <Select
                   value={assigneeFilter || 'all'}
                   onValueChange={(value) => setAssigneeFilter(value === 'all' ? null : value)}
@@ -629,7 +694,7 @@ export function TaskList({
                 </Select>
               </div>
               {/* Result Count */}
-              {(searchQuery || statusFilter || assigneeFilter) && (
+              {(searchQuery || statusFilter || assigneeFilter || frameworkFilter) && (
                 <div className="text-muted-foreground text-xs tabular-nums whitespace-nowrap lg:ml-auto">
                   {filteredTasks.length} {filteredTasks.length === 1 ? 'result' : 'results'}
                 </div>
@@ -664,7 +729,6 @@ export function TaskList({
           </div>
         </Stack>
       </Tabs>
-
     </Stack>
   );
 }
diff --git a/apps/app/src/app/(app)/[orgId]/tasks/components/TasksPageClient.tsx b/apps/app/src/app/(app)/[orgId]/tasks/components/TasksPageClient.tsx
@@ -17,6 +17,7 @@ import {
 import { Add, ArrowDown } from '@trycompai/design-system/icons';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import type { FrameworkInstanceForTasks } from '../types';
 import { CreateTaskSheet } from './CreateTaskSheet';
 import { TaskList } from './TaskList';
 
@@ -39,6 +40,7 @@ interface TasksPageClientProps {
   })[];
   members: (Member & { user: User })[];
   controls: { id: string; name: string }[];
+  frameworkInstances: FrameworkInstanceForTasks[];
   activeTab: 'categories' | 'list';
   orgId: string;
   organizationName: string | null;
@@ -49,6 +51,7 @@ export function TasksPageClient({
   tasks,
   members,
   controls,
+  frameworkInstances,
   activeTab,
   orgId,
   organizationName,
@@ -121,7 +124,12 @@ export function TasksPageClient({
       }
       padding="default"
     >
-      <TaskList tasks={tasks} members={members} activeTab={activeTab} />
+      <TaskList
+        tasks={tasks}
+        members={members}
+        frameworkInstances={frameworkInstances}
+        activeTab={activeTab}
+      />
       <CreateTaskSheet
         members={members}
         controls={controls}
diff --git a/apps/app/src/app/(app)/[orgId]/tasks/page.tsx b/apps/app/src/app/(app)/[orgId]/tasks/page.tsx
@@ -27,8 +27,8 @@ export default async function TasksPage({
   const tasks = await getTasks();
   const members = await getMembersWithMetadata();
   const controls = await getControls();
-  const { hasEvidenceExportAccess, organizationName } =
-    await getEvidenceExportContext(orgId);
+  const frameworkInstances = await getFrameworkInstances();
+  const { hasEvidenceExportAccess, organizationName } = await getEvidenceExportContext(orgId);
 
   // Read tab preference from cookie (server-side, no hydration issues)
   const cookieStore = await cookies();
@@ -40,6 +40,7 @@ export default async function TasksPage({
       tasks={tasks}
       members={members}
       controls={controls}
+      frameworkInstances={frameworkInstances}
       activeTab={activeTab}
       orgId={orgId}
       organizationName={organizationName}
@@ -83,9 +84,7 @@ const getEvidenceExportContext = async (organizationId: string) => {
 
   const roles = parseRolesString(member?.role);
   const hasEvidenceExportAccess =
-    roles.includes(Role.auditor) ||
-    roles.includes(Role.admin) ||
-    roles.includes(Role.owner);
+    roles.includes(Role.auditor) || roles.includes(Role.admin) || roles.includes(Role.owner);
 
   return {
     hasEvidenceExportAccess,
@@ -195,3 +194,36 @@ const getControls = async () => {
 
   return controls;
 };
+
+const getFrameworkInstances = async () => {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  const orgId = session?.session.activeOrganizationId;
+
+  if (!orgId) {
+    return [];
+  }
+
+  const frameworkInstances = await db.frameworkInstance.findMany({
+    where: {
+      organizationId: orgId,
+    },
+    include: {
+      framework: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+      requirementsMapped: {
+        select: {
+          controlId: true,
+        },
+      },
+    },
+  });
+
+  return frameworkInstances;
+};
diff --git a/apps/app/src/app/(app)/[orgId]/tasks/types.ts b/apps/app/src/app/(app)/[orgId]/tasks/types.ts
@@ -0,0 +1,10 @@
+import type { FrameworkInstance } from '@db';
+
+/**
+ * Shape of framework instance as returned by getFrameworkInstances and used by
+ * TaskList and TasksPageClient. Single source of truth to avoid type drift.
+ */
+export type FrameworkInstanceForTasks = Pick<FrameworkInstance, 'id'> & {
+  framework: { id: string; name: string };
+  requirementsMapped: { controlId: string }[];
+};
diff --git a/packages/docs/openapi.json b/packages/docs/openapi.json
@@ -7024,7 +7024,6 @@
                     "enum": [
                       "todo",
                       "in_progress",
-                      "in_review",
                       "done",
                       "not_relevant",
                       "failed"
@@ -7333,7 +7332,6 @@
                     "enum": [
                       "todo",
                       "in_progress",
-                      "in_review",
                       "done",
                       "not_relevant",
                       "failed"
