Merge pull request #3527 from Northeastern-Electric-Racing/#3526-finance-visual-fixes

numbers and spending bar

Author: chpy04

src/backend/src/utils/finance.utils.ts

@@ -1,9 +1,7 @@
 import { Prisma, Reimbursement_Status_Type } from '@prisma/client';
 import { wbsPipe, SpendingBarData, ReimbursementRequestData } from 'shared';
 import prisma from '../prisma/prisma';
-import { getReimbursementRequestQueryArgs } from '../prisma-query-args/reimbursement-requests.query-args';
 import { NotFoundException } from './errors.utils';
-import { getTeamQueryArgs } from '../prisma-query-args/teams.query-args';
 
 export const getProjectSegmentedWhereInput = (
   organizationId: string,
@@ -214,7 +212,7 @@ export const getReimbursementRequestsByProject = async (
     },
     select: {
       reimbursementStatuses: true,
-      totalCost: true,
+      totalCost: true
     }
   });
 
@@ -314,7 +312,7 @@ export const getReimbursementRequestsByTeam = async (
     },
     select: {
       reimbursementStatuses: true,
-      totalCost: true,
+      totalCost: true
     }
   });
 
@@ -668,7 +666,7 @@ export const getReimbursementRequestCategoryData = async (
     },
     select: {
       reimbursementStatuses: true,
-      totalCost: true,
+      totalCost: true
     }
   });
 

src/frontend/src/apis/finance.api.ts

@@ -293,10 +293,10 @@ export const downloadBlobsToPdf = async (blobData: Blob[], filename: string) =>
   await Promise.all(promises);
 
   // Save the PDF as an ArrayBuffer
-  const pdfBytes = await pdfDoc.save();
+  const pdfBytes: Uint8Array = await pdfDoc.save();
 
   // Convert the ArrayBuffer to a Blob
-  const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
+  const pdfBlob = new Blob([pdfBytes.buffer as ArrayBuffer], { type: 'application/pdf' });
 
   // Save the Blob as a file using file-saver
   saveAs(pdfBlob, filename);

src/frontend/src/pages/FinancePage/FinanceComponents/PieChart.tsx

@@ -203,7 +203,7 @@ const FinancePieChart: React.FC<FinancePieChartProps> = ({
         </Box>
       ) : (
         <>
-          <ResponsiveContainer width="100%" height={300} style={{ background: 'transparent' }}>
+          <ResponsiveContainer width={250} height={250} style={{ background: 'transparent' }}>
             <RechartsPieChart margin={{ top: 0, right: 0, bottom: 20, left: 0 }} style={{ background: 'transparent' }}>
               <Pie
                 data={adjustedData}

src/frontend/src/pages/FinancePage/FinanceComponents/SpendingBar.tsx

@@ -160,7 +160,7 @@ const SpendingBar = ({ data, title, edit }: SpendingBarProps) => {
         align: 'center',
         textAlign: 'center',
         formatter: (value, context) => {
-          const realValue = value - average;
+          const realValue = Math.round((value - average) * 100) / 100;
           let { label } = context.dataset;
           const datasetMeta = context.chart.getDatasetMeta(context.datasetIndex);
           const bar: any = datasetMeta.data[context.dataIndex];
@@ -207,10 +207,10 @@ const SpendingBar = ({ data, title, edit }: SpendingBarProps) => {
 
             const title = context.dataset.label;
 
-            const value = context.parsed.x - average; // for horizontal bar, use .x — use .y for vertical
+            const value = Math.round((context.parsed.x - average) * 100) / 100; // for horizontal bar, use .x — use .y for vertical
 
             if (dataset.spendingInfo.totalBudget < getTotalMoneySpentNotAvailable(dataset.spendingInfo)) {
-              return `Spending is $${Math.abs(dataset.spendingInfo.available)} overbudget!`;
+              return `Spending is $${Math.abs(Math.round(dataset.spendingInfo.available * 100) / 100)} overbudget!`;
             }
 
             return `${title}: $${value}`;