diff --git a/app/_layout.tsx b/app/_layout.tsx index b4fa1c3..3216927 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -6,7 +6,7 @@ import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs"; import { useEffect } from "react"; import { useTranslation } from "react-i18next"; import { ActivityIndicator, View } from "react-native"; -import { MD3LightTheme, Provider as PaperProvider } from "react-native-paper"; +import { Provider as PaperProvider } from "react-native-paper"; import { connect, Provider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react"; import { createStructuredSelector } from "reselect"; @@ -74,14 +74,52 @@ const ConnectedAppContent = connect( mapDispatchToProps )(AppContent); +//Custom values were used as the overrides did not work. const theme = { - ...MD3LightTheme, colors: { - ...MD3LightTheme.colors, - primary: "#1890ff", - accent: "tomato", + primary: "#005fae", + onPrimary: "#ffffff", + primaryContainer: "#d4e3ff", + onPrimaryContainer: "#001c3a", + secondary: "#545f71", + onSecondary: "#ffffff", + secondaryContainer: "#d8e3f8", + onSecondaryContainer: "#111c2b", + tertiary: "#00658d", + onTertiary: "#ffffff", + tertiaryContainer: "#c6e7ff", + onTertiaryContainer: "#001e2d", + error: "#ba1a1a", + onError: "#ffffff", + errorContainer: "#ffdad6", + onErrorContainer: "#410002", + background: "#fdfcff", + onBackground: "#1a1c1e", + surface: "#fdfcff", + onSurface: "#1a1c1e", + surfaceVariant: "#e0e2ec", + onSurfaceVariant: "#43474e", + outline: "#74777f", + outlineVariant: "#c3c6cf", + shadow: "#000000", + scrim: "#000000", + inverseSurface: "#2f3033", + inverseOnSurface: "#f1f0f4", + inversePrimary: "#a5c8ff", + elevation: { + level0: "transparent", + level1: "#f0f4fb", + level2: "#e9eff9", + level3: "#e1ebf6", + level4: "#dfe9f5", + level5: "#dae6f4", + }, + surfaceDisabled: "rgba(26, 28, 30, 0.12)", + onSurfaceDisabled: "rgba(26, 28, 30, 0.38)", + backdrop: "rgba(45, 49, 56, 0.4)", }, }; +// ...existing code... export default function AppLayout() { return ( diff --git a/app/jobs/[jobId]/_layout.tsx b/app/jobs/[jobId]/_layout.tsx index 9fbbfff..614c461 100644 --- a/app/jobs/[jobId]/_layout.tsx +++ b/app/jobs/[jobId]/_layout.tsx @@ -2,7 +2,7 @@ import FontAwesome from "@expo/vector-icons/FontAwesome"; import { Tabs } from "expo-router"; import { useTranslation } from "react-i18next"; -function JobTabLayout() { +function JobTabLayout(props) { const { t } = useTranslation(); return ( diff --git a/app/jobs/[jobId]/index.tsx b/app/jobs/[jobId]/index.tsx index 8cca6a1..bbc24b4 100644 --- a/app/jobs/[jobId]/index.tsx +++ b/app/jobs/[jobId]/index.tsx @@ -1,22 +1,4 @@ -import { useLocalSearchParams } from "expo-router"; -import { StyleSheet, Text, View } from "react-native"; -import JobDetail from "../../../components/job-detail/job-detail"; - +import JobTombstone from "../../../components/job-tombstone/job-tombstone"; export default function JobDetailScreen() { - const params = useLocalSearchParams(); - - return ( - - Job Details for Job ID: {JSON.stringify(params)} - - - ); + return ; } - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: "center", - alignItems: "center", - }, -}); diff --git a/app/jobs/[jobId]/lines.tsx b/app/jobs/[jobId]/lines.tsx index 2902eb3..32d2e6d 100644 --- a/app/jobs/[jobId]/lines.tsx +++ b/app/jobs/[jobId]/lines.tsx @@ -1,10 +1,5 @@ -import { Text, View } from "react-native"; - +import JobLinesComponent from "../../../components/job-lines/job-lines"; function JobLines() { - return ( - - Job Lines - - ); + return ; } export default JobLines; diff --git a/app/jobs/_layout.tsx b/app/jobs/_layout.tsx index 78202d7..73235ae 100644 --- a/app/jobs/_layout.tsx +++ b/app/jobs/_layout.tsx @@ -1,9 +1,7 @@ -import { Stack, useLocalSearchParams, useRouter } from "expo-router"; +import { Stack, useRouter } from "expo-router"; function JobsStack() { const router = useRouter(); - const params = useLocalSearchParams(); - console.log("*** ~ JobsStack ~ params:", params); return ( - Job is not defined. - ; - } - const onRefresh = async () => { - return refetch(); - }; - - return ( - - } - > - - - - - {job.status} - {job.inproduction && ( - {t("objects.jobs.labels.inproduction")} - )} - {job.inproduction && - job.production_vars && - !!job.production_vars.note && ( - {job.production_vars.note} - )} - - - - - - - - - - {`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${ - job.v_model_desc || "" - }`} - {job.v_vin} - - } - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} - -const localStyles = StyleSheet.create({ - twoColumnCard: { display: "flex", flexDirection: "row" }, - twoColumnCardColumn: { flex: 1 }, - status: { - textAlign: "center", - flexDirection: "row", - justifyContent: "center", - }, - inproduction: { - textAlign: "center", - flexDirection: "row", - justifyContent: "center", - }, -}); diff --git a/components/job-lines/job-lines.jsx b/components/job-lines/job-lines.jsx new file mode 100644 index 0000000..5a6d7bf --- /dev/null +++ b/components/job-lines/job-lines.jsx @@ -0,0 +1,72 @@ +import { GET_JOB_BY_PK } from "@/graphql/jobs.queries"; +import { useQuery } from "@apollo/client"; +import { useGlobalSearchParams } from "expo-router"; +import React from "react"; +import { useTranslation } from "react-i18next"; +import { ScrollView, Text } from "react-native"; +import { ActivityIndicator, Card, DataTable } from "react-native-paper"; + +export default function JobLines(props) { + const { jobId } = useGlobalSearchParams(); + + const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, { + variables: { + id: jobId, + }, + skip: !jobId, + }); + + const { t } = useTranslation(); + const onRefresh = async () => { + return refetch(); + }; + if (loading) { + return ; + } + if (!data?.jobs_by_pk) { + return ( + + Job is not defined. + + ); + } + const job = data.jobs_by_pk; + + return ( + + + + {t("jobdetail.labels.lines_desc")} + + {t("jobdetail.labels.lines_lbr_ty")} + + + {t("jobdetail.labels.lines_lb_hrs")} + + + {t("jobdetail.labels.lines_part_type")} + + + {t("jobdetail.labels.lines_qty")} + + + + {job.joblines.map((item) => ( + + + {item.line_desc} + + + {item.mod_lbr_ty && t(`jobdetail.lbr_types.${item.mod_lbr_ty}`)} + + {item.mod_lb_hrs} + + {item.part_type && t(`jobdetail.part_types.${item.part_type}`)} + + {item.part_qty} + + ))} + + + ); +} diff --git a/components/job-tombstone/job-tombstone.jsx b/components/job-tombstone/job-tombstone.jsx new file mode 100644 index 0000000..b9b9aa0 --- /dev/null +++ b/components/job-tombstone/job-tombstone.jsx @@ -0,0 +1,186 @@ +import { GET_JOB_BY_PK } from "@/graphql/jobs.queries"; +import { useQuery } from "@apollo/client"; +import { useLocalSearchParams } from "expo-router"; +import React from "react"; +import { useTranslation } from "react-i18next"; +import { + RefreshControl, + ScrollView, + StyleSheet, + Text, + View, +} from "react-native"; +import { ActivityIndicator, Card } from "react-native-paper"; +import DataLabelComponent from "../data-label/data-label"; + +export default function JobTombstone() { + const { jobId } = useLocalSearchParams(); + const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, { + variables: { + id: jobId, + }, + skip: !jobId, + }); + + const { t } = useTranslation(); + const onRefresh = async () => { + return refetch(); + }; + if (loading) { + return ; + } + if (!data.jobs_by_pk) { + return ( + + Job is not defined. + + ); + } + const job = data.jobs_by_pk; + return ( + + } + > + + + + {job.status} + {job.inproduction && ( + {t("objects.jobs.labels.inproduction")} + )} + {job.inproduction && + job.production_vars && + !!job.production_vars.note && ( + {job.production_vars.note} + )} + + + + + + + + + + {`${job.v_model_yr || ""} ${job.v_make_desc || ""} ${ + job.v_model_desc || "" + }`} + {job.v_vin} + + } + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +const localStyles = StyleSheet.create({ + twoColumnCard: { display: "flex", flexDirection: "row" }, + twoColumnCardColumn: { flex: 1 }, + status: { + textAlign: "center", + flexDirection: "row", + justifyContent: "center", + }, + inproduction: { + textAlign: "center", + flexDirection: "row", + justifyContent: "center", + }, +});