diff --git a/client/eslint.config.js b/client/eslint.config.js index 60b2b9a5..f1e4068c 100644 --- a/client/eslint.config.js +++ b/client/eslint.config.js @@ -56,6 +56,11 @@ export default defineConfig([ message: 'Use Tooltip from @/components/ui/overrides/tooltip', }, + { + name: '@/components/ui/card', + message: + 'Use Card from @/components/ui/overrides/card', + }, { name: 'sonner', importNames: ['toast'], diff --git a/client/src/components/data-table/DataTable.tsx b/client/src/components/data-table/DataTable.tsx index 845f153e..ff15e2c0 100644 --- a/client/src/components/data-table/DataTable.tsx +++ b/client/src/components/data-table/DataTable.tsx @@ -112,7 +112,7 @@ export function DataTable({ }) return ( -
+
{toolbarConfig && ( )} diff --git a/client/src/components/data-table/DataTablePagination.tsx b/client/src/components/data-table/DataTablePagination.tsx index 35eb04b0..543b5f9e 100644 --- a/client/src/components/data-table/DataTablePagination.tsx +++ b/client/src/components/data-table/DataTablePagination.tsx @@ -19,40 +19,73 @@ interface DataTablePaginationProps { table: Table } +const getDisplayedPagesText = (table: Table) => { + const pageCount = table.getPageCount() + if (pageCount === 0) return `Page 1 of 1` + + const pageIndex = table.getState().pagination.pageIndex + return `Page ${String(pageIndex + 1)} of ${String(pageCount)}` +} + +const getDisplayedRowsText = (table: Table) => { + const totalRows = table.getFilteredRowModel().rows.length + if (totalRows === 0) return `0 rows` + + const pageIndex = table.getState().pagination.pageIndex + const pageSize = table.getState().pagination.pageSize + const startRow = pageIndex * pageSize + 1 + const endRow = Math.min((pageIndex + 1) * pageSize, totalRows) + + return `${String(startRow)}-${String(endRow)} of ${String(totalRows)} row(s)` +} + export function DataTablePagination({ table, }: DataTablePaginationProps) { return ( -
- {table.getAllColumns().find((column) => column.id === 'select') ? ( -
- {table.getFilteredSelectedRowModel().rows.length} of{' '} - {table.getFilteredRowModel().rows.length} row(s) selected +
+
+
+ {getDisplayedPagesText(table)} +
+
+ {table + .getAllColumns() + .find((column) => column.id === 'select') ? ( +
+ {table.getFilteredSelectedRowModel().rows.length} of{' '} + {table.getFilteredRowModel().rows.length} row(s) + selected +
+ ) : ( +
+ {getDisplayedRowsText(table)} +
+ )}
- ) : ( -
- )} -
-
-

Rows per page

+
+
+
+

Page size

-
- Page {table.getState().pagination.pageIndex + 1} of{' '} - {table.getPageCount()} -
-
+
- )} -
-
+ )} +
{(config.showViewOptions ?? true) && ( - +
+ +
)} + {config.actions && ( +
+ {config.actions.map((action, index) => ( + + ))} +
+ )} +
+ {hasSecondaryControls && ( +
+ {config.filters?.map((filter) => { + const column = table.getColumn(filter.columnId) + return column ? ( + + ) : null + })} + {isFiltered && ( + + )} +
+ )} +
{config.actions?.map((action, index) => ( diff --git a/client/src/components/exercises/ExercisesTable.tsx b/client/src/components/exercises/ExercisesTable.tsx index 8bc02f65..4f588b06 100644 --- a/client/src/components/exercises/ExercisesTable.tsx +++ b/client/src/components/exercises/ExercisesTable.tsx @@ -202,7 +202,7 @@ export function ExercisesTable({ )}
diff --git a/client/src/components/ui/overrides/card.tsx b/client/src/components/ui/overrides/card.tsx new file mode 100644 index 00000000..cd0364cc --- /dev/null +++ b/client/src/components/ui/overrides/card.tsx @@ -0,0 +1,95 @@ +import * as React from 'react' + +import { + Card as UICard, + CardAction as UICardAction, + CardContent as UICardContent, + CardDescription as UICardDescription, + CardFooter as UICardFooter, + CardHeader as UICardHeader, + CardTitle as UICardTitle, +} from '@/components/ui/card' +import { cn } from '@/lib/utils' + +type CardProps = React.ComponentProps +type CardHeaderProps = React.ComponentProps +type CardTitleProps = React.ComponentProps +type CardDescriptionProps = React.ComponentProps +type CardActionProps = React.ComponentProps +type CardContentProps = React.ComponentProps +type CardFooterProps = React.ComponentProps + +function Card({ className, ...props }: CardProps) { + return ( + + ) +} + +function CardHeader({ className, ...props }: CardHeaderProps) { + return ( + + ) +} + +function CardTitle({ className, ...props }: CardTitleProps) { + return ( + + ) +} + +function CardDescription({ className, ...props }: CardDescriptionProps) { + return +} + +function CardAction({ className, ...props }: CardActionProps) { + return +} + +function CardContent({ className, ...props }: CardContentProps) { + return ( + + ) +} + +function CardFooter({ className, ...props }: CardFooterProps) { + return ( + + ) +} + +export { + Card, + CardAction, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} +export type { + CardActionProps, + CardContentProps, + CardDescriptionProps, + CardFooterProps, + CardHeaderProps, + CardProps, + CardTitleProps, +} diff --git a/client/src/layout/AppLayout.tsx b/client/src/layout/AppLayout.tsx index 2f40850c..2f3d3799 100644 --- a/client/src/layout/AppLayout.tsx +++ b/client/src/layout/AppLayout.tsx @@ -15,7 +15,6 @@ import { NavLink, Outlet } from 'react-router-dom' const navLinks = [ { to: '/', label: 'Dashboard' }, { to: '/exercises', label: 'Exercises' }, - { to: '/docs', label: 'Docs' }, ] export function AppLayout() { @@ -23,8 +22,8 @@ export function AppLayout() { return (
-
-
+
+
RepTrack @@ -77,10 +76,8 @@ export function AppLayout() {
-
-
- -
+
+
diff --git a/client/src/pages/Admin.tsx b/client/src/pages/Admin.tsx index 92a4139a..da324c0a 100644 --- a/client/src/pages/Admin.tsx +++ b/client/src/pages/Admin.tsx @@ -5,7 +5,12 @@ import { UserService, } from '@/api/generated' import { AccessRequestsTable } from '@/components/AccessRequestsTable' -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from '@/components/ui/overrides/card' import { UsersTable } from '@/components/UsersTable' import { handleApiError } from '@/lib/http' import { logger } from '@/lib/logger' @@ -67,11 +72,9 @@ export function Admin() { return (
- + - -

Access Requests

- + Access Requests - + - -

Users

- + Users diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx index 6c0599cc..b49efe8b 100644 --- a/client/src/pages/Dashboard.tsx +++ b/client/src/pages/Dashboard.tsx @@ -4,9 +4,9 @@ export function Dashboard() { const { user } = useSession() return ( -
+

Dashboard

-

Welcome {user?.first_name}

+

Welcome, {user?.first_name}!

) } diff --git a/client/src/pages/Exercises.tsx b/client/src/pages/Exercises.tsx index 8b5ba11b..e20b7795 100644 --- a/client/src/pages/Exercises.tsx +++ b/client/src/pages/Exercises.tsx @@ -5,7 +5,12 @@ import { MuscleGroupService, } from '@/api/generated' import { ExercisesTable } from '@/components/exercises/ExercisesTable' -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { + Card, + CardContent, + CardHeader, + CardTitle, +} from '@/components/ui/overrides/card' import { handleApiError } from '@/lib/http' import { logger } from '@/lib/logger' import { useEffect, useState } from 'react' @@ -58,11 +63,9 @@ export function Exercises() { }, []) return ( - + - -

Exercises

- + Exercises - - - - Forgot Password - + + + Forgot Password
- +