added styling for allocation table

components/labor-allocations-table/labor-allocations-table.component.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
 import _ from "lodash";
-import { Card, DataTable, Divider } from "react-native-paper";
+import { ActivityIndicator, Card, DataTable, Divider } from "react-native-paper";
 import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs.queries";
 import ErrorDisplay from "../error-display/error-display.component";
 import { useQuery } from "@apollo/client";
@@ -17,13 +17,13 @@ const mapStateToProps = createStructuredSelector({
   technician: selectCurrentEmployee,
 });
 
-export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDiff,selectedCostCenter}) {
+export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDiff,selectedCostCenter, style, shouldRefresh}) {
   //  console.log("LaborAllocationsTable, costCenterDiff", costCenterDiff);
   //  console.log("LaborAllocationsTable, selectedCostCenter", selectedCostCenter);
   const { t } = useTranslation();
 
   const onRefresh = async () => {
-    // console.log("LaborAllocationsTable refetch");
+    //  console.log("LaborAllocationsTable refetch");
     return refetch();
   };
 
@@ -33,14 +33,16 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
   });
+
   //   console.log("LaborAllocationsTable, data", data);
   if (error) return <ErrorDisplay errorMessage={error.message} />;
 
+  // if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
   const [totals, setTotals] = useState([]);
 
-  useEffect(() => {
-    // console.log("LaborAllocationsTable useEffect on data change");
-  }, [data]);
+  // useEffect(() => {
+  //   // console.log("LaborAllocationsTable useEffect on data change");
+  // }, [data]);
 
   useEffect(() => {
     // console.log("LaborAllocationsTable useEffect on [all inputs] change",data?.joblines,data?.adjustments);
@@ -65,7 +67,12 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
       );
     }
     if (!jobId) setTotals([]);
-  }, [data?.joblines, data?.timetickets, bodyshop, data?.adjustments, jobId,selectedCostCenter]);
+  }, [data?.joblines, data?.timetickets, bodyshop, data?.adjustments, jobId, selectedCostCenter]);
+
+  useEffect(() => {
+    // console.log("made it here, shouldRefresh is :", shouldRefresh );
+    !!shouldRefresh && shouldRefresh ? onRefresh() : null
+  },[shouldRefresh]);
 
   const summary =
     totals &&
@@ -80,9 +87,10 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
       { hrs_total: 0, hrs_claimed: 0, adjustments: 0, difference: 0 }
     );
   // console.log("labor summary is:", summary);
-
+  
+  if (loading) return <ActivityIndicator color="dodgerblue" size="large" />;
   return (
-    <View style={{  flex: 1}}>
+    <View style={style}>
       {typeof data !== "undefined" ? (
         <Card style={{ flex: 1 }}>
           <Card.Title title={"Labor Allocations"} />

components/time-ticket/screen-time-ticket-clockoff.component.jsx

@@ -1,6 +1,6 @@
 import { Formik } from "formik";
-import React, { useEffect, useState, useRef } from "react";
-import { StyleSheet, Text, View, ScrollView } from "react-native";
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { StyleSheet, Text, View, ScrollView, FlatList } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -34,6 +34,9 @@ import StyleRepeater from "../style-repeater/style-repeater";
 // import { selectCurrentTimeTicketJobId } from "../../redux/timetickets/timetickets.selectors";
 
 import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
+
+import { RefreshControl } from "react-native";
+
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
   currentRatesNCostCenters: selectRates,
@@ -54,7 +57,6 @@ export function TimeTicketClockOff({
   route,
 }) {
   const costCenterDiff = useRef(0);
-  // console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);
 
   const setCostCenterDiff = (value) => {
     countRef.current = val;
@@ -67,6 +69,7 @@ export function TimeTicketClockOff({
   //  console.log( "TimeTicketClockOff, handleOnDone :", handleOnDone );
 
   const { t } = useTranslation();
+  const [loadingClockOut, setLoadingClockOut] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [currentSCC, setCurrentSCC] = useState(null);
@@ -85,7 +88,7 @@ export function TimeTicketClockOff({
     ) {
       if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
         // console.log("actual hours is NAN!");
-        setLoading(false);
+        setLoadingClockOut(false);
         setError({ message: t("timeticketclockoff.errors.nan") });
         return;
       }
@@ -93,6 +96,7 @@ export function TimeTicketClockOff({
       // console.log("all have values:");
     } else {
       // console.log("missing values!");
+        setLoadingClockOut(false);
       setError({ message: t("timeticketclockoff.errors.missingvalues") });
       return;
     }
@@ -100,6 +104,7 @@ export function TimeTicketClockOff({
     if (!!currentRestrictClaimableHoursFlag) {
       //  console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
       if (values.productivehours > costCenterDiff.current) {
+        setLoadingClockOut(false);
         setError({
           message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
         });
@@ -143,12 +148,12 @@ export function TimeTicketClockOff({
     // console.log("TimeTicketClockOff, tempcallobj :", tempcallobj);
 
     //after obj is good add below to make call
-    setLoading(true);
+    setLoadingClockOut(true);
     const result = await updateTimeticket(tempcallobj);
 
     //after call results are retuning add handling below for cases
     // console.log("updateTimeticket, result :", result);
-    setLoading(false);
+    setLoadingClockOut(false);
     if (!!result.errors) {
       // console.log("updateTimeticket, result.error :", result.errors);
       setError(JSON.stringify(result.errors));
@@ -158,73 +163,93 @@ export function TimeTicketClockOff({
     }
     //if (completedCallback) completedCallback();
   };
+
+  const onRefresh = useCallback(() => {
+    setLoading(true);
+    // refetch();
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+
   return (
     <View style={styles.cardBackground}>
-      {/* style={localStyles.content}> */}
-      <StyleRepeater childStyle={{ margin: 4 }}>
-        <Card>
-          <Card.Content>
-            <Formik
-              initialValues={{
-                costcenter: { currentSCC },
-                productivehours: "",
-                actualhours: "",
-              }}
-              onSubmit={handleFinish}
-            >
-              {({ handleChange, handleBlur, handleSubmit, values }) => (
-                <View style={localStyles.topTimeTicketContainer}>
-                  <TextInput
-                    style={localStyles.inputStyle}
-                    mode="outlined"
-                    onChangeText={handleChange("actualhours")}
-                    onBlur={handleBlur("actualhours")}
-                    value={values.actualhours}
-                    label={t(
-                      "timeticketclockoff.labels.actualhoursplaceholder"
-                    )}
-                    keyboardType="numeric"
-                  />
-                  <TextInput
-                    style={localStyles.inputStyle}
-                    mode="outlined"
-                    onChangeText={handleChange("productivehours")}
-                    onBlur={handleBlur("productivehours")}
-                    value={values.productivehours}
-                    label={t(
-                      "timeticketclockoff.labels.productivehoursplaceholder"
-                    )}
-                    keyboardType="numeric"
-                  />
-                  <CostCenterSelect
-                    currentRatesNCostCenters={currentRatesNCostCenters}
-                    currentValue={currentSCC}
-                    onValueSelected={setCurrentSCC}
-                  />
-                  {error ? <ErrorDisplay errorMessage={error.message} /> : null}
-                  <Button
-                    mode="outlined"
-                    style={styles.buttonBasicOutlined}
-                    onPress={handleSubmit}
-                    title={t("timeticketclockoff.actions.clockoff")}
-                  >
-                    <Text style={{ fontSize: 12 }}>
-                      {t("timeticketclockoff.actions.clockoff")}
-                    </Text>
-                  </Button>
-                </View>
-              )}
-            </Formik>
-          </Card.Content>
-        </Card>
-        <View style={{ flexGrow: 1 }}>
-        <LaborAllocationsTable
-          jobId={currentTmTicketJobId}
-          costCenterDiff={costCenterDiff}
-          selectedCostCenter={currentSCC}
-        />
-        </View >
-      </StyleRepeater>
+      <FlatList
+        ListHeaderComponent={
+          <Card style={localStyles.localCardStyle}>
+            <Card.Content>
+              <Formik
+                initialValues={{
+                  costcenter: { currentSCC },
+                  productivehours: "",
+                  actualhours: "",
+                }}
+                onSubmit={handleFinish}
+              >
+                {({ handleChange, handleBlur, handleSubmit, values }) => (
+                  <View style={localStyles.topTimeTicketContainer}>
+                    <TextInput
+                      style={localStyles.inputStyle}
+                      mode="outlined"
+                      onChangeText={handleChange("actualhours")}
+                      onBlur={handleBlur("actualhours")}
+                      value={values.actualhours}
+                      label={t(
+                        "timeticketclockoff.labels.actualhoursplaceholder"
+                      )}
+                      keyboardType="numeric"
+                    />
+                    <TextInput
+                      style={localStyles.inputStyle}
+                      mode="outlined"
+                      onChangeText={handleChange("productivehours")}
+                      onBlur={handleBlur("productivehours")}
+                      value={values.productivehours}
+                      label={t(
+                        "timeticketclockoff.labels.productivehoursplaceholder"
+                      )}
+                      keyboardType="numeric"
+                    />
+                    <CostCenterSelect
+                      currentRatesNCostCenters={currentRatesNCostCenters}
+                      currentValue={currentSCC}
+                      onValueSelected={setCurrentSCC}
+                    />
+                    {error ? (
+                      <ErrorDisplay errorMessage={error.message} />
+                    ) : null}
+                    <Button
+                      mode="outlined"
+                      style={styles.buttonBasicOutlined}
+                      onPress={handleSubmit}
+                      title={t("timeticketclockoff.actions.clockoff")}
+                      loading={loadingClockOut}
+                    >
+                      <Text style={{ fontSize: 12 }}>
+                        {t("timeticketclockoff.actions.clockoff")}
+                      </Text>
+                    </Button>
+                  </View>
+                )}
+              </Formik>
+            </Card.Content>
+          </Card>
+        }
+        data={null}
+        renderItem={null}
+        ListFooterComponent={
+          <LaborAllocationsTable
+            jobId={currentTmTicketJobId}
+            costCenterDiff={costCenterDiff}
+            selectedCostCenter={currentSCC}
+            style={localStyles.localCardStyle}
+            shouldRefresh={loading}
+          />
+        }
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      />
     </View>
   );
 }
@@ -260,4 +285,7 @@ const localStyles = StyleSheet.create({
     height: 48,
     fontSize: 16,
   },
+  localCardStyle: {
+    margin: 4,
+  },
 });

components/time-ticket/screen-time-ticket-create.component.jsx

@@ -1,6 +1,6 @@
 import { Formik } from "formik";
-import React, { useState } from "react";
-import { StyleSheet, Text, View, ScrollView } from "react-native";
+import React, { useRef, useState } from "react";
+import { StyleSheet, Text, View, ScrollView, RefreshControl } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -13,7 +13,10 @@ import {
   selectRates,
   selectEmployeeFullName,
 } from "../../redux/employee/employee.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {
+  selectBodyshop,
+  selectRestrictClaimableHoursFlag,
+} from "../../redux/user/user.selectors";
 import { useCallback } from "react";
 // import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
@@ -28,12 +31,14 @@ import { useNavigation } from "@react-navigation/native";
 
 import styles from "../styles";
 import StyleRepeater from "../style-repeater/style-repeater";
+import { FlatList } from "react-native";
 
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
   currentRatesNCostCenters: selectRates,
   currentBodyshop: selectBodyshop,
   currentEmployeeFullName: selectEmployeeFullName,
+  currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
 });
 // const mapDispatchToProps = (dispatch) => ({});
 
@@ -42,10 +47,13 @@ export function TimeTicketCreate({
   currentRatesNCostCenters,
   currentBodyshop,
   currentEmployeeFullName,
+  currentRestrictClaimableHoursFlag,
 }) {
+  const costCenterDiff = useRef(0);
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [loadingCreate, setLoadingCreate] = useState(false);
   const [error, setError] = useState(null);
 
   const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
@@ -72,7 +80,7 @@ export function TimeTicketCreate({
     logImEXEvent("handleFinish_called_in_TimeTicketCreate");
     // console.log("handleFinish called in TimeTicketCreate");
     setError(null);
-    setLoading(true);
+    setLoadingCreate(true);
 
     //  console.log("insertTicket, currentSCC :", currentSCC);
     //  console.log("insertTicket, currentSCC :", currentSJobId);
@@ -89,7 +97,7 @@ export function TimeTicketCreate({
     ) {
       if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
         // console.log("actual hours is NAN!");
-        setLoading(false);
+        setLoadingCreate(false);
         setError({ message: t("createtimeticket.errors.nan") });
         return;
       }
@@ -97,11 +105,22 @@ export function TimeTicketCreate({
       // console.log("have all values");
     } else {
       // console.log("missing values!");
-      setLoading(false);
+      setLoadingCreate(false);
       setError({ message: t("createtimeticket.errors.missingvalues") });
       return;
     }
 
+    if (!!currentRestrictClaimableHoursFlag) {
+      //  console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
+      if (values.productivehours > costCenterDiff.current) {
+        setLoadingCreate(false);
+        setError({
+          message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
+        });
+        return;
+      }
+    }
+
     // if (date2) console.log("rate :", currentRatesNCostCenters && currentSCC?.value ? currentRatesNCostCenters.filter((r) => r.cost_center === currentSCC?.value)[0].rate : null);//2023-05-16T16:45:27.154Z
     // if (date2) console.log("bodyshopid : ", currentBodyshop.id);
     // if (date2) console.log("moment(date2).format(YYYY-MM-DD)", moment(date2).format("YYYY-MM-DD"));
@@ -155,7 +174,7 @@ export function TimeTicketCreate({
     // console.log(" result : ", result);
     // //after call results are retuning add handling below for cases
     //  console.log("insertTicket, result :", result?.data?.insert_timetickets?.returning[0]);
-    setLoading(false);
+    setLoadingCreate(false);
     if (!!result.errors) {
       // console.log("insertTicket, result.error :", result.errors);
       setError(JSON.stringify(result.errors));
@@ -166,119 +185,140 @@ export function TimeTicketCreate({
     // if (completedCallback) completedCallback();
   };
 
-  const handleMutationError = (error) => {
-    // setEnterAgain(false);
-    console.log("insertTicket, result.error :", error);
-    setError(
-      error?.message ? JSON.stringify(error?.message) : JSON.stringify(error)
-    );
-    setLoading(false);
-  };
+  // const handleMutationError = (error) => {
+  //   // setEnterAgain(false);
+  //   console.log("insertTicket, result.error :", error);
+  //   setError(
+  //     error?.message ? JSON.stringify(error?.message) : JSON.stringify(error)
+  //   );
+  //   setLoading(false);
+  // };
+
+  const onRefresh = useCallback(() => {
+    setLoading(true);
+    // refetch();
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+
   return (
     <View style={styles.cardBackground}>
-      <StyleRepeater childStyle={{ margin: 4 }}>
-        {/* <ScrollView contentContainerStyle={{ flexGrow: 1 }}> */}
-        <Card>
-          <Card.Content>
-            <Formik
-              initialValues={{
-                jobid: { currentSJobId },
-                ticketdate: date2.toLocaleDateString(),
-                employee: { currentEmployeeFullName },
-                costcenter: { currentSCC },
-                productivehours: "",
-                actualhours: "",
-              }}
-              onSubmit={handleFinish}
-            >
-              {({ handleChange, handleBlur, handleSubmit, values }) => (
-                <View style={localStyles.topTimeTicketContainer}>
-                  <JobIdSearchSelect
-                    currentValue={currentSJobId}
-                    onJobSelected={setCurrentSJobId}
-                    convertedOnly={true}
-                    notExported={!currentBodyshop.tt_allow_post_to_invoiced}
-                    notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
-                  />
-                  {/* Below will be replaced with a Date Picker*/}
-                  {/* <TextInput style={localStyles.input} mode="flat" onChangeText={handleChange("ticketdate")} onBlur={handleBlur("ticketdate")} value={values.ticketdate} label={"Ticket Date"} /> */}
-                  <Button
-                    mode="outlined"
-                    title="TicketDatePickerButton"
-                    onPress={showDatePicker}
-                    style={localStyles.dateButton}
-                  >
-                    <Text style={localStyles.textForButton}>
-                      {t("createtimeticket.actions.ticketdate")}
-                      {date2.toLocaleDateString("en-US", {
-                        day: "2-digit",
-                        month: "2-digit",
-                        year: "numeric",
-                      })}
-                    </Text>
-                  </Button>
-                  <DateTimePickerModal
-                    isVisible={isDatePickerVisible}
-                    mode="date"
-                    date={date2}
-                    onConfirm={handleConfirm}
-                    onCancel={hideDatePicker}
-                  />
-                  <TextInput
-                    style={localStyles.inputStyle}
-                    mode="outlined"
-                    disabled={true}
-                    value={currentEmployeeFullName}
-                    label={t("createtimeticket.labels.employeeplaceholder")}
-                  />
-                  <CostCenterSelect
-                    currentRatesNCostCenters={currentRatesNCostCenters}
-                    currentValue={currentSCC}
-                    onValueSelected={setCurrentSCC}
-                  />
-                  <TextInput
-                    style={localStyles.inputStyle}
-                    mode="outlined"
-                    onChangeText={handleChange("productivehours")}
-                    onBlur={handleBlur("productivehours")}
-                    value={values.productivehours}
-                    label={t(
-                      "createtimeticket.labels.productivehoursplaceholder"
-                    )}
-                    keyboardType="numeric"
-                  />
-                  <TextInput
-                    style={localStyles.inputStyle}
-                    mode="outlined"
-                    onChangeText={handleChange("actualhours")}
-                    onBlur={handleBlur("actualhours")}
-                    value={values.actualhours}
-                    label={t("createtimeticket.labels.actualhoursplaceholder")}
-                    keyboardType="numeric"
-                  />
-                  {error ? <ErrorDisplay errorMessage={error.message} /> : null}
-                  <Button
-                    mode="outlined"
-                    style={styles.buttonBasicOutlined}
-                    onPress={handleSubmit}
-                    loading={loading}
-                    title="Submit"
-                  >
-                    <Text style={{ fontSize: 12 }}>
-                      {t("createtimeticket.actions.createticket")}
-                    </Text>
-                  </Button>
-                </View>
-              )}
-            </Formik>
-          </Card.Content>
-        </Card>
-        {/* Below is for list of jobs/tickets */}
-        {/* </ScrollView> */}
-        <View style={{ flexGrow: 1 }}>
-          <LaborAllocationsTable jobId={currentSJobId?.value} />
-        </View>
-      </StyleRepeater>
+      <FlatList
+        ListHeaderComponent={
+          <Card style={localStyles.localCardStyle}>
+            <Card.Content>
+              <Formik
+                initialValues={{
+                  jobid: { currentSJobId },
+                  ticketdate: date2.toLocaleDateString(),
+                  employee: { currentEmployeeFullName },
+                  costcenter: { currentSCC },
+                  productivehours: "",
+                  actualhours: "",
+                }}
+                onSubmit={handleFinish}
+              >
+                {({ handleChange, handleBlur, handleSubmit, values }) => (
+                  <View style={localStyles.topTimeTicketContainer}>
+                    <JobIdSearchSelect
+                      currentValue={currentSJobId}
+                      onJobSelected={setCurrentSJobId}
+                      convertedOnly={true}
+                      notExported={!currentBodyshop.tt_allow_post_to_invoiced}
+                      notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
+                    />
+                    <Button
+                      mode="outlined"
+                      title="TicketDatePickerButton"
+                      onPress={showDatePicker}
+                      style={localStyles.dateButton}
+                    >
+                      <Text style={localStyles.textForButton}>
+                        {t("createtimeticket.actions.ticketdate")}
+                        {date2.toLocaleDateString("en-US", {
+                          day: "2-digit",
+                          month: "2-digit",
+                          year: "numeric",
+                        })}
+                      </Text>
+                    </Button>
+                    <DateTimePickerModal
+                      isVisible={isDatePickerVisible}
+                      mode="date"
+                      date={date2}
+                      onConfirm={handleConfirm}
+                      onCancel={hideDatePicker}
+                    />
+                    <TextInput
+                      style={localStyles.inputStyle}
+                      mode="outlined"
+                      disabled={true}
+                      value={currentEmployeeFullName}
+                      label={t("createtimeticket.labels.employeeplaceholder")}
+                    />
+                    <CostCenterSelect
+                      currentRatesNCostCenters={currentRatesNCostCenters}
+                      currentValue={currentSCC}
+                      onValueSelected={setCurrentSCC}
+                    />
+                    <TextInput
+                      style={localStyles.inputStyle}
+                      mode="outlined"
+                      onChangeText={handleChange("productivehours")}
+                      onBlur={handleBlur("productivehours")}
+                      value={values.productivehours}
+                      label={t(
+                        "createtimeticket.labels.productivehoursplaceholder"
+                      )}
+                      keyboardType="numeric"
+                    />
+                    <TextInput
+                      style={localStyles.inputStyle}
+                      mode="outlined"
+                      onChangeText={handleChange("actualhours")}
+                      onBlur={handleBlur("actualhours")}
+                      value={values.actualhours}
+                      label={t(
+                        "createtimeticket.labels.actualhoursplaceholder"
+                      )}
+                      keyboardType="numeric"
+                    />
+                    {error ? (
+                      <ErrorDisplay errorMessage={error.message} />
+                    ) : null}
+                    <Button
+                      mode="outlined"
+                      style={styles.buttonBasicOutlined}
+                      onPress={handleSubmit}
+                      loading={loadingCreate}
+                      title="Submit"
+                    >
+                      <Text style={{ fontSize: 12 }}>
+                        {t("createtimeticket.actions.createticket")}
+                      </Text>
+                    </Button>
+                  </View>
+                )}
+              </Formik>
+            </Card.Content>
+          </Card>
+        }
+        data={null}
+        renderItem={null}
+        ListFooterComponent={
+          <LaborAllocationsTable
+            jobId={currentSJobId?.value}
+            costCenterDiff={costCenterDiff}
+            selectedCostCenter={currentSCC}
+            style={localStyles.localCardStyle}
+            shouldRefresh={loading}
+          />
+        }
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      />
     </View>
   );
 }
@@ -320,4 +360,7 @@ const localStyles = StyleSheet.create({
     height: 48,
     fontSize: 16,
   },
+  localCardStyle: {
+    margin: 4,
+  },
 });