updates to fix filtering

Author: doomlab

src/core/components/Table.tsx

@@ -16,8 +16,18 @@ import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from "@heroicons/re
 
 import Filter from "src/core/components/Filter"
 import { buildSearchableString } from "src/core/utils/tableFilters"
-
-const specialSearchTokens = new Set(["read", "unread", "completed", "complete", "not completed"])
+import TooltipWrapper from "./TooltipWrapper"
+
+const specialSearchTokens = new Set([
+  "read",
+  "unread",
+  "completed",
+  "complete",
+  "not completed",
+  "approved",
+  "not approved",
+  "pending",
+])
 
 const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
 const containsWholeWord = (text: string, word: string) => {
@@ -48,10 +58,11 @@ const matchesSpecialTokenInText = (text: string, token: string) => {
   return containsWholeWord(normalized, token)
 }
 
-const matchesBooleanToken = (token: string, value: boolean, keyPath: string): boolean => {
+const matchesBooleanToken = (token: string, value: boolean | null, keyPath: string): boolean => {
   const normalizedKey = keyPath.toLowerCase()
   const isReadKey = normalizedKey.includes("read")
   const isCompletionKey = normalizedKey.includes("status") || normalizedKey.includes("complete")
+  const isApprovalKey = normalizedKey.includes("approve")
 
   if (token === "read") {
     return isReadKey && value === true
@@ -69,12 +80,24 @@ const matchesBooleanToken = (token: string, value: boolean, keyPath: string): bo
     return isCompletionKey && value === false
   }
 
+  if (token === "approved") {
+    return isApprovalKey && value === true
+  }
+
+  if (token === "not approved") {
+    return isApprovalKey && value === false
+  }
+
+  if (token === "pending") {
+    return isApprovalKey && (value === null || value === undefined)
+  }
+
   return false
 }
 
 const matchesSpecialToken = (data: unknown, token: string, keyPath = ""): boolean => {
   if (data === null || data === undefined) {
-    return false
+    return matchesBooleanToken(token, data as null, keyPath)
   }
 
   if (typeof data === "boolean") {
@@ -190,6 +213,8 @@ const Table = <TData,>({
   const pageCount = table.getPageCount()
   const pageIndex = table.getState().pagination.pageIndex
 
+  const globalSearchTooltipId = React.useId()
+
   React.useEffect(() => {
     if (!addPagination) {
       return
@@ -203,17 +228,24 @@ const Table = <TData,>({
   return (
     <>
       {enableGlobalSearch && (
-        <div className={`mb-4 flex justify-end ${classNames?.searchContainer || ""}`}>
+        <div className={`mb-2 mt-2 mr-2 flex justify-end ${classNames?.searchContainer || ""}`}>
           <input
             type="text"
             value={globalFilter ?? ""}
             onChange={(event) => setGlobalFilter(event.target.value)}
             placeholder={globalSearchPlaceholder}
             aria-label="Search table data"
+            data-tooltip-id={globalSearchTooltipId}
+            data-tooltip-content="Searches all data in table (including comments, log dates, and more)."
             className={`input input-primary input-bordered border-2 bg-base-300 rounded input-sm w-full max-w-xs focus:outline-secondary ${
               classNames?.searchInput || ""
             }`}
           />
+          <TooltipWrapper
+            id={globalSearchTooltipId}
+            content="Global search scans all table data, including hidden columns and filters."
+            className="z-[1099] ourtooltips"
+          />
         </div>
       )}
       <table className={classNames?.table || "table"}>

src/tags/tables/columns/TagPeopleColumns.tsx

@@ -6,7 +6,7 @@ import { createDateTextFilter } from "src/core/utils/tableFilters"
 
 export type TagPeopleData = {
   name: string
-  createdAt: Date
+  createdAt: Date | null
   percentTasksComplete: number | null
   percentApproved: number | null
   percentFormsComplete: number | null
@@ -15,21 +15,37 @@ export type TagPeopleData = {
   type: string
   userId: number
   projectId: number
-  completionStatus: "Completed" | "Not completed"
 }
 
 const columnHelper = createColumnHelper<TagPeopleData>()
 const createdDateFilter = createDateTextFilter({ emptyLabel: "no date" })
-const completionStatusFilter: FilterFn<TagPeopleData> = (row, columnId, filterValue) => {
-  const selected = String(filterValue ?? "").trim()
 
-  if (!selected) {
+const nullableRangeFilter: FilterFn<TagPeopleData> = (row, columnId, filterValue) => {
+  const value = row.getValue<number | null>(columnId)
+
+  // Always include rows without numeric data
+  if (value === null || value === undefined) {
     return true
   }
 
-  return String(row.getValue(columnId) ?? "") === selected
-}
+  if (!Array.isArray(filterValue)) {
+    return true
+  }
+
+  const parseBound = (bound: unknown, fallback: number) => {
+    if (bound === null || bound === undefined || bound === "") {
+      return fallback
+    }
+
+    const numeric = typeof bound === "number" ? bound : Number(bound)
+    return Number.isNaN(numeric) ? fallback : numeric
+  }
 
+  const min = parseBound(filterValue[0], Number.NEGATIVE_INFINITY)
+  const max = parseBound(filterValue[1], Number.POSITIVE_INFINITY)
+
+  return value >= min && value <= max
+}
 export const TagPeopleColumns = [
   columnHelper.accessor("name", {
     header: "Name",
@@ -58,28 +74,20 @@ export const TagPeopleColumns = [
   }),
   columnHelper.accessor("percentTasksComplete", {
     header: "Tasks Complete",
-    cell: (info) => (info.getValue() === null ? "N/A" : `${info.getValue()}%`),
+    cell: (info) => (info.getValue() === null ? "No tasks" : `${info.getValue()}%`),
     enableColumnFilter: true,
     enableSorting: true,
+    filterFn: nullableRangeFilter,
     meta: {
       filterVariant: "range",
     },
   }),
-  columnHelper.accessor("completionStatus", {
-    header: "Status",
-    cell: (info) => info.getValue(),
-    enableColumnFilter: true,
-    enableSorting: true,
-    filterFn: completionStatusFilter,
-    meta: {
-      filterVariant: "select",
-    },
-  }),
   columnHelper.accessor("percentApproved", {
     header: "Tasks Approved",
-    cell: (info) => (info.getValue() === null ? "N/A" : `${info.getValue()}%`),
+    cell: (info) => (info.getValue() === null ? "No tasks" : `${info.getValue()}%`),
     enableColumnFilter: true,
     enableSorting: true,
+    filterFn: nullableRangeFilter,
     meta: {
       filterVariant: "range",
     },
@@ -88,10 +96,11 @@ export const TagPeopleColumns = [
     header: "Forms Complete",
     cell: (info) => {
       const row = info.row.original
-      return row.formAssignedCount === 0 ? "N/A" : `${info.getValue()}%`
+      return row.formAssignedCount === 0 ? "No forms" : `${info.getValue()}%`
     },
     enableColumnFilter: true,
     enableSorting: true,
+    filterFn: nullableRangeFilter,
     meta: {
       filterVariant: "range",
     },

src/tags/tables/processing/processTagPeople.ts

@@ -76,7 +76,6 @@ export function processTagPeople(
       type: person.name ? "Team" : "Individual",
       userId: person.id,
       projectId: projectId,
-      completionStatus: total > 0 && complete === total ? "Completed" : "Not completed",
     }
   })
 }

src/tasklogs/components/TaskLogHistoryModal.tsx

@@ -54,6 +54,7 @@ export const TaskLogHistoryModal = ({
     <ToggleModal
       buttonLabel="Show History"
       buttonClassName="w-full"
+      modalSize="w-1/2 max-w-5xl"
       modalTitle={
         <div className="flex justify-center items-center">
           Task History
@@ -78,15 +79,14 @@ export const TaskLogHistoryModal = ({
       }}
       onClose={handleClose}
     >
-      <div className="modal-action flex flex-col">
+      <div className="modal-action flex flex-col w-full">
         <Table
           columns={schema && ui ? TaskLogHistoryFormColumns : TaskLogHistoryCompleteColumns}
           data={internalTaskLogHistory}
+          addPagination={true}
           classNames={{
-            thead: "text-base",
-            tbody: "text-base",
+            table: "table w-full",
           }}
-          addPagination={true}
         />
       </div>
     </ToggleModal>

src/tasklogs/tables/columns/TaskLogCompleteColumns.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
+import { ColumnDef, FilterFn, createColumnHelper } from "@tanstack/react-table"
 import { TaskLogToggleModal } from "../../components/TaskLogToggleModal"
 import { ProcessedIndividualTaskLog, ProcessedTeamTaskLog } from "../processing/processTaskLogs"
 import ToggleModal from "src/core/components/ToggleModal"
@@ -18,10 +18,63 @@ import {
 } from "@heroicons/react/24/outline"
 import TaskLogHistoryModal from "src/tasklogs/components/TaskLogHistoryModal"
 import DateFormat from "src/core/components/DateFormat"
+import { createDateTextFilter } from "src/core/utils/tableFilters"
 
 // Column helper
 const columnHelper = createColumnHelper<ProcessedIndividualTaskLog | ProcessedTeamTaskLog>()
 
+const lastUpdateFilter = createDateTextFilter({ emptyLabel: "no date" })
+
+const statusFilter: FilterFn<ProcessedIndividualTaskLog | ProcessedTeamTaskLog> = (
+  row,
+  columnId,
+  filterValue
+) => {
+  const selected = String(filterValue ?? "")
+    .trim()
+    .toLowerCase()
+
+  if (!selected) {
+    return true
+  }
+
+  const value = String(row.getValue(columnId) ?? "")
+    .trim()
+    .toLowerCase()
+
+  return value === selected
+}
+
+const approvalFilter: FilterFn<ProcessedIndividualTaskLog | ProcessedTeamTaskLog> = (
+  row,
+  columnId,
+  filterValue
+) => {
+  const selected = String(filterValue ?? "")
+    .trim()
+    .toLowerCase()
+
+  if (!selected) {
+    return true
+  }
+
+  const value = row.getValue<boolean | null>(columnId)
+
+  if (selected === "approved") {
+    return value === true
+  }
+
+  if (selected === "not approved") {
+    return value === false
+  }
+
+  if (selected === "pending") {
+    return value === null
+  }
+
+  return true
+}
+
 // ColumnDefs
 // Table for assignment without a form
 export const TaskLogCompleteColumns: ColumnDef<
@@ -82,7 +135,7 @@ export const TaskLogCompleteColumns: ColumnDef<
               <HandRaisedIcon className="h-5 w-5 inline-block" />
             </span>
           )}
-          <DateFormat date={info.getValue()} preset="dateShort" />
+          <DateFormat date={info.getValue()} preset="date" />
         </div>
       )
     },
@@ -101,13 +154,19 @@ export const TaskLogCompleteColumns: ColumnDef<
       </div>
     ),
     id: "updatedAt",
+    enableColumnFilter: true,
+    enableSorting: true,
+    filterFn: lastUpdateFilter,
+    meta: {
+      filterVariant: "text",
+    },
   }),
   columnHelper.accessor("status", {
     cell: (info) => {
       const value = info.getValue()
       const isCompleted = value === "Completed"
       return (
-        <div className="flex justify-center items-center">
+        <div className="flex">
           {isCompleted ? (
             <CheckCircleIcon className="h-6 w-6 text-success" title="Completed" />
           ) : (
@@ -120,8 +179,13 @@ export const TaskLogCompleteColumns: ColumnDef<
     id: "status",
     enableColumnFilter: true,
     enableSorting: true,
+    filterFn: statusFilter,
     meta: {
       filterVariant: "select",
+      selectOptions: [
+        { label: "Completed", value: "completed" },
+        { label: "Not completed", value: "not completed" },
+      ],
     },
   }),
   columnHelper.accessor("approved", {
@@ -135,14 +199,20 @@ export const TaskLogCompleteColumns: ColumnDef<
       } else {
         icon = <ClockIcon className="h-6 w-6 text-warning" title="Pending" />
       }
-      return <div className="flex justify-center items-center">{icon}</div>
+      return <div className="flex">{icon}</div>
     },
     header: "Approved",
     id: "approved",
     enableColumnFilter: true,
     enableSorting: true,
+    filterFn: approvalFilter,
     meta: {
       filterVariant: "select",
+      selectOptions: [
+        { label: "Approved", value: "approved" },
+        { label: "Pending", value: "pending" },
+        { label: "Not approved", value: "not approved" },
+      ],
     },
   }),
   columnHelper.accessor("taskHistory", {