smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Table updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-11-10 13:32:31 -06:00
parent 3e59cccfd5
commit 0397c0e1b0
7 changed files with 271 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
package-lock.json generated
View File

@@ -10,11 +10,11 @@
"dependencies": {
"@gfazioli/mantine-text-animate": "^2.3.3",
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.3.6",
"@mantine/dates": "^8.3.6",
"@mantine/form": "^8.3.6",
"@mantine/hooks": "^8.3.6",
"@mantine/notifications": "^8.3.6",
"@mantine/core": "^8.3.7",
"@mantine/dates": "^8.3.7",
"@mantine/form": "^8.3.7",
"@mantine/hooks": "^8.3.7",
"@mantine/notifications": "^8.3.7",
"@tanstack/react-query": "^5.90.7",
"@tanstack/react-query-devtools": "^5.90.2",
"@tanstack/react-query-persist-client": "^5.90.9",
@@ -25,7 +25,7 @@
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.9.5",
"recharts": "^3.3.0"
"recharts": "^3.4.1"
},
"devDependencies": {
"@types/node": "^24.10.0",
@@ -898,9 +898,9 @@
}
},
"node_modules/@mantine/core": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.6.tgz",
"integrity": "sha512-paTl+0x+O/QtgMtqVJaG8maD8sfiOdgPmLOyG485FmeGZ1L3KMdEkhxZtmdGlDFsLXhmMGQ57ducT90bvhXX5A==",
"version": "8.3.7",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.7.tgz",
"integrity": "sha512-7gUTiUrD0pukpkSNvScGi/e+pBuBWYJP5yFHT4TFf1fmaQAA7PbNoAzUeEkPbVromDtK0VdEcpRlYpDnJhpz2g==",
"license": "MIT",
"peer": true,
"dependencies": {
@@ -912,31 +912,31 @@
"type-fest": "^4.41.0"
},
"peerDependencies": {
"@mantine/hooks": "8.3.6",
"@mantine/hooks": "8.3.7",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/dates": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.6.tgz",
"integrity": "sha512-lSi1zvyL86SKeePH0J3vOjAR7ZIVNOrZm6ja7jAH6IBdcpQOKH8TXbrcAi5okEStvmvkne7pVaGu0VkdE8KnAw==",
"version": "8.3.7",
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.7.tgz",
"integrity": "sha512-dyCvkn0aYvvZ8/bUm6EGl9epJ4pq398pzJ/wexzFPHuFdLq/kdIe5zurp/puNcn4CHraglYUflDqj0j8d9aadA==",
"license": "MIT",
"dependencies": {
"clsx": "^2.1.1"
},
"peerDependencies": {
"@mantine/core": "8.3.6",
"@mantine/hooks": "8.3.6",
"@mantine/core": "8.3.7",
"@mantine/hooks": "8.3.7",
"dayjs": ">=1.0.0",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/form": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.6.tgz",
"integrity": "sha512-hIu0KdP1e1Vu7KUQ+cIDpor9UE9vO7iXR3dOMu6GPF3MlHFbwnCjakW9nxSCjP1PRTMwA3m43s4GIt22XfK9tg==",
"version": "8.3.7",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.7.tgz",
"integrity": "sha512-LWC1hlVAfgWtrbCNSoGmo+c8IIXAsLSR2KS25QaIfvRVeMeG1I+RheHK/6VmqKEWChpQzjc346gi4LNApbWRZg==",
"license": "MIT",
"dependencies": {
"fast-deep-equal": "^3.1.3",
@@ -947,9 +947,9 @@
}
},
"node_modules/@mantine/hooks": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.6.tgz",
"integrity": "sha512-liHfaWXHAkLjJy+Bkr29UsCwAoDQ/a64WrM67lksx8F0qqyjR5RQH8zVlhuOjdpQnwtlUkE/YiTvbJiPcoI0bw==",
"version": "8.3.7",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.7.tgz",
"integrity": "sha512-2xnKS8C6fTzMoq1dtOJGrh2bIBuWnVrijL/DsDk60UaUgbABh8zScwU5ndX+p02ds2bebo34LovscP9fH38uPg==",
"license": "MIT",
"peer": true,
"peerDependencies": {
@@ -957,25 +957,25 @@
}
},
"node_modules/@mantine/notifications": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.6.tgz",
"integrity": "sha512-d3A96lyrFOVXtrwASEXALfzooKnnA60T2LclMXFF/4k27Ay5Hwza4D+ylqgxf0RkPfF9J6LhBXk72OjL5RH5Kg==",
"version": "8.3.7",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.7.tgz",
"integrity": "sha512-NvG9nVfsdoAGbyFxmb/2cCED91N6QVCUsasdcFhpBb5KNMjQbNjwXLVKgvdAA3Fhnjzcc6SF2CdxgTN625kFRA==",
"license": "MIT",
"dependencies": {
"@mantine/store": "8.3.6",
"@mantine/store": "8.3.7",
"react-transition-group": "4.4.5"
},
"peerDependencies": {
"@mantine/core": "8.3.6",
"@mantine/hooks": "8.3.6",
"@mantine/core": "8.3.7",
"@mantine/hooks": "8.3.7",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/store": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.6.tgz",
"integrity": "sha512-fo86wF6nL8RPukY8cseAFQKk+bRVv3Ga/WmHJMYRsCbNleZOEZMXXUf/OVhmr1D3t+xzCzAlJe/sQ8MIS+c+pA==",
"version": "8.3.7",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.7.tgz",
"integrity": "sha512-YOK+LW7ZVHv1c/bOnStraJbyh7+uRSeo1DG2eH9M+EllXJfNG8bVhOfrnnraYZ1rbbvD/66/hSZkAZJbZeTOAw==",
"license": "MIT",
"peerDependencies": {
"react": "^18.x || ^19.x"
@@ -3601,10 +3601,13 @@
}
},
"node_modules/recharts": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.3.0.tgz",
"integrity": "sha512-Vi0qmTB0iz1+/Cz9o5B7irVyUjX2ynvEgImbgMt/3sKRREcUM07QiYjS1QpAVrkmVlXqy5gykq4nGWMz9AS4Rg==",
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.4.1.tgz",
"integrity": "sha512-35kYg6JoOgwq8sE4rhYkVWwa6aAIgOtT+Ob0gitnShjwUwZmhrmy7Jco/5kJNF4PnLXgt9Hwq+geEMS+WrjU1g==",
"license": "MIT",
"workspaces": [
"www"
],
"dependencies": {
"@reduxjs/toolkit": "1.x.x || 2.x.x",
"clsx": "^2.1.1",

12
package.json
View File

@@ -12,11 +12,11 @@
"dependencies": {
"@gfazioli/mantine-text-animate": "^2.3.3",
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.3.6",
"@mantine/dates": "^8.3.6",
"@mantine/form": "^8.3.6",
"@mantine/hooks": "^8.3.6",
"@mantine/notifications": "^8.3.6",
"@mantine/core": "^8.3.7",
"@mantine/dates": "^8.3.7",
"@mantine/form": "^8.3.7",
"@mantine/hooks": "^8.3.7",
"@mantine/notifications": "^8.3.7",
"@tanstack/react-query": "^5.90.7",
"@tanstack/react-query-devtools": "^5.90.2",
"@tanstack/react-query-persist-client": "^5.90.9",
@@ -27,7 +27,7 @@
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.9.5",
"recharts": "^3.3.0"
"recharts": "^3.4.1"
},
"devDependencies": {
"@types/node": "^24.10.0",

37
src/components/DataTable/DataTable.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Group, Text } from '@mantine/core';
import { Button, Group, ScrollArea, Text } from '@mantine/core';
import {
type ColumnFiltersState,
flexRender,
@@ -11,6 +11,7 @@ import {
useReactTable,
} from '@tanstack/react-table';
import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
import { scrollAreaClasses } from 'styles';
import { Filter } from './components';
export function DataTable({
@@ -62,8 +63,19 @@ export function DataTable({
}
}, [filtersEnabled]);
return (
<ScrollArea
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
styles={{
scrollbar: {
paddingTop: '2.5rem',
paddingBottom: '2rem',
},
}}
>
<table
style={{
width: '100%',
borderSpacing: '2px 0px',
backgroundColor: 'var(--mantine-color-accent-0)',
}}
@@ -118,10 +130,23 @@ export function DataTable({
}}
>
<Group align='center' justify='center'>
{flexRender(header.column.columnDef.header, header.getContext())}
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{{
asc: ' 🔼',
desc: ' 🔽',
asc: (
<Group gap={0}>
<Text c={'var(--mantine-color-accent-0)'}>🠗</Text>
<Text>🠕</Text>
</Group>
),
desc: (
<Group gap={0}>
<Text>🠗</Text>
<Text c={'var(--mantine-color-accent-0)'}>🠕</Text>
</Group>
),
}[header.column.getIsSorted() as string] ?? null}
</Group>
</Button>
@@ -181,7 +206,6 @@ export function DataTable({
))}
<tr
style={{
width: '100%',
backgroundColor: 'var(--mantine-color-primary-0)',
position: 'sticky',
bottom: 0,
@@ -195,11 +219,12 @@ export function DataTable({
textAlign: 'center',
}}
>
Total Entries: {table.getRowCount()}
Total Entries: {table.getCoreRowModel().rows.length}
</Text>
</td>
</tr>
</tfoot>
</table>
</ScrollArea>
);
}

19
src/components/DataTable/components/Filter.tsx
View File

@@ -13,7 +13,7 @@ import {
import { DatePickerInput } from '@mantine/dates';
import type { Column, RowData } from '@tanstack/react-table';
import { DebouncedInput } from 'components';
import { selectClasses } from 'styles';
import { datePickerInputClasses, selectClasses } from 'styles';
declare module '@tanstack/react-table' {
//allows us to define custom properties for our columns
@@ -57,16 +57,7 @@ export function Filter({
<DatePickerInput
type='range'
clearable
style={{
width: '100%',
}}
styles={{
input: {
borderRadius: 0,
border: 'none',
color: 'var(--mantine-color-primary-0)',
},
}}
classNames={datePickerInputClasses}
value={columnFilterValue as [Date, Date]}
onChange={(value) => column.setFilterValue(value)}
/>
@@ -99,6 +90,12 @@ export function Filter({
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
styles={{
input: {
border: 'none',
borderRadius: 0,
},
}}
data={options
.map((option: ComboboxItem) => {
return { value: option, label: option };

12
src/components/DebouncedInput.tsx
View File

@@ -1,6 +1,7 @@
import { ActionIcon, TextInput } from '@mantine/core';
import { useEffect, useState } from 'react';
import { FiX } from 'react-icons/fi';
import { textInputClasses } from 'styles';
export function DebouncedInput({
value: initialValue,
@@ -34,11 +35,20 @@ export function DebouncedInput({
p={0}
onClick={(e) => e.stopPropagation()}
onChange={(e) => setValue(e.target.value)}
classNames={textInputClasses}
styles={{
input: {
borderRadius: 0,
border: 'none',
borderStyle: 'none',
color: 'var(--mantine-color-primary-0)',
'&::placeholder': {
color: 'red !important',
},
},
wrapper: {
'&::placeholder': {
color: 'red !important',
},
},
}}
rightSection={

55
src/styles/DatePickerInput.module.css Normal file
View File

@@ -0,0 +1,55 @@
.input {
border-radius: 0 !important;
border: none !important;
color: var(--mantine-color-primary-0) !important;
}
.levelsGroup {
background-color: var(--mantine-color-background-0) !important;
}
.day {
color: var(--mantine-color-primary-0) !important;
&:hover {
color: var(--mantine-color-background-0) !important;
background-color: var(--mantine-color-primary-0) !important;
}
&[data-weekend="true"] {
color: var(--mantine-color-accent-0) !important;
}
}
.monthsListControl {
color: var(--mantine-color-primary-0) !important;
&:hover {
color: var(--mantine-color-background-0) !important;
background-color: var(--mantine-color-primary-0) !important;
}
&[data-weekend="true"] {
color: var(--mantine-color-accent-0) !important;
}
}
.yearsListControl {
color: var(--mantine-color-primary-0) !important;
&:hover {
color: var(--mantine-color-background-0) !important;
background-color: var(--mantine-color-primary-0) !important;
}
&[data-weekend="true"] {
color: var(--mantine-color-accent-0) !important;
}
}
.weekday {
color: var(--mantine-color-border-0) !important;
}
.calendarHeaderControl {
color: var(--mantine-color-primary-0) !important;
&:hover {
color: var(--mantine-color-background-0) !important;
background-color: var(--mantine-color-primary-0) !important;
}
}
.calendarHeaderLevel {
color: var(--mantine-color-primary-0) !important;
&:hover {
color: var(--mantine-color-background-0) !important;
background-color: var(--mantine-color-primary-0) !important;
}
}

2
src/styles/index.ts
View File

@@ -3,6 +3,7 @@ import boxClasses from './Box.module.css';
import buttonClasses from './Button.module.css';
import cardClasses from './Card.module.css';
import colorSwatchClasses from './ColorSwatch.module.css';
import datePickerInputClasses from './DatePickerInput.module.css';
import menuClasses from './Menu.module.css';
import modalClasses from './Modal.module.css';
import multiSelectClasses from './MultiSelect.module.css';
@@ -23,6 +24,7 @@ export {
buttonClasses,
cardClasses,
colorSwatchClasses,
datePickerInputClasses,
menuClasses,
modalClasses,
multiSelectClasses,