Flesh out Expense Report

- Update the date-calculation algorithm for the endpoint's requirements-
  now it will produce an even list of inclusive dates [start1, end1,
start2, end2, ..., startN, endN].
- Display expense report data with useful CSS.

src/features/Reports/ExpenseReport/ExpenseReport.tsx

@@ -1,11 +1,42 @@
 import React from 'react';
 import { ExpenseReportResponse } from './types/types';
+import dayjs from 'dayjs';
 
 function ExpenseReport(props: { reportData: ExpenseReportResponse }) {
   const { dates, ...accountGroupsToBalances } = props.reportData;
 
+  const displayDates: string[] = [];
+
+  for (let i = 1; i < dates.length; i += 2) {
+    displayDates.push(dayjs(dates[i]).format('MMM. DD, YYYY'));
+  }
+
   return (
     <div className='expense-report'>
+      <h2 style={{ marginBottom: '.25rem' }}>Expense Report</h2>
+      <p style={{ marginTop: 0 }}>
+        From {dates[0]} through {dates.slice(-1)[0]}
+      </p>
+      <div
+        className='expense-report-balance-row'
+        style={{
+          margin: '0 4rem',
+        }}
+      >
+        <span
+          className='expense-report-date-header'
+          style={{ alignSelf: 'center' }}
+        >
+          End Date
+        </span>
+        {displayDates.map((date: string) => {
+          return (
+            <p className='expense-report-date' key={date}>
+              {date}
+            </p>
+          );
+        })}
+      </div>
       {Object.keys(accountGroupsToBalances).map((groupName: string) => {
         return (
           <>

src/features/Reports/ExpenseReport/ExpenseReportForm.tsx

@@ -12,7 +12,7 @@ const EXPENSE_REPORT_ACCOUNT_GROUPS = ['Income', 'Expenses', 'Misc.'];
 
 function ExpenseReportForm(): JSX.Element {
   const today: Date = new Date();
-  const currentMonth: number = today.getMonth();
+  const currentMonth: number = today.getMonth() + 1;
   const currentYear: number = today.getFullYear();
 
   const currentReportData: ExpenseReportResponse | null = useSelector(
@@ -51,25 +51,27 @@ function ExpenseReportForm(): JSX.Element {
     }
 
     dateRanges.push(startDate);
+    let startIndex = 0;
 
     for (let i = 0; i < timesToSkip; i++) {
-      dateRanges.push(dateRanges[i].add(1, frequency));
+      const nextStart: Dayjs = dateRanges[startIndex].add(1, frequency);
+      const currentEnd: Dayjs = nextStart.subtract(1, 'day');
+      dateRanges.push(currentEnd);
+      dateRanges.push(nextStart);
+      startIndex += 2;
     }
 
-    if (
-      endDate.isBefore(dateRanges[timesToSkip]) ||
-      endDate.isSame(dateRanges[timesToSkip])
-    ) {
+    if (endDate.isBefore(dateRanges.slice(-1)[0])) {
       dateRanges.pop();
     }
-    dateRanges.push(endDate);
 
+    if (dateRanges.length % 2 === 1) {
+      dateRanges.push(endDate);
+    }
     const stringDateRanges: string[] = dateRanges.map((date: Dayjs) =>
       date.format('YYYY-MM-DD')
     );
 
-    console.log(stringDateRanges);
-
     thunkDispatch(
       generateExpenseReport(stringDateRanges, EXPENSE_REPORT_ACCOUNT_GROUPS)
     );

src/features/Reports/ExpenseReport/types/types.ts

@@ -4,7 +4,8 @@ export type ExpenseReportResponse = {
       [accountName: string]: number[];
     };
   };
-};
+} & { dates: string[] };
+
 export enum ReportFrequency {
   annually = 'year',
   monthly = 'month',

src/index.css

@@ -731,21 +731,22 @@ nav a:hover {
   border: 1px solid black;
   border-radius: 5px;
   display: flex;
+  flex-wrap: wrap;
   gap: 2rem;
   justify-content: center;
-
-  /* background-color: rgba(0, 0, 0, 0.075); */
 }
 
 .expense-report {
   overflow: scroll;
-  width: 80%;
+  width: fit-content;
+  min-width: 40%;
+  max-width: 80%;
   margin: 2rem auto;
 }
 
 .expense-report-group-name {
   font-weight: bolder;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid grey;
   text-align: left;
 }
 
@@ -759,7 +760,8 @@ nav a:hover {
 .expense-report-account-name {
   font-size: 1rem;
   font-weight: bold;
-  min-width: 20ch;
+  width: 182px;
+  min-width: 100px;
   text-align: right;
 }
 
@@ -770,5 +772,20 @@ nav a:hover {
 }
 
 .expense-report-account-balance {
-  min-width: 10ch;
+  min-width: 12ch;
+}
+
+.expense-report-date-header {
+  font-size: 0.75rem;
+  font-weight: bold;
+  width: 182px;
+  min-width: 100px;
+  text-align: right;
+}
+
+.expense-report-date {
+  font-size: 0.75rem;
+  min-width: 16ch; /*/ 12 / 0.75 = 16ch to match balance 12ch */
+  margin: 0;
+  font-weight: bolder;
 }

src/routes/ExpenseReportPage.tsx

@@ -10,7 +10,6 @@ function ExpenseReportPage(): JSX.Element {
     (state: RootState) => state.expenseReportSlice.currentReport
   );
 
-  console.log(currentReportData);
   return (
     <>
       <h1>Expense Report Page</h1>