From daa9b373d2e4758b87ab9a1817c2712a8ec87133 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Thu, 17 Oct 2024 19:55:39 -0400
Subject: [PATCH 1/3] Adds additional print styles for more rows

---
 .../FourteenMonthReport.tsx                   |  6 ++++--
 .../Layout/Table/StyledComponents.ts          |  2 +-
 .../Layout/Table/TableHead/TableHead.tsx      | 16 +++++++++++++++-
 .../TableHead/TableHeadCell/TableHeadCell.tsx | 19 +++++++++++++------
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx b/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx
index 9ff10ece4..ce2c03194 100644
--- a/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx
+++ b/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx
@@ -54,6 +54,8 @@ export const FourteenMonthReport: React.FC<Props> = ({
     theme.breakpoints.down('sm'),
   );
 
+  const isPrint = useMediaQuery('print');
+
   const { data, error } = useFourteenMonthReportQuery({
     variables: {
       accountListId,
@@ -117,7 +119,7 @@ export const FourteenMonthReport: React.FC<Props> = ({
       ) : error ? (
         <Notification type="error" message={error.toString()} />
       ) : currencyTables.length > 0 ? (
-        <Box display="flex" flexDirection="column" gap={4}>
+        <Box display="flex" flexDirection="column" gap={isPrint ? 1 : 4}>
           {currencyTables.map(({ currency, orderedContacts, totals }) => (
             <Table
               key={currency}
@@ -135,7 +137,7 @@ export const FourteenMonthReport: React.FC<Props> = ({
       ) : (
         <EmptyReport
           title={t(
-            'You have received no donations in the last fourteen months',
+            'You have received no donations in the last thirteen months',
           )}
           subTitle={t(
             'You can setup an organization account to import them or add a new donation.',
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/StyledComponents.ts b/src/components/Reports/FourteenMonthReports/Layout/Table/StyledComponents.ts
index 5174b8d10..f60c9f325 100644
--- a/src/components/Reports/FourteenMonthReports/Layout/Table/StyledComponents.ts
+++ b/src/components/Reports/FourteenMonthReports/Layout/Table/StyledComponents.ts
@@ -3,6 +3,6 @@ import { styled } from '@mui/material/styles';
 
 export const StyledTableCell = styled(TableCell)(({}) => ({
   '@media print': {
-    padding: '8px',
+    padding: '4px',
   },
 }));
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx
index a72c9d0c1..637a4c532 100644
--- a/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx
+++ b/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHead.tsx
@@ -29,10 +29,24 @@ export interface FourteenMonthReportTableHeadProps {
 
 const YearTableCell = styled(TableCell)(({}) => ({
   paddingLeft: 0,
+  '@media print': {
+    padding: '0px',
+  },
 }));
 
 const YearTypography = styled(Typography)(({ theme }) => ({
   borderLeft: `1px solid ${theme.palette.cruGrayLight.main}`,
+  '@media print': {
+    lineHeight: 1,
+    fontSize: '1rem',
+  },
+}));
+
+const CurrencyTypography = styled(Typography)(() => ({
+  '@media print': {
+    lineHeight: 1,
+    fontSize: '1rem',
+  },
 }));
 
 export const FourteenMonthReportTableHead: FC<
@@ -69,7 +83,7 @@ export const FourteenMonthReportTableHead: FC<
     <TableHead data-testid="SalaryReportTableHead">
       <TableRow>
         <StyledTableCell>
-          <Typography variant="h6">{salaryCurrency}</Typography>
+          <CurrencyTypography variant="h6">{salaryCurrency}</CurrencyTypography>
         </StyledTableCell>
         {isExpanded && (
           <>
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHeadCell/TableHeadCell.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHeadCell/TableHeadCell.tsx
index d77ec46b3..6e34a5295 100644
--- a/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHeadCell/TableHeadCell.tsx
+++ b/src/components/Reports/FourteenMonthReports/Layout/Table/TableHead/TableHeadCell/TableHeadCell.tsx
@@ -30,6 +30,17 @@ const PrintableTableSortLabel = styled(TableSortLabel)(() => ({
   },
 }));
 
+const TableCell = styled(StyledTableCell)(() => ({
+  top: 65,
+  position: 'sticky',
+  '@media print': {
+    position: 'static',
+    top: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+}));
+
 const HeadCellSpan = styled('span')(() => ({
   border: 0,
   clip: 'rect(0 0 0 0)',
@@ -54,11 +65,7 @@ export const TableHeadCell: React.FC<FourteenMonthReportTableCellProps> = ({
   onClick,
 }) => {
   return (
-    <StyledTableCell
-      align={align}
-      sortDirection={sortDirection}
-      style={{ top: 65 }}
-    >
+    <TableCell align={align} sortDirection={sortDirection}>
       <PrintableTableSortLabel
         active={isActive}
         direction={direction}
@@ -71,6 +78,6 @@ export const TableHeadCell: React.FC<FourteenMonthReportTableCellProps> = ({
           </HeadCellSpan>
         )}
       </PrintableTableSortLabel>
-    </StyledTableCell>
+    </TableCell>
   );
 };

From d9b3821ed73b2ac9f361b38a70f0770e26c232e0 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Fri, 18 Oct 2024 09:05:54 -0400
Subject: [PATCH 2/3] Update EmptyReport title.

---
 .../Reports/FourteenMonthReports/FourteenMonthReport.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx b/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx
index ce2c03194..9b62b2881 100644
--- a/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx
+++ b/src/components/Reports/FourteenMonthReports/FourteenMonthReport.tsx
@@ -137,7 +137,7 @@ export const FourteenMonthReport: React.FC<Props> = ({
       ) : (
         <EmptyReport
           title={t(
-            'You have received no donations in the last thirteen months',
+            'You have received no donations in the last fourteen months',
           )}
           subTitle={t(
             'You can setup an organization account to import them or add a new donation.',

From 2f3112a7a545e7eb3a5143a33fba400631ac90a0 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Mon, 21 Oct 2024 10:41:14 -0400
Subject: [PATCH 3/3] Print styles for topBar, update color of partner name

---
 src/components/Layouts/Primary/TopBar/TopBar.tsx       |  7 ++++++-
 .../FourteenMonthReports/Layout/Header/Header.tsx      |  5 ++++-
 .../FourteenMonthReports/Layout/Table/Table.tsx        | 10 ++++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Layouts/Primary/TopBar/TopBar.tsx b/src/components/Layouts/Primary/TopBar/TopBar.tsx
index 6a250a2ea..9d0ff9077 100644
--- a/src/components/Layouts/Primary/TopBar/TopBar.tsx
+++ b/src/components/Layouts/Primary/TopBar/TopBar.tsx
@@ -23,7 +23,12 @@ interface TopBarProps {
   onMobileNavOpen?: () => void;
 }
 
-const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);
+const Offset = styled('div')(({ theme }) => ({
+  ...theme.mixins.toolbar,
+  '@media print': {
+    display: 'none',
+  },
+}));
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.cruGrayDark.main,
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Header/Header.tsx b/src/components/Reports/FourteenMonthReports/Layout/Header/Header.tsx
index 638aace5a..85b53f674 100644
--- a/src/components/Reports/FourteenMonthReports/Layout/Header/Header.tsx
+++ b/src/components/Reports/FourteenMonthReports/Layout/Header/Header.tsx
@@ -24,7 +24,10 @@ const StickyHeader = styled(Box)(({}) => ({
   top: 0,
   height: 96,
   '@media print': {
-    paddingTop: '0',
+    position: 'static',
+    paddingTop: '1rem',
+    paddingBottom: '1rem',
+    height: 'auto',
   },
 }));
 
diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx
index aec93c5d9..d841cb3c2 100644
--- a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx
+++ b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx
@@ -45,6 +45,12 @@ const NameTypography = styled(Typography, {
   },
 }));
 
+const StyledLink = styled(Link)({
+  '@media print': {
+    color: theme.palette.text.primary,
+  },
+});
+
 const PrintableContainer = styled(TableContainer)({
   // First style sets size as landscape
   '@media print': {
@@ -129,13 +135,13 @@ export const FourteenMonthReportTable: React.FC<
                   <Box display="flex" alignItems="center">
                     {!isExpanded && <StyledInfoIcon fontSize="small" />}
                     <NameTypography variant="body1" expanded={isExpanded}>
-                      <Link
+                      <StyledLink
                         onClick={() => onSelectContact(contact.id)}
                         onMouseEnter={preloadContactsRightPanel}
                         underline="hover"
                       >
                         {contact.name}
-                      </Link>
+                      </StyledLink>
                     </NameTypography>
                   </Box>
                   {isExpanded && (