Search History tab

2025-11-06 15:56:43 -06:00
parent ed804a0182
commit 1103a7401d
11 changed files with 947 additions and 860 deletions
--- a/src/components/Columns/SearchHistoryColumns.tsx
+++ b/src/components/Columns/SearchHistoryColumns.tsx
@@ -0,0 +1,119 @@
+import { ActionIcon, Box, Group, Text } from '@mantine/core';
+import { createColumnHelper } from '@tanstack/react-table';
+import { FaFilter, FaTrash } from 'react-icons/fa';
+
+const columnHelper = createColumnHelper<any>();
+export const SearchHistoryColumns = (
+	setSelectedItem: React.Dispatch<React.SetStateAction<any>>,
+	deleteItemOpen: () => void,
+	filtersEnabled: boolean,
+	setFiltersEnabled: React.Dispatch<React.SetStateAction<boolean>>,
+) => [
+	columnHelper.accessor('id', {
+		cell: ({ row }: any) => (
+			<Group gap={0} justify='center'>
+				<ActionIcon
+					color={'red'}
+					c={'black'}
+					onClick={() => {
+						setSelectedItem(row.original);
+						deleteItemOpen();
+					}}
+				>
+					<FaTrash />
+				</ActionIcon>
+			</Group>
+		),
+		header: () => (
+			<Group gap={0} justify='center'>
+				<Box
+					w={'1.75rem'}
+					h={'1.75rem'}
+					style={{
+						borderRadius: 4,
+						backgroundColor: 'var(--mantine-color-accent-0)',
+						alignContent: 'center',
+						justifyContent: 'center',
+					}}
+					onClick={(e) => {
+						e.stopPropagation();
+						e.preventDefault();
+						setFiltersEnabled(!filtersEnabled);
+					}}
+				>
+					<FaFilter />
+				</Box>
+			</Group>
+		),
+		size: 64,
+		maxSize: 64,
+		enableSorting: false,
+	}),
+	columnHelper.accessor('prefix', {
+		id: 'prefix',
+		cell: ({ cell }: any) => (
+			<Group justify='center'>
+				<Text>{cell.getValue()}</Text>
+			</Group>
+		),
+		header: () => <Text fw={600}>Prefix</Text>,
+		meta: {
+			filterVariant: 'mantineSelect',
+		},
+		filterFn: (row, id, value) => {
+			if (value === null) return true;
+			return row.getValue(id) === value;
+		},
+	}),
+	columnHelper.accessor('provider', {
+		id: 'provider',
+		cell: ({ cell }: any) => <Text mx={8}>{cell.getValue()}</Text>,
+		header: () => <Text fw={600}>Provider</Text>,
+		meta: {
+			filterVariant: 'mantineSelect',
+		},
+	}),
+	columnHelper.accessor('searchTerm', {
+		id: 'searchTerm',
+		cell: ({ cell }: any) => (
+			<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
+				{cell.getValue()}
+			</Text>
+		),
+		header: () => <Text fw={600}>Search String</Text>,
+		meta: {
+			filterVariant: 'text',
+		},
+	}),
+	columnHelper.accessor('dateTimeStamp', {
+		id: 'dateTimeStamp',
+		cell: ({ cell }: any) => {
+			const m = new Date(cell.getValue());
+			const year = `${m.getUTCFullYear()}`.slice(-2);
+			const month = `0${m.getUTCMonth() + 1}`.slice(-2);
+			const day = `0${m.getUTCDate()}`.slice(-2);
+			const hours = `0${m.getUTCHours()}`.slice(-2);
+			const minutes = `0${m.getUTCMinutes()}`.slice(-2);
+			const dateString = `${month}/${day}/${year} ${hours}:${minutes}`;
+
+			return (
+				<Group justify='center'>
+					<Text mx={8}>{dateString}</Text>
+				</Group>
+			);
+		},
+		header: () => <Text fw={600}>Time Stamp</Text>,
+		meta: {
+			filterVariant: 'range',
+		},
+		filterFn: (row, id, value) => {
+			const startDate = new Date(value[0]);
+			const endDate = new Date(value[1]);
+			const cellDate = new Date(row.getValue(id));
+			if (value[0] && value[1]) {
+				return cellDate >= startDate && cellDate <= endDate;
+			}
+			return true;
+		},
+	}),
+];