388 dev cashflow kpis connecting to backend (#394)

* KPI top cards

* Contact card spacing fix

Author: janekamata

frontend/src/main-page/cash-flow/CashFlowPage.tsx

@@ -22,33 +22,33 @@ export const formatMoney = (amount: number) => {
 };
 
 const CashFlowPage = observer(() => {
-  const { costs, revenues } = ProcessCashflowData();
+  const { costs, revenues, cashflowSettings } = ProcessCashflowData();
 
   return (
     <div className="">
       <div className="grid grid-cols-4 grid-rows-[auto_auto_1fr] gap-4">
         {/* Row 1 */}
         <CashflowKPICard
           text="Current Cash"
-          value="$50,000"
+          value={formatMoney(cashflowSettings?.startingCash ?? 0)}
           logo={faDollarSign}
           className="text-blue"
         />
         <CashflowKPICard
           text="Total Revenue"
-          value="$50,000"
+          value={formatMoney(revenues.reduce((accumulator, currentValue) => accumulator + currentValue.amount, 0))}
           logo={faArrowTrendUp}
           className="text-green"
         />
         <CashflowKPICard
           text="Monthly Costs"
-          value={formatMoney(costs.reduce((accumulator, currentValue) => accumulator + currentValue.amount, 0))}
+          value={formatMoney(costs.reduce((accumulator, currentValue) => accumulator + currentValue.amount, 0)/12)}
           logo={faUserGroup}
           className="text-primary"
         />
         <CashflowKPICard
           text="Annual Increases"
-          value="Salary: 4.5% | Benefits: 4%"
+          value={`Salary: ${cashflowSettings?.salaryIncrease}% | Benefits: ${cashflowSettings?.benefitsIncrease}%`}
           logo={faArrowTrendUp}
           className="text-green"
           size="small"

frontend/src/main-page/grants/grant-view/GrantView.tsx

@@ -204,7 +204,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(({ grant }) => {
               {
                 label: "Contacts",
                 item: (
-                  <div className="grid grid-cols-1 xl:grid-cols-2 w-full h-full lg:w-[85%] gap-6">
+                  <div className="grid grid-cols-1 2xl:grid-cols-2 w-full h-full lg:w-[85%] gap-6">
                     <ContactCard contact={grant.bcan_poc} type="BCAN" />
                     <ContactCard
                       contact={grant.grantmaker_poc}