add account filter

electron/main/api.ts

@@ -229,9 +229,9 @@ export const router = t.router({
 				await upsertAccount({
 					plaidId: account.id,
 					name: account.name,
-					mask: account.mask,
-					type: account.type,
-					subtype: account.subtype,
+					mask: account.mask ?? '',
+					type: account.type ?? '',
+					subtype: account.subtype ?? '',
 					institutionPlaidId: input.institutionId,
 				})
 			}

electron/main/models/transactions.ts

@@ -3,6 +3,12 @@ import { z } from 'zod'
 import { prisma } from '../prisma'
 import { Prisma } from '@prisma/client'
 
+function narrowFilterType(
+	filter: unknown,
+): asserts filter is string | string[] {
+	z.union([z.string(), z.array(z.string())]).parse(filter)
+}
+
 export async function fetchTransactions({
 	sort,
 	sortColumn,
@@ -18,11 +24,24 @@ export async function fetchTransactions({
 	}
 
 	if (columnFilters.length) {
-		where.OR = columnFilters.map((filter) => ({
-			[filter.id]: {
-				contains: filter.value as string,
-			},
-		}))
+		where.OR = columnFilters.map((filter) => {
+			narrowFilterType(filter.value)
+
+			switch (filter.id) {
+				case 'account':
+					return {
+						account: {
+							plaidId: Array.isArray(filter.value)
+								? { in: filter.value }
+								: filter.value,
+						},
+					}
+				default:
+					return {
+						[filter.id]: { contains: filter.value },
+					}
+			}
+		})
 	}
 
 	const [results, total] = await Promise.all([

src/components/pages/TablePage.tsx

@@ -9,10 +9,8 @@ import { Transaction } from '@prisma/client'
 export function TablePage() {
 	const [input, setInput] = useDataTableInput()
 	const [selectedRows, setSelectedRows] = useState<Transaction[]>([])
-
-	const { data /*, refetch*/ } = trpc.transactions.useQuery(input, {
-		keepPreviousData: true,
-	})
+	const { data } = trpc.transactions.useQuery(input, { keepPreviousData: true })
+	const { data: accounts } = trpc.accounts.useQuery()
 
 	const table = useDataTable({
 		data: data?.results ?? [],
@@ -40,7 +38,20 @@ export function TablePage() {
 
 	return (
 		<>
-			<DataTable table={table} filters={[{ column: 'account' }]} />
+			<DataTable
+				table={table}
+				filters={[
+					{
+						column: 'account',
+						title: 'Account',
+						options:
+							accounts?.map((account) => ({
+								label: account.name,
+								value: account.plaidId,
+							})) ?? [],
+					},
+				]}
+			/>
 
 			{Boolean(selectedRows.length) && (
 				<SelectionOverlay selectedRows={selectedRows} key={Math.random()} />

src/components/ui/data-table/data-table-faceted-filter.tsx

@@ -21,14 +21,16 @@ import {
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
 
+export interface FacetedFilterOption {
+	label: string
+	value: string
+	icon?: React.ComponentType<{ className?: string }>
+}
+
 interface DataTableFacetedFilterProps<TData, TValue> {
 	column?: Column<TData, TValue>
 	title?: string
-	options: {
-		label: string
-		value: string
-		icon?: React.ComponentType<{ className?: string }>
-	}[]
+	options: FacetedFilterOption[]
 }
 
 export function DataTableFacetedFilter<TData, TValue>({

src/components/ui/data-table/data-table-toolbar.tsx

@@ -4,13 +4,22 @@ import { Table } from '@tanstack/react-table'
 
 import { Input } from '@/components/ui/input'
 import { DataTableViewOptions } from './data-table-view-options'
-import { DataTableFacetedFilter } from './data-table-faceted-filter'
+import {
+	DataTableFacetedFilter,
+	FacetedFilterOption,
+} from './data-table-faceted-filter'
 import { Button } from '../button'
 import { Cross2Icon } from '@radix-ui/react-icons'
 
+export interface DataTableFilter<TData> {
+	column: keyof TData
+	title: string
+	options: FacetedFilterOption[]
+}
+
 interface DataTableToolbarProps<TData> {
 	table: Table<TData>
-	filters?: { column: keyof TData }[]
+	filters?: DataTableFilter<TData>[]
 }
 
 export function DataTableToolbar<TData>({
@@ -30,28 +39,15 @@ export function DataTableToolbar<TData>({
 					}
 					className="h-8 w-[150px] lg:w-[250px]"
 				/>
+
 				{filters?.map((filter) => (
 					<DataTableFacetedFilter
 						column={table.getColumn(filter.column as string)}
-						title="Merchant"
-						options={[{ label: 'test', value: 'test' }]}
+						title={filter.title}
+						options={filter.options}
 					/>
 				))}
 
-				{/* {table.getColumn('merchantName') && (
-					<DataTableFacetedFilter
-						column={table.getColumn('merchantName')}
-						title="Merchant"
-						options={statuses}
-					/>
-				)}
-				{table.getColumn('date') && (
-					<DataTableFacetedFilter
-						column={table.getColumn('date')}
-						title="Date"
-						options={priorities}
-					/>
-				)} */}
 				{isFiltered && (
 					<Button
 						variant="outline"

src/components/ui/data-table/data-table.tsx

@@ -12,11 +12,11 @@ import {
 } from '@/components/ui/table'
 
 import { DataTablePagination } from './data-table-pagination'
-import { DataTableToolbar } from './data-table-toolbar'
+import { DataTableFilter, DataTableToolbar } from './data-table-toolbar'
 
 interface DataTableProps<TData> {
 	table: Table<TData>
-	filters?: { column: keyof TData }[]
+	filters?: DataTableFilter<TData>[]
 }
 
 export function DataTable<TData>({ table, filters }: DataTableProps<TData>) {