updated styling and display jobslist above clockin

2023-06-08 15:28:03 -04:00
parent 851d8bebe4
commit 9828ee3da0
9 changed files with 407 additions and 244 deletions
--- a/components/Selects/select-cost-center.jsx
+++ b/components/Selects/select-cost-center.jsx
@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
    height: 48,
    borderColor: "gray",
    borderWidth: 0.5,
-    borderRadius: 8,
+    borderRadius: 4,
    paddingHorizontal: 8,
  },
  icon: {
--- a/components/Selects/select-job-id.jsx
+++ b/components/Selects/select-job-id.jsx
@@ -173,7 +173,8 @@ export default connect(null, null)(JobIdSearchSelect);

 const styles = StyleSheet.create({
  container: {
-    padding: 16,
+    marginVertical: 4,
+    marginHorizontal: 16,
    justifyContent: "center",
    alignContent: "center",
  },
@@ -181,7 +182,7 @@ const styles = StyleSheet.create({
    height: 50,
    borderColor: "gray",
    borderWidth: 0.5,
-    borderRadius: 8,
+    borderRadius: 4,
    paddingHorizontal: 8,
  },
  icon: {
--- a/components/labor-allocations-table/labor-allocations-table.component.jsx
+++ b/components/labor-allocations-table/labor-allocations-table.component.jsx
@@ -82,12 +82,11 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
  // console.log("labor summary is:", summary);

  return (
-    <View style={{ flex: 1}}>
+    <View style={{  flex: 1}}>
      {typeof data !== "undefined" ? (
        <Card style={{ flex: 1 }}>
-          <Card.Title><Text>Labor Allocations</Text></Card.Title>
+          <Card.Title title={"Labor Allocations"} />
          <Card.Content>
-          <DataTable>
            <View style={localStyles.headerArea}>
              <Text style={localStyles.headertext}>Cost Center</Text>
              <Text style={localStyles.headertext}>Hours Total</Text>
@@ -97,7 +96,6 @@ export function LaborAllocationsTable({ jobId, bodyshop, technician,costCenterDi
              <Text style={localStyles.headertext}>Difference</Text>
            </View>
            <Divider orientation="vertical" />
-          </DataTable>
          <DataTable>
            <FlatList
              data={totals}
--- a/components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx
+++ b/components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx
@@ -1,7 +1,20 @@
 import React, { useCallback, useState } from "react";
 import moment from "moment";
-import {  View,  Text,  StyleSheet,  ScrollView,  RefreshControl} from "react-native";
-import { Button, Card, Headline, Subheading } from "react-native-paper";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  RefreshControl,
+  FlatList,
+} from "react-native";
+import {
+  ActivityIndicator,
+  Button,
+  Card,
+  Headline,
+  Subheading,
+} from "react-native-paper";
 import styles from "../styles";

 import axios from "axios";
@@ -9,14 +22,21 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";

 import { employeeGetRatesStart } from "../../redux/employee/employee.actions";
-import {  selectCurrentEmployee, selectRates, selectGettingRates,  selectSignInError,  selectEmployeeFullName,
+import {
+  selectCurrentEmployee,
+  selectRates,
+  selectGettingRates,
+  selectSignInError,
+  selectEmployeeFullName,
 } from "../../redux/employee/employee.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";

 import { JobIdSearchSelect } from "../Selects/select-job-id";
-import  CostCenterSelect  from "../Selects/select-cost-center";
+import CostCenterSelect from "../Selects/select-cost-center";
 import ErrorDisplay from "../error-display/error-display.component";
-import {  selectCurrentTimeTicketJob,  selectCurrentTimeTicketJobId,
+import {
+  selectCurrentTimeTicketJob,
+  selectCurrentTimeTicketJobId,
 } from "../../redux/timetickets/timetickets.selectors";
 import { INSERT_NEW_TIME_TICKET } from "../../graphql/timetickets.queries";
 import { useMutation, useQuery } from "@apollo/client";
@@ -26,8 +46,9 @@ import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.
 import { logImEXEvent } from "../../firebase/firebase.analytics";
 import StyleRepeater from "../style-repeater/style-repeater";
 import { useTranslation } from "react-i18next";
-// import  SignOutButton  from "../Buttons/employee-sign-out-button.component";
-// import  AddTimeTicketButton  from "../Buttons/create-time-ticket-button.component";
+import ClockedinListItem from "../time-ticket-items/clockedin-list-item.component";
+import  SignOutButton  from "../Buttons/employee-sign-out-button.component";
+import  AddTimeTicketButton  from "../Buttons/create-time-ticket-button.component";

 const mapStateToProps = createStructuredSelector({
  currentEmployee: selectCurrentEmployee,
@@ -60,6 +81,7 @@ export function ScreenTimeTicketBrowser({
  const [currentSCC, setCurrentSCC] = useState(null);
  const [currentSJobId, setCurrentSJobId] = useState(null);
  const [loading, setLoading] = useState(false);
+  const [loadingClockIn, setLoadingClockIn] = useState(false);
  const [error, setError] = useState(null);
  const [refreshing, setRefreshing] = useState(false);
  const [insertTimeTicket] = useMutation(INSERT_NEW_TIME_TICKET, {
@@ -68,7 +90,7 @@ export function ScreenTimeTicketBrowser({

  const handleFinish = async (values) => {
    // console.log("handleFinish called in ScreenTimeTicketBrowser");
-    setLoading(true);
+    setLoadingClockIn(true);
    setError(null);

    const theTime = (await axios.post("/utils/time")).data;
@@ -78,7 +100,7 @@ export function ScreenTimeTicketBrowser({
      // console.log("have all values");
    } else {
      // console.log("missing values!");
-      setLoading(false);
+      setLoadingClockIn(false);
      setError({ message: t("timeticketbrowser.errors.missingvalues") });
      return;
    }
@@ -112,7 +134,7 @@ export function ScreenTimeTicketBrowser({
    // console.info("INSERT_NEW_TIME_TICKET, variables for clockin. : ",tempVariablesObj?.variables?.timeTicketInput[0] );
    const result = await insertTimeTicket(tempVariablesObj);
    // console.log("insertTimeTicket, result :", result);
-    setLoading(false);
+    setLoadingClockIn(false);
    if (!!result.errors) {
      // console.log("insertTimeTicket, result.error :", result.errors);
      setError(JSON.stringify(result.errors));
@@ -122,81 +144,153 @@ export function ScreenTimeTicketBrowser({
      setCurrentSCC(null);
    }
  };
+
  const onRefresh = useCallback(() => {
    setRefreshing(true);
+    refetch();
    setTimeout(() => {
      setRefreshing(false);
-    }, 2000);
+    }, 1000);
  }, []);

+  const [itemState, setItemState] = useState({
+    title: t("employeeclockedinlist.labels.alreadyclockedon"),
+    data: null,
+    content: null,
+  });
+
+  const { loadingATT, errorATT, dataATT, refetch } = useQuery(
+    QUERY_ACTIVE_TIME_TICKETS,
+    {
+      variables: {
+        employeeId: currentEmployee?.technician?.id,
+      },
+      skip: !currentEmployee?.technician,
+      onCompleted: (dataATT) => {
+        if (!!dataATT && dataATT?.timetickets) {
+          setItemState((itemState) => ({
+            ...itemState,
+            data: dataATT?.timetickets,
+          }));
+        }
+      },
+      onRefresh: { onRefresh },
+    }
+  );
+
+  if (loadingATT) {
+    // console.log("loadingATT : ");
+    setItemState((itemState) => ({
+      ...itemState,
+      content: <ActivityIndicator color="dodgerblue" size="large" />,
+    }));
+    return;
+  }
+  if (errorATT) {
+    // console.error("ErrorATT : ",errorATT);
+    setItemState((itemState) => ({
+      ...itemState,
+      content: <ErrorDisplay errorMessage={errorATT.message} />,
+    }));
+    return;
+  }
+  // console.log({ itemState: !!itemState });
+
  return (
-    <ScrollView
-      style={styles.cardBackground}
-      // contentContainerStyle={{ flexGrow: 0 }}
-      refreshControl={
-        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-      }
-    >
-      <StyleRepeater childStyle={{ margin: 4 }}>
-        <Card>
-          <Card.Title title={t("timeticketbrowser.labels.loggedinemployee")} 
-          // right={(props) => <SignOutButton />} 
-          />
-          <Card.Content>
-            {currentEmployeeFullName && (
-              <Subheading>{currentEmployeeFullName}</Subheading>
-            )}
-          </Card.Content>
-        </Card>
-        <Card>
-          <Card.Title title={t("timeticketbrowser.labels.clockintojob")} 
-      //     right={(props) => 
-      //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton /> 
-      //     <Button mode="outlined"
-      // compact={true} loading={loading} onPress={handleFinish} 
-      // style={{margin:4}}
-      // >
-      //       <Text>Clock In</Text>
-      //     </Button></View>
-      //     } 
-          />
-          <Card.Content>
-          <JobIdSearchSelect
-            currentValue={currentSJobId}
-            onJobSelected={setCurrentSJobId}
-            convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
-            notExported={!currentBodyshop.tt_allow_post_to_invoiced}
-            notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
-          />
-          <CostCenterSelect
-            currentValue={currentSCC}
-            currentRatesNCostCenters={currentRatesNCostCenters}
-            onValueSelected={setCurrentSCC}
-          />
-          {error && error?.message ? (
-            <ErrorDisplay errorMessage={error.message} />
-          ) : null}
-          <Button mode="outlined" loading={loading} onPress={handleFinish}>
-            <Text>{t("timeticketbrowser.actions.clockin")}</Text>
-          </Button>
-          </Card.Content>
-        </Card>
-      </StyleRepeater>
-      <View style={{ flexGrow: 1, flex: 1 }}>
-        <EmployeeClockedInList
-          technician={currentEmployee}
-          isRefresh={refreshing}
-        />
-      </View>
-    </ScrollView>
+    <View style={styles.cardBackground}>
+      <FlatList
+        ListHeaderComponent={
+          <Card style={localStyles.localCardStyle}>
+            <Card.Title
+              title={t("timeticketbrowser.labels.loggedinemployee")}
+              //  right={(props) => <SignOutButton />}
+            />
+            <Card.Content>
+              {currentEmployeeFullName && (
+                <Subheading>{currentEmployeeFullName}</Subheading>
+              )}
+            </Card.Content>
+          </Card>
+        }
+        data={!!itemState ? [itemState] : null}
+        renderItem={({ item }) => (
+          <MyItem style={localStyles.localCardStyle} itemState={item} />
+        )}
+        ListFooterComponent={
+          <Card style={localStyles.localCardStyle}>
+            <Card.Title
+              title={t("timeticketbrowser.labels.clockintojob")}
+              //     right={(props) =>
+              //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
+              //     <Button mode="outlined"
+              // compact={true} loading={loading} onPress={handleFinish}
+              // style={{margin:4}}
+              // >
+              //       <Text>Clock In</Text>
+              //     </Button></View>
+              //     }
+            />
+            <Card.Content>
+              <JobIdSearchSelect
+                currentValue={currentSJobId}
+                onJobSelected={setCurrentSJobId}
+                convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
+                notExported={!currentBodyshop.tt_allow_post_to_invoiced}
+                notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
+              />
+              <CostCenterSelect
+                currentValue={currentSCC}
+                currentRatesNCostCenters={currentRatesNCostCenters}
+                onValueSelected={setCurrentSCC}
+              />
+              {error && error?.message ? (
+                <ErrorDisplay errorMessage={error.message} />
+              ) : null}
+              <Button
+                mode="outlined"
+                style={styles.buttonBasicOutlined}
+                loading={loadingClockIn}
+                onPress={handleFinish}
+              >
+                <Text>{t("timeticketbrowser.actions.clockin")}</Text>
+              </Button>
+            </Card.Content>
+          </Card>
+        }
+        refreshControl={
+          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+        }
+      />
+    </View>
  );
 }

+const MyItem = ({ itemState, style }) => {
+  const items = itemState?.data;
+  return (
+    <Card key={itemState.title} style={style}>
+      <Card.Title title={itemState.title} />
+      <Card.Content>
+        {!!items ? (
+          items.map((item) => <ClockedinListItem ticket={item} />)
+        ) : !!itemState.content ? (
+          itemState.content
+        ) : (
+          <Text>No Data</Text>
+        )}
+      </Card.Content>
+    </Card>
+  );
+};
+
 const localStyles = StyleSheet.create({
  content: {
    display: "flex",
    flex: 2,
  },
+  localCardStyle: {
+    margin: 4,
+  },
 });

 export default connect(
--- a/components/styles.js
+++ b/components/styles.js
@@ -9,4 +9,23 @@ export default StyleSheet.create({
    display: "flex",
    flex: 1,
  },
+  buttonBasicOutlined: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    justifyContent: "center",
+    alignContent: "center",
+    borderColor: "gray",
+    borderWidth: 0.8,
+    borderRadius: 4,
+  },
+  buttonFatOutlined: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    height: 48,
+    justifyContent: "center",
+    alignContent: "center",
+    borderColor: "gray",
+    borderWidth: 0.8,
+    borderRadius: 4,
+  }
 });
--- a/components/time-ticket-items/clockedin-list-item.component.jsx
+++ b/components/time-ticket-items/clockedin-list-item.component.jsx
@@ -6,13 +6,14 @@ import { connect } from "react-redux";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import { DateTimeFormatter } from "../../util/DateFormater";
 import { setTmTicketJobId } from "../../redux/app/app.actions";
+import styles from "../styles";

 const mapDispatchToProps = (dispatch) => ({
  setTmTicketJobIdRedux: (jobId) => dispatch(setTmTicketJobId(jobId)),
 });

 export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
-  // console.log("makeNavToTimeTicketClockOff, handleRefresh:");
+  //  console.log("ClockedinListItem, ticket:",ticket);
  const { t } = useTranslation();
  const navigation = useNavigation();

@@ -28,7 +29,7 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
  );

  return (
-    <Card style={{ margin: 8 }}>
+    <Card key={ticket.id} style={{ margin: 8 }}>
      <Card.Title
        title={`${
          ticket.job.ro_number || t("general.labels.na")
@@ -51,8 +52,9 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
            : ticket.cost_center}
        </Text>
      </Card.Content>
-      <Card.Actions>
-        <Button mode="outlined" onPress={makeNavToTimeTicketClockOff} >
+      <Card.Actions style={{
+      justifyContent: 'center'}}>
+        <Button mode="outlined" style={styles.buttonBasicOutlined} onPress={makeNavToTimeTicketClockOff} >
          {t("clockedinlistitem.actions.clockout")}
        </Button>
      </Card.Actions>
--- a/components/time-ticket/screen-time-ticket-clockoff.component.jsx
+++ b/components/time-ticket/screen-time-ticket-clockoff.component.jsx
@@ -4,13 +4,22 @@ import { StyleSheet, Text, View, ScrollView } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Button, TextInput, Card, Headline, Subheading } from "react-native-paper";
-import  CostCenterSelect  from "../Selects/select-cost-center";
+import {
+  Button,
+  TextInput,
+  Card,
+  Headline,
+  Subheading,
+} from "react-native-paper";
+import CostCenterSelect from "../Selects/select-cost-center";
 import {
  selectCurrentEmployee,
  selectRates,
 } from "../../redux/employee/employee.selectors";
-import { selectBodyshop,selectRestrictClaimableHoursFlag } from "../../redux/user/user.selectors";
+import {
+  selectBodyshop,
+  selectRestrictClaimableHoursFlag,
+} from "../../redux/user/user.selectors";
 import LaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.component";
 import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
 import { useMutation } from "@apollo/client";
@@ -30,7 +39,7 @@ const mapStateToProps = createStructuredSelector({
  currentRatesNCostCenters: selectRates,
  currentBodyshop: selectBodyshop,
  currentTmTicketJobId: selectCurrentTmTicketJobId,
-  currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag
+  currentRestrictClaimableHoursFlag: selectRestrictClaimableHoursFlag,
 });
 const mapDispatchToProps = (dispatch) => ({
  timeTicketClockOutStart,
@@ -44,14 +53,12 @@ export function TimeTicketClockOff({
  currentRestrictClaimableHoursFlag,
  route,
 }) {
-
  const costCenterDiff = useRef(0);
  // console.log("TimeTicketClockOff, costCenterDiff :", costCenterDiff);

-
  const setCostCenterDiff = (value) => {
    countRef.current = val;
-    console.log(`Button clicked ${countRef.current} times`);
+    // console.log(`Button clicked ${countRef.current} times`);
  };

  const navigation = useNavigation();
@@ -64,8 +71,9 @@ export function TimeTicketClockOff({
  const [error, setError] = useState(null);
  const [currentSCC, setCurrentSCC] = useState(null);

-  const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET,
-    {refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"]});
+  const [updateTimeticket] = useMutation(UPDATE_TIME_TICKET, {
+    refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"],
+  });

  const handleFinish = async (values) => {
    logImEXEvent("TimeTicketClockOff_handleFinish");
@@ -75,7 +83,7 @@ export function TimeTicketClockOff({
      !!values.productivehours &&
      !!currentSCC?.value
    ) {
-      if (isNaN(values.actualhours)|isNaN(values.productivehours)) {
+      if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
        // console.log("actual hours is NAN!");
        setLoading(false);
        setError({ message: t("timeticketclockoff.errors.nan") });
@@ -85,16 +93,18 @@ export function TimeTicketClockOff({
      // console.log("all have values:");
    } else {
      // console.log("missing values!");
-      setError({ message: t("timeticketclockoff.errors.missingvalues")  });
+      setError({ message: t("timeticketclockoff.errors.missingvalues") });
      return;
    }
    // console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag :", currentRestrictClaimableHoursFlag);
-    if(!!currentRestrictClaimableHoursFlag){
+    if (!!currentRestrictClaimableHoursFlag) {
      //  console.log("TimeTicketClockOff, currentRestrictClaimableHoursFlag I am here:", currentRestrictClaimableHoursFlag);
-      if (values.productivehours > costCenterDiff.current){
-        setError({ message: t("timeticketclockoff.errors.hoursenteredmorethanavailable")  });
+      if (values.productivehours > costCenterDiff.current) {
+        setError({
+          message: t("timeticketclockoff.errors.hoursenteredmorethanavailable"),
+        });
        return;
-      }    
+      }
    }

    const tempcallobj = {
@@ -140,65 +150,80 @@ export function TimeTicketClockOff({
    // console.log("updateTimeticket, result :", result);
    setLoading(false);
    if (!!result.errors) {
-      console.log("updateTimeticket, result.error :", result.errors);
+      // console.log("updateTimeticket, result.error :", result.errors);
      setError(JSON.stringify(result.errors));
    } else {
-      console.log("updateTimeticket, result :", result.data);
+      // console.log("updateTimeticket, result :", result.data);
      navigation.goBack();
    }
    //if (completedCallback) completedCallback();
  };
  return (
-    <View style={styles.cardBackground}> 
-    {/* style={localStyles.content}> */}
+    <View style={styles.cardBackground}>
+      {/* style={localStyles.content}> */}
      <StyleRepeater childStyle={{ margin: 4 }}>
-      <Card>
-        <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
-                style={localStyles.input}
-                onPress={handleSubmit}
-                title={t("timeticketclockoff.actions.clockoff")}
-              >
-                <Text style={{ fontSize: 12 }}>{t("timeticketclockoff.actions.clockoff")}</Text>
-              </Button>
-            </View>
-          )}
-        </Formik>
+        <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>
-      <LaborAllocationsTable jobId={currentTmTicketJobId} costCenterDiff={costCenterDiff} selectedCostCenter={currentSCC}/>
+        <View style={{ flexGrow: 1 }}>
+        <LaborAllocationsTable
+          jobId={currentTmTicketJobId}
+          costCenterDiff={costCenterDiff}
+          selectedCostCenter={currentSCC}
+        />
+        </View >
      </StyleRepeater>
    </View>
  );
--- a/components/time-ticket/screen-time-ticket-create.component.jsx
+++ b/components/time-ticket/screen-time-ticket-create.component.jsx
@@ -4,14 +4,14 @@ import { StyleSheet, Text, View, ScrollView } from "react-native";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Button, Dialog, TextInput } from "react-native-paper";
-import  CostCenterSelect  from "../Selects/select-cost-center";
+import { Button, TextInput, Card } from "react-native-paper";
+import CostCenterSelect from "../Selects/select-cost-center";
 import { JobIdSearchSelect } from "../Selects/select-job-id";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
 import {
  selectCurrentEmployee,
  selectRates,
-  selectEmployeeFullName
+  selectEmployeeFullName,
 } from "../../redux/employee/employee.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { useCallback } from "react";
@@ -26,11 +26,14 @@ import { logImEXEvent } from "../../firebase/firebase.analytics";
 import moment from "moment";
 import { useNavigation } from "@react-navigation/native";

+import styles from "../styles";
+import StyleRepeater from "../style-repeater/style-repeater";
+
 const mapStateToProps = createStructuredSelector({
  currentEmployee: selectCurrentEmployee,
  currentRatesNCostCenters: selectRates,
  currentBodyshop: selectBodyshop,
-  currentEmployeeFullName: selectEmployeeFullName
+  currentEmployeeFullName: selectEmployeeFullName,
 });
 // const mapDispatchToProps = (dispatch) => ({});

@@ -38,7 +41,7 @@ export function TimeTicketCreate({
  currentEmployee,
  currentRatesNCostCenters,
  currentBodyshop,
-  currentEmployeeFullName
+  currentEmployeeFullName,
 }) {
  const navigation = useNavigation();
  const { t } = useTranslation();
@@ -95,7 +98,7 @@ export function TimeTicketCreate({
    } else {
      // console.log("missing values!");
      setLoading(false);
-      setError({ message: t("createtimeticket.errors.missingvalues")});
+      setError({ message: t("createtimeticket.errors.missingvalues") });
      return;
    }

@@ -172,95 +175,110 @@ export function TimeTicketCreate({
    setLoading(false);
  };
  return (
-    <View style={localStyles.content}>
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-        <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
-                style={localStyles.input}
-                onPress={handleSubmit}
-                loading={loading}
-                title="Submit"
-              >
-                <Text style={{ fontSize: 12 }}>{t("createtimeticket.actions.createticket")}</Text>
-              </Button>
-            </View>
-          )}
-        </Formik>
-
+    <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>
+        {/* </ScrollView> */}
+        <View style={{ flexGrow: 1 }}>
+          <LaborAllocationsTable jobId={currentSJobId?.value} />
+        </View>
+      </StyleRepeater>
    </View>
  );
 }
@@ -274,16 +292,22 @@ const localStyles = StyleSheet.create({
  },
  topContainer: {},
  bottomContainer: {},
-  input: {},
+  input: {
+    marginVertical: 4,
+    marginHorizontal: 16,
+    height: 48,
+    justifyContent: "center",
+    alignContent: "center",
+    borderWidth: 0.8,
+  },
  dateButton: {
    marginVertical: 4,
    marginHorizontal: 16,
    height: 48,
    justifyContent: "center",
    alignContent: "center",
-    borderColor: "blue",
+    borderColor: "gray",
    borderWidth: 0.8,
-    flex: 1,
  },
  textForButton: {
    flex: 1,
--- a/translations/en-US/common.json
+++ b/translations/en-US/common.json
@@ -496,7 +496,7 @@
 		},
 		"employeeclockedinlist": {
 			"labels": {
-				"alreadyclockedon": "You are already clocked in to the following job(s):"
+				"alreadyclockedon": "Clocked into job(s)"
 			}
 		},
 		"clockedinlistitem": {