display total amount

theloosecollective · Jan 28, 2024 · bec2b08 · bec2b08
1 parent bc84d23
commit bec2b08
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 12 deletions.
diff --git a/electron/main/models/transactions.ts b/electron/main/models/transactions.ts
@@ -44,7 +44,13 @@ export async function fetchTransactions({
 		})
 	}
 
-	const [results, total] = await Promise.all([
+	const [
+		results,
+		total,
+		{
+			_sum: { amount: totalAmount },
+		},
+	] = await Promise.all([
 		prisma.transaction.findMany({
 			orderBy: {
 				[sortColumn]: sort,
@@ -54,13 +60,12 @@ export async function fetchTransactions({
 			where,
 			include: { account: true },
 		}),
-		prisma.transaction.count({
-			where,
-		}),
+		prisma.transaction.count({ where }),
+		prisma.transaction.aggregate({ where, _sum: { amount: true } }),
 	])
 
 	const pageCount = Math.ceil(total / pageSize)
-	return { results, total, pageCount }
+	return { results, total, pageCount, totalAmount }
 }
 
 export async function hideTransaction(plaidId: string) {

diff --git a/src/components/columns.tsx b/src/components/columns.tsx
@@ -22,15 +22,15 @@ export const transactionColumns: ColumnDef<TransactionType>[] = [
 				}
 				onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
 				aria-label="Select all"
-				className="translate-y-[2px]"
+				className="text-2xl data-[state=checked]:translate-y-[2px] data-[state=indeterminate]:translate-y-[2px]"
 			/>
 		),
 		cell: ({ row }) => (
 			<Checkbox
 				checked={row.getIsSelected()}
 				onCheckedChange={(value) => row.toggleSelected(!!value)}
 				aria-label="Select row"
-				className="translate-y-[2px]"
+				className="data-[state=checked]:translate-y-[2px]"
 			/>
 		),
 		enableSorting: false,

diff --git a/src/components/pages/TablePage.tsx b/src/components/pages/TablePage.tsx
@@ -5,6 +5,7 @@ import { useDataTable, useDataTableInput } from '@/lib/useDataTable'
 import { SelectionOverlay } from '../SelectionOverlay'
 import { useEffect, useState } from 'react'
 import { Transaction } from '@prisma/client'
+import { formatMoney } from './ChartPage'
 
 export function TablePage() {
 	const [input, setInput] = useDataTableInput()
@@ -51,6 +52,12 @@ export function TablePage() {
 							})) ?? [],
 					},
 				]}
+				metadata={
+					<>
+						Total Amount:{' '}
+						{data?.totalAmount ? formatMoney(data?.totalAmount) : 'N/A'}
+					</>
+				}
 			/>
 
 			{Boolean(selectedRows.length) && (

diff --git a/src/components/ui/data-table/data-table-pagination.tsx b/src/components/ui/data-table/data-table-pagination.tsx
@@ -17,16 +17,18 @@ import {
 
 interface DataTablePaginationProps<TData> {
 	table: Table<TData>
+	metadata?: React.ReactNode
 }
 
 export function DataTablePagination<TData>({
 	table,
+	metadata,
 }: DataTablePaginationProps<TData>) {
 	return (
 		<div className="flex items-center justify-between mx-3 mb-3">
 			<div className="flex-1 text-muted-foreground">
 				{table.getFilteredSelectedRowModel().rows.length} of{' '}
-				{table.getFilteredRowModel().rows.length} row(s) selected.
+				{table.getFilteredRowModel().rows.length} row(s) selected. {metadata}
 			</div>
 			<div className="flex items-center space-x-6 lg:space-x-8">
 				<div className="flex items-center space-x-2">

diff --git a/src/components/ui/data-table/data-table.tsx b/src/components/ui/data-table/data-table.tsx
@@ -17,9 +17,14 @@ import { DataTableFilter, DataTableToolbar } from './data-table-toolbar'
 interface DataTableProps<TData> {
 	table: Table<TData>
 	filters?: DataTableFilter<TData>[]
+	metadata?: React.ReactNode
 }
 
-export function DataTable<TData>({ table, filters }: DataTableProps<TData>) {
+export function DataTable<TData>({
+	table,
+	filters,
+	metadata,
+}: DataTableProps<TData>) {
 	return (
 		<>
 			<DataTableToolbar table={table} filters={filters} />
@@ -75,7 +80,7 @@ export function DataTable<TData>({ table, filters }: DataTableProps<TData>) {
 				</UITable>
 			</div>
 
-			<DataTablePagination table={table} />
+			<DataTablePagination table={table} metadata={metadata} />
 		</>
 	)
 }
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
 	<th
 		ref={ref}
 		className={cn(
-			'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', // [&>[role=checkbox]]:translate-y-[2px]',
 			className,
 		)}
 		{...props}
@@ -88,7 +88,7 @@ const TableCell = React.forwardRef<
 	<td
 		ref={ref}
 		className={cn(
-			'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+			'p-2 align-middle [&:has([role=checkbox])]:pr-0', // [&>[role=checkbox]]:translate-y-[2px]',
 			className,
 		)}
 		{...props}