working details view, approve/reject

src/components/User/Client/ClientShifts.jsx

@@ -105,29 +105,33 @@ const ClientShiftsView = ({
           Schedule a Shift
         </Button>
       </Segment>
-      {!!isSendingCShiftRequest && <Loader content="Loading" />}
+      {!!isSendingCShiftRequest && <Loader content="Loading" active />}
       {!isSendingCShiftRequest &&
         results.length > 0 && (
           <Item.Group divided>
             {results.map(result => {
-              const employee = getEmployeeFromPrice(result.price, user);
-              const price = getPriceFromPrice(result.price, user);
+              const employee = getEmployeeFromPrice(result.price, user) || {};
+              const provider = employee.provider || {};
+              const price = getPriceFromPrice(result.price, user) || {};
               const workType = price.work_type;
               const min = duration(
                 utc(result.set_end, ISO_8601) - utc(result.set_start, ISO_8601),
                 "milliseconds"
               ).as("minutes");
-              let displayText = duration(min, "minutes").humanize();
+              let displayDuration = duration(min, "minutes").humanize();
               if (min % 60) {
-                displayText = duration(
+                displayDuration = duration(
                   Math.floor(min / 60),
                   "hours"
                 ).humanize();
-                displayText += ` and ${duration(
+                displayDuration += ` and ${duration(
                   min % 60,
                   "minutes"
                 ).humanize()}`;
               }
+              const approved = !!result.approved;
+              const rejected = !result.approved && result.approved !== null;
+              const pending = result.approved === null;
               return (
                 <Item key={result.uuid}>
                   <Item.Content>
@@ -142,24 +146,32 @@ const ClientShiftsView = ({
                       />
                       {workType.label}
                     </Item.Header>
+                    <Item.Extra>
+                      <Label
+                        color={approved ? "green" : rejected ? "red" : "grey"}
+                        tag
+                        size="small"
+                      >
+                        {approved && "Approved"}
+                        {pending && "Approval Pending"}
+                        {rejected && "Rejected"}
+                      </Label>
+                    </Item.Extra>
                     <Item.Meta>
                       {"At " +
                         utc(result.set_start, ISO_8601)
                           .local(false)
-                          .format("dddd, MMMM Do YYYY, h:mm a Z") +
-                        "; for " +
-                        displayText +
-                        "; rate $" +
-                        price.amount +
-                        "/hour"}
+                          .format("dddd, MMMM Do YYYY, h:mm a Z")}
                     </Item.Meta>
-                    <Item.Description>{result.description}</Item.Description>
+                    <Item.Meta>{displayDuration}</Item.Meta>
+                    <Item.Meta>{`Rate $${price.amount}/hour`}</Item.Meta>
+                    {/* <Item.Description>{result.description}</Item.Description> */}
                     {/* <code>{JSON.stringify(result, null, 2)}</code> */}
-                    <Item.Meta>
-                      <a href={"mailto:" + employee.provider.email}>
-                        {employee.provider.email}
-                      </a>
-                    </Item.Meta>
+                    <Item.Description>
+                      {`${provider.first_name} ${provider.last_name}`.trim() ||
+                        "No Name!"}{" "}
+                      <a href={"mailto:" + provider.email}>{provider.email}</a>
+                    </Item.Description>
                   </Item.Content>
                   {result.actual_start === null && (
                     <Item.Extra>