add order details

frontend/public/stylesheets/filter.css

 .filter {
-  width: 25%;
+  width: 50%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
@@ -7,18 +7,26 @@
 
 .filter > * {
   cursor: pointer;
+  display: flex;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: 1px solid black;
+}
+
+.selected {
+  color: white;
 }
 
 .filter-all.selected {
-  color: orange;
+  background: orange;
 }
 
 .filter-rec.selected {
-  color: blue;
+  background: blue;
 }
 .filter-ful.selected {
-  color: green;
+  background: green;
 }
 .filter-can.selected {
-  color: red;
+  background: red;
 }
\ No newline at end of file

frontend/public/stylesheets/master.css

 @import './reset.css';
 @import './header.css';
 @import './footer.css';
-@import './filter.css';
\ No newline at end of file
+@import './filter.css';
+@import './order.css';
\ No newline at end of file

frontend/public/stylesheets/order.css

+.order-index {
+  padding: 20px;
+}
+
+.order-index .oii ~ .oii {
+  margin-top: 15px;
+}
+
+.oii {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 70px;
+  background: lightgray;
+  border-radius: 5px;
+}
+
+.oii-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.oii-left {
+  display: flex;
+  align-items: center;
+}
+
+.oii-drop {
+  transition: transform 1s;
+  cursor: pointer;
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.oii-drop.rotate {
+  transition: transform 1s;
+  transform: rotate(90deg);
+}
+
+.oii-num {
+  display: flex;
+  align-items: center;
+}
+
+.oii-buttons, .oii-status {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 180px;
+}
+
+.oii-buttons > div {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 5px;
+  padding: 10px 20px;
+}
+
+.oii-buttons > * ~ * {
+  margin-left: 10px;
+}
+
+.oii-status.fulfilled {
+  color: green;
+}
+.oii-status.cancelled {
+  color: red;
+}
+
+.fulfill-btn {
+  border: 1px solid green;
+  color: green;
+}
+
+.cancel-btn {
+  border: 1px solid red;
+  color: red;
+}
+
+.order-details {
+  max-height: 0px;
+  overflow: hidden;
+  transition: max-height 1s ease-out;
+}
+
+.animate {
+  transition: max-height 1s ease-out;
+  max-height: 200px;
+}
\ No newline at end of file

frontend/src/components/filter/Filter.jsx

@@ -16,55 +16,68 @@ const Filter = ({ orders, setOrdersToShow }) => {
     setFulfilled(false);
     setCancelled(false);
   };
-
   const receive = () => {
     setAll(false);
     setReceived(!received);
+    if (received && !fulfilled && !cancelled) {
+      setAll(true);
+    }
   };
   const fulfill = () => {
     setAll(false);
     setFulfilled(!fulfilled);
+    if (!received && fulfilled && !cancelled) {
+      setAll(true);
+    }
   };
   const cancel = () => {
     setAll(false);
     setCancelled(!cancelled);
+    if (!received && !fulfilled && cancelled) {
+      setAll(true);
+    }
   };
 
   useEffect(() => {
-    const newOrders = { allIds: [], byId: {} };
-    orders.allIds.map((wareId) => {
-      const order = orders.byId[wareId];
-      switch (order.status) {
-        case RECEIVED:
-          if (all || received) {
-            newOrders.allIds.push(wareId);
-            newOrders.byId[wareId] = order;
-          }
-          break;
-        case FULFILLED:
-          if (all || fulfilled) {
-            newOrders.allIds.push(wareId);
-            newOrders.byId[wareId] = order;
-          }
-          break;
-        case CANCELLED:
-          if (all || cancelled) {
-            newOrders.allIds.push(wareId);
-            newOrders.byId[wareId] = order;
-          }
-          break;
-        default:
-          break;
-      }
-    });
-
-    setOrdersToShow(newOrders);
+    if (all) {
+      setOrdersToShow(orders);
+    } else {
+      const newOrders = { allIds: [], byId: {} };
+      orders.allIds.map((wareId) => {
+        const order = orders.byId[wareId];
+        switch (order.status) {
+          case RECEIVED:
+            if (all || received) {
+              newOrders.allIds.push(wareId);
+              newOrders.byId[wareId] = order;
+            }
+            break;
+          case FULFILLED:
+            if (all || fulfilled) {
+              newOrders.allIds.push(wareId);
+              newOrders.byId[wareId] = order;
+            }
+            break;
+          case CANCELLED:
+            if (all || cancelled) {
+              newOrders.allIds.push(wareId);
+              newOrders.byId[wareId] = order;
+            }
+            break;
+          default:
+            break;
+        }
+      });
+  
+      setOrdersToShow(newOrders);
+    }
   }, [all, received, fulfilled, cancelled]);
 
   if (!orders.allIds.length) return null;
 
   return (
     <div className="filter">
+      Filter: 
       <div className={`filter-all ${all ? "selected" : ""}`} onClick={reset}>
         All
       </div>

frontend/src/components/order/ItemDetails.jsx

+const ItemDetails = ({ item }) => {
+
+  const { itemId, itemName, itemQuantity, itemPrice, itemSku } = item;
+
+  return (
+    <div>
+      {`${itemName} -- x ${itemQuantity} bought at ${itemPrice}/ea.`}
+    </div>
+  )
+}
+
+export default ItemDetails;
\ No newline at end of file

frontend/src/components/order/OrderButtons.jsx

@@ -3,27 +3,30 @@ import { connect } from "react-redux";
 import { editOrder } from "../../actions/order_actions";
 
 const OrderButtons = ({ order, editOrder }) => {
-
   // const { id, orderId, status, orderItems, createdAt, modifiedAt } = order;
 
   const handleUpdate = (action) => {
     console.log(action);
     if (action === "FULFILL") {
-      editOrder({ ...order, status: "FULFILLED"})
+      editOrder({ ...order, status: "FULFILLED" });
     } else if (action === "CANCEL") {
       editOrder({ ...order, status: "CANCELLED" });
     }
-  }
+  };
 
   const fulfill = (
-    <button onClick={() => handleUpdate("FULFILL")}>Fulfill</button>
-  )
+    <div className="fulfill-btn" onClick={() => handleUpdate("FULFILL")}>
+      Fulfill
+    </div>
+  );
 
   const cancel = (
-    <button onClick={() => handleUpdate("CANCEL")}>Cancel</button>
-  )
+    <div className="cancel-btn" onClick={() => handleUpdate("CANCEL")}>
+      Cancel
+    </div>
+  );
   return (
-    <div>
+    <div className="oii-buttons">
       {fulfill} {cancel}
     </div>
   );

frontend/src/components/order/OrderDetails.jsx

+import ItemDetails from "./ItemDetails";
+
+const OrderDetails = ({ order, showDetails }) => {
+
+  const sampleItems = [
+    {
+      itemId: "17",
+      itemName: "Apple iPhone",
+      itemQuantity: 4,
+      itemPrice: 17.99,
+      itemSku: 8765309,
+    },
+    {
+      itemId: "12",
+      itemName: "Google Pixel",
+      itemQuantity: 42,
+      itemPrice: 17.99,
+      itemSku: 8715309,
+    },
+    {
+      itemId: "123",
+      itemName: "Google Pixel",
+      itemQuantity: 42,
+      itemPrice: 17.99,
+      itemSku: 8715309,
+    },
+    {
+      itemId: "124",
+      itemName: "Google Pixel",
+      itemQuantity: 42,
+      itemPrice: 17.99,
+      itemSku: 8715309,
+    },
+    {
+      itemId: "125",
+      itemName: "Google Pixel",
+      itemQuantity: 42,
+      itemPrice: 17.99,
+      itemSku: 8715309,
+    },
+
+  ];
+
+  return (
+    <div className={`order-details ${showDetails ? "animate" : ""}`}>
+      Order Details
+      {sampleItems.map( item => (
+        <ItemDetails key={item.itemId}item={item} />
+      ))}
+    </div>
+  )
+}
+
+export default OrderDetails;
\ No newline at end of file

frontend/src/components/order/OrderIndex.jsx

@@ -4,7 +4,7 @@ const OrderIndex = ({
   orders,
 }) => {
   return (
-    <div>
+    <div className="order-index">
       <h1>Order Index</h1>
 
       <br />

frontend/src/components/order/OrderIndexItem.jsx

-import React from 'react';
+import React, { useState } from 'react';
 import OrderButtons from './OrderButtons';
+import { FiChevronRight } from 'react-icons/fi';
+import OrderDetails from './OrderDetails';
 
 const OrderIndexItem = ({ order }) => {
 
@@ -12,16 +14,24 @@ const OrderIndexItem = ({ order }) => {
     modifiedAt
   } = order;
 
-  const actions = ( status !== "FULFILLED" || status !== "CANCELLED" ? 
-    <OrderButtons order={order} /> : 
-    <div>{status}</div>
+  const [showDetails, setShowDetails] = useState(false);
+
+  const actions = ( status === "FULFILLED" || status === "CANCELLED" ? 
+  <div className={`oii-status ${status.toLowerCase()}`}>{status}</div> :
+  <OrderButtons order={order} />
   );
 
   return (
     <div className="oii">
-      <div>{`Order #: ${orderId}`}</div>
-      {actions}
-      
+      <div className="oii-container">
+        <div className="oii-left">
+          <FiChevronRight className={`oii-drop ${showDetails ? "rotate" : ""}`} onClick={() => setShowDetails(!showDetails)}/>
+          <div className="oii-num">{`Order #: ${orderId}`} {id} </div>
+        </div>
+        {actions}
+      </div>
+
+      <OrderDetails showDetails={showDetails} order={order} />
     </div>
   )
 };

frontend/src/util/orders_api_util.jsx

@@ -14,13 +14,13 @@ const sampleGetAll = [
     orderItems: [
       {
         itemId: "17",
-        itemName: "Item 1",
+        itemName: "Apple iPhone",
         itemQuantity: 4,
         itemPrice: 17.99,
         itemSku: 8765309,
       },
       {
-        itemId: "18",
+        itemId: "Google Pixel",
         itemName: "Item 2",
         itemQuantity: 42,
         itemPrice: 17.99,