Make navigation work

client/src/cash/Cash.css

@@ -0,0 +1,7 @@
+.cash-cell-left {
+  text-align: left; 
+}
+
+.cash-cell-right {
+  text-align: right;
+}

client/src/cash/Cash.js

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react'; 
+import { Button, Table } from 'react-materialize';
+import './Cash.css';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+import { MAKE_MONEY_MOVE } from '../RouteNames';
+import { withRouter } from 'react-router-dom';
+
+const Cash = (props) => {
+  const [homiesCash, setHomiesCash] = useState([]);
+  //const [importance, setImportance] = useState(10);
+
+  useEffect( () => { 
+    const getCashForHomies = async () => {
+      try { 
+        const cash = await axios.get(`/homies/cash`);
+        setHomiesCash(cash.data);
+      } catch (e) {
+        console.log("Error fetching", e); 
+      }
+    };
+    getCashForHomies(); 
+  }, []);
+
+
+  const formatMoney = (amount) => {
+    const formatted = Number.parseFloat(amount).toFixed(2);
+    return `${formatted} KM`;
+  }
+
+  const cashTableBody = homiesCash.map( (homieLine) => {
+    return (
+      <tr key={homieLine.homie.id}>
+        <td className="cash-cell-left">
+          { homieLine.homie.name } 
+        </td>
+        <td className="cash-cell-right">
+          { formatMoney(homieLine.amount) }
+        </td>
+        <td className="cash-cell-left">
+           [ settle ]
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <div>
+
+       <Table>
+         <thead>
+          <tr>
+           <th>
+             Homie
+           </th>
+           <th>
+             Cash
+           </th>
+           <th>
+             Actions
+           </th>
+          </tr>
+         </thead>
+         <tbody>
+          { cashTableBody }          
+         </tbody>
+       </Table>
+     
+       <Button
+        floating
+        large
+        className="green"
+        fab={{direction: 'bottom'}}
+        waves="light"
+        icon="add" 
+        onClick={
+          () => {
+            props.history.push(MAKE_MONEY_MOVE)
+          }
+        }/>
+
+    </div>
+  );
+}
+
+
+export default withRouter(Cash); 

client/src/cash/MakeMoneyMove.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react'; 
+import { Modal, Select, TextInput, Collection, CollectionItem } from 'react-materialize';
+import './Cash.css';
+import axios from 'axios';
+
+const MakeMoneyMove = (props) => {
+
+  const [selectedFrom, setSelectedFrom] = useState(null); 
+
+return (
+<div>
+   <TextInput label="How Much?" />
+   <label>From: </label>
+   <Collection>
+     <CollectionItem>
+       Alvin
+      </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+      </CollectionItem>
+     <CollectionItem>
+       Alvin
+      </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+      </CollectionItem>
+      <CollectionItem>
+       Alvin
+      </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+      </CollectionItem>
+     <CollectionItem>
+       Alvin
+      </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+     </CollectionItem>
+     <CollectionItem>
+       Alvin
+      </CollectionItem>
+
+    </Collection>  
+</div>
+);
+
+}
+
+export default MakeMoneyMove;