diff --git a/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css b/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css index 1dae32293..8cc385f38 100644 --- a/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css +++ b/apps/tup-ui/src/pages/Dashboard/Dashboard.module.css @@ -44,8 +44,8 @@ display: grid; gap: 25px; grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; - grid-template-areas: + grid-template-rows: auto 1fr; + grid-template-areas: "projects" "tickets"; diff --git a/libs/tup-components/src/news/UserNews.tsx b/libs/tup-components/src/news/UserNews.tsx index e6c21fade..941de6e99 100644 --- a/libs/tup-components/src/news/UserNews.tsx +++ b/libs/tup-components/src/news/UserNews.tsx @@ -7,6 +7,8 @@ import { } from '@tacc/core-components'; import styles from './UserNews.module.css'; +const NEWS_DASHBOARD_DISPLAY_LIMIT = 3; + const formatDate = (datestring: string): string => { const date = new Date(datestring); return date.toLocaleDateString('en-US', { @@ -27,13 +29,13 @@ const ViewAllUpdates = () => ( target="_blank" rel="noopener noreferrer" > - View All Updates + View all Updates ); const UserNews: React.FC = () => { const { data, isLoading } = useUserNews(); - const maxItems = 5; + const maxItems = NEWS_DASHBOARD_DISPLAY_LIMIT; if (isLoading) return ; return ( diff --git a/libs/tup-components/src/projects/ProjectsTable.tsx b/libs/tup-components/src/projects/ProjectsTable.tsx index 5cfa4cbd8..0c0d2d7cd 100644 --- a/libs/tup-components/src/projects/ProjectsTable.tsx +++ b/libs/tup-components/src/projects/ProjectsTable.tsx @@ -4,6 +4,8 @@ import { ProjectsAllocations, useProjects } from '@tacc/tup-hooks'; import { Link } from 'react-router-dom'; import { EmptyTablePlaceholder } from '../utils'; +const PROJECTS_DASHBOARD_DISPLAY_LIMIT = 7; + const allocationDisplay = (allocations: ProjectsAllocations[]) => { return allocations.length ? Array.from( @@ -18,9 +20,11 @@ const allocationDisplay = (allocations: ProjectsAllocations[]) => { export const ProjectsTable: React.FC = () => { const { data, isLoading, error } = useProjects(); - const projectData = data?.filter((prj) => - prj.allocations?.some((alloc) => alloc.status === 'Active') - ); + const projectData = data + ?.filter((prj) => + prj.allocations?.some((alloc) => alloc.status === 'Active') + ) + .slice(0, PROJECTS_DASHBOARD_DISPLAY_LIMIT); if (isLoading) { return ; diff --git a/libs/tup-components/src/tickets/TicketsDashboard.module.css b/libs/tup-components/src/tickets/TicketsDashboard.module.css new file mode 100644 index 000000000..9e809aa8c --- /dev/null +++ b/libs/tup-components/src/tickets/TicketsDashboard.module.css @@ -0,0 +1,4 @@ +.viewall-action { + margin-left: auto; + margin-right: 1em; +} diff --git a/libs/tup-components/src/tickets/TicketsDashboard.tsx b/libs/tup-components/src/tickets/TicketsDashboard.tsx index 0b7cf53ab..dc5500f54 100644 --- a/libs/tup-components/src/tickets/TicketsDashboard.tsx +++ b/libs/tup-components/src/tickets/TicketsDashboard.tsx @@ -1,16 +1,24 @@ -import { SectionTableWrapper } from '@tacc/core-components'; import React from 'react'; +import { Link } from 'react-router-dom'; +import { SectionTableWrapper } from '@tacc/core-components'; import TicketCreateModal from './TicketCreateModal'; import { TicketsTable } from './TicketsTable'; +import styles from './TicketsDashboard.module.css'; + const TicketsDashboard: React.FC = () => { return ( - + New Ticket - + <> + + View all Tickets + + + + New Ticket + + } contentShouldScroll > diff --git a/libs/tup-components/src/tickets/TicketsTable.tsx b/libs/tup-components/src/tickets/TicketsTable.tsx index 62c293370..2a88a920e 100644 --- a/libs/tup-components/src/tickets/TicketsTable.tsx +++ b/libs/tup-components/src/tickets/TicketsTable.tsx @@ -6,7 +6,7 @@ import './TicketsTable.global.css'; import { formatDate } from '../utils/timeFormat'; import { EmptyTablePlaceholder } from '../utils'; -const TICKETS_DASHBOARD_DISPLAY_LIMIT = 12; +const TICKETS_DASHBOARD_DISPLAY_LIMIT = 7; export const getStatusText = (status: string) => { switch (status) {