better looking spending bar and shared datagrid

Author: chpy04

src/frontend/src/components/NERDataGrid.tsx

@@ -13,7 +13,7 @@ interface NERDataGridProps<T> {
   columns: GridColDef[];
   pageSizeDefault?: number;
   rowsPerPageOptions?: number[];
-  onAdd: () => void;
+  onAdd?: () => void;
   addLabel?: string; // optional label for the add/create button (defaults to 'Add')
   onRowClick?: (item: T) => void;
   // optional simple search fields (keys of mapped row) or a custom filter function
@@ -97,9 +97,11 @@ function NERDataGrid<T>({
             placeholder="Search"
             sx={{ flex: 1 }}
           />
-          <Button variant="contained" size="small" onClick={onAdd} sx={{ ml: 1 }}>
-            {addLabel}
-          </Button>
+          {onAdd && (
+            <Button variant="contained" size="small" onClick={onAdd} sx={{ ml: 1 }}>
+              {addLabel}
+            </Button>
+          )}
         </Box>
 
         <Box sx={{ flex: 1, minHeight: 0 }}>

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

@@ -25,8 +25,6 @@ const FinancePieChart: React.FC<FinancePieChartProps> = ({
 }) => {
   const [isLegendOpen, setIsLegendOpen] = useState(true);
 
-  const pendingReimbursement = pendingLeadership + pendingFinance + submittedToSABO;
-
   const [sectionStates, setSectionStates] = useState([
     { title: 'Pending Approval', color: '#562016', expanded: false },
     { title: 'Approved', color: '#8e3c2d', expanded: false },

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

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
-import { useLocation, useHistory } from 'react-router-dom';
-import { useState } from 'react';
+import { useLocation, useHistory, useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 import { isGuest, ReimbursementRequest } from 'shared';
 import { ReimbursementProduct, ReimbursementStatusType } from 'shared';
 import {
@@ -48,7 +48,12 @@ const ReimbursementRequestInfo = ({
   const user = useCurrentUser();
   const history = useHistory();
   const { pathname } = useLocation();
-  const [showSidePage, setShowSidePage] = useState(false);
+  const { id } = useParams<{ id?: string }>();
+  const [showSidePage, setShowSidePage] = useState(!!id);
+
+  useEffect(() => {
+    if (id) setShowSidePage(true);
+  }, [id]);
 
   const displayedReimbursementRequests =
     canViewAllReimbursementRequests && currentTab === 1 && allReimbursementRequests