From 4d1f40537cc55e1a5612773d3e62b7d95b954c7a Mon Sep 17 00:00:00 2001
From: Allan Carr <allan.carr@thinkimex.com>
Date: Thu, 22 Feb 2024 12:57:48 -0800
Subject: [PATCH] IO-2640 Change Variable Names and adjust CSS

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>
---
 .../scheduled-in-today.component.jsx          | 47 +++++++++----------
 .../scheduled-out-today.component.jsx         | 42 ++++++++---------
 .../dashboard-grid/dashboard-grid.styles.scss |  2 +-
 client/src/translations/en_us/common.json     |  4 +-
 4 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx b/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
index 268cb7a1c..3a902950e 100644
--- a/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
+++ b/client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx
@@ -23,8 +23,8 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
   const [state, setState] = useState({
     sortedInfo: {},
   });
-  const [isTVMode_scheduled_in, setIsTVMode_scheduled_in] = useLocalStorage(
-    "isTVMode_scheduled_in",
+  const [isTvModeScheduledIn, setIsTvModeScheduledIn] = useLocalStorage(
+    "isTvModeScheduledIn",
     false
   );
 
@@ -75,10 +75,10 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
     return new moment(a.start) - new moment(b.start);
   });
 
-  const TV_fontSize = 18;
-  const TV_fontWeight = "bold";
+  const tvFontSize = 16;
+  const tvFontWeight = "bold";
 
-  const tv_columns = [
+  const tvColumns = [
     {
       title: t("appointments.fields.time"),
       dataIndex: "start",
@@ -88,7 +88,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
       sortOrder:
         state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           <TimeFormatter>{record.start}</TimeFormatter>
         </span>
       ),
@@ -106,7 +106,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
           onClick={(e) => e.stopPropagation()}
         >
           <Space>
-            <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               {record.ro_number || t("general.labels.na")}
               {record.production_vars && record.production_vars.alert ? (
                 <ExclamationCircleFilled className="production-alert" />
@@ -139,12 +139,12 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
             to={"/manage/owners/" + record.ownerid}
             onClick={(e) => e.stopPropagation()}
           >
-            <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               <OwnerNameDisplay ownerObject={record} />
             </span>
           </Link>
         ) : (
-          <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
             <OwnerNameDisplay ownerObject={record} />
           </span>
         );
@@ -170,18 +170,16 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
             to={"/manage/vehicles/" + record.vehicleid}
             onClick={(e) => e.stopPropagation()}
           >
-            <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
                 record.v_model_desc || ""
               }`}
             </span>
           </Link>
         ) : (
-          <span
-            style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}
-          >{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-            record.v_model_desc || ""
-          }`}</span>
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
         );
       },
     },
@@ -208,7 +206,7 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
             .sort((a, b) => alphaSort(a.text, b.text))) ||
         [],
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           {record.alt_transport}
         </span>
       ),
@@ -223,8 +221,8 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         state.sortedInfo.order,
       align: "right",
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
-          {record.joblines_body}
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_body.toFixed(1)}
         </span>
       ),
     },
@@ -237,8 +235,8 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
       align: "right",
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
-          {record.joblines_ref}
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_ref.toFixed(1)}
         </span>
       ),
     },
@@ -414,7 +412,6 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
   const handleTableChange = (sorter) => {
     setState({ ...state, sortedInfo: sorter });
   };
-
   return (
     <Card
       title={t("dashboard.titles.scheduledindate", {
@@ -424,8 +421,8 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         <Space>
           <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
           <Switch
-            onClick={() => setIsTVMode_scheduled_in(!isTVMode_scheduled_in)}
-            defaultChecked={isTVMode_scheduled_in}
+            onClick={() => setIsTvModeScheduledIn(!isTvModeScheduledIn)}
+            defaultChecked={isTvModeScheduledIn}
           />
         </Space>
       }
@@ -435,12 +432,12 @@ export default function DashboardScheduledInToday({ data, ...cardProps }) {
         <Table
           onChange={handleTableChange}
           pagination={false}
-          columns={isTVMode_scheduled_in ? tv_columns : columns}
+          columns={isTvModeScheduledIn ? tvColumns : columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}
           dataSource={appt}
-          size={isTVMode_scheduled_in ? "small" : "middle"}
+          size={isTvModeScheduledIn ? "small" : "middle"}
         />
       </div>
     </Card>
diff --git a/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx b/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
index ab1ab086f..2a702a616 100644
--- a/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
+++ b/client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx
@@ -23,8 +23,8 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
   const [state, setState] = useState({
     sortedInfo: {},
   });
-  const [isTVMode_scheduled_out, setIsTVMode_scheduled_out] = useLocalStorage(
-    "isTVMode_scheduled_out",
+  const [isTvModeScheduledOut, setIsTvModeScheduledOut] = useLocalStorage(
+    "isTvModeScheduledOut",
     false
   );
 
@@ -48,10 +48,10 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
     return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
   });
 
-  const TV_fontSize = 18;
-  const TV_fontWeight = "bold";
+  const tvFontSize = 18;
+  const tvFontWeight = "bold";
 
-  const tv_columns = [
+  const tvColumns = [
     {
       title: t("jobs.fields.scheduled_completion"),
       dataIndex: "scheduled_completion",
@@ -63,7 +63,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
         state.sortedInfo.columnKey === "scheduled_completion" &&
         state.sortedInfo.order,
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           <TimeFormatter>{record.scheduled_completion}</TimeFormatter>
         </span>
       ),
@@ -81,7 +81,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
           onClick={(e) => e.stopPropagation()}
         >
           <Space>
-            <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               {record.ro_number || t("general.labels.na")}
               {record.production_vars && record.production_vars.alert ? (
                 <ExclamationCircleFilled className="production-alert" />
@@ -114,12 +114,12 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             to={"/manage/owners/" + record.ownerid}
             onClick={(e) => e.stopPropagation()}
           >
-            <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               <OwnerNameDisplay ownerObject={record} />
             </span>
           </Link>
         ) : (
-          <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
             <OwnerNameDisplay ownerObject={record} />
           </span>
         );
@@ -145,7 +145,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             to={"/manage/vehicles/" + record.vehicleid}
             onClick={(e) => e.stopPropagation()}
           >
-            <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
                 record.v_model_desc || ""
               }`}
@@ -153,7 +153,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
           </Link>
         ) : (
           <span
-            style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}
+            style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}
           >{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
             record.v_model_desc || ""
           }`}</span>
@@ -183,7 +183,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             .sort((a, b) => alphaSort(a.text, b.text))) ||
         [],
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           {record.alt_transport}
         </span>
       ),
@@ -210,7 +210,7 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
             .sort((a, b) => alphaSort(a.text, b.text))) ||
         [],
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           {record.status}
         </span>
       ),
@@ -225,8 +225,8 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
         state.sortedInfo.order,
       align: "right",
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
-          {record.joblines_body}
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_body.toFixed(1)}
         </span>
       ),
     },
@@ -239,8 +239,8 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
         state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
       align: "right",
       render: (text, record) => (
-        <span style={{ fontSize: TV_fontSize, fontWeight: TV_fontWeight }}>
-          {record.joblines_ref}
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+          {record.joblines_ref.toFixed(1)}
         </span>
       ),
     },
@@ -430,8 +430,8 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
         <Space>
           <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
           <Switch
-            onClick={() => setIsTVMode_scheduled_out(!isTVMode_scheduled_out)}
-            defaultChecked={isTVMode_scheduled_out}
+            onClick={() => setIsTvModeScheduledOut(!isTvModeScheduledOut)}
+            defaultChecked={isTvModeScheduledOut}
           />
         </Space>
       }
@@ -441,12 +441,12 @@ export default function DashboardScheduledOutToday({ data, ...cardProps }) {
         <Table
           onChange={handleTableChange}
           pagination={false}
-          columns={isTVMode_scheduled_out ? tv_columns : columns}
+          columns={isTvModeScheduledOut ? tvColumns : columns}
           scroll={{ x: true, y: "calc(100% - 2em)" }}
           rowKey="id"
           style={{ height: "85%" }}
           dataSource={data.scheduled_out_today}
-          size={isTVMode_scheduled_out ? "small" : "middle"}
+          size={isTvModeScheduledOut ? "small" : "middle"}
         />
       </div>
     </Card>
diff --git a/client/src/components/dashboard-grid/dashboard-grid.styles.scss b/client/src/components/dashboard-grid/dashboard-grid.styles.scss
index 62a3ae72b..140a1e1f3 100644
--- a/client/src/components/dashboard-grid/dashboard-grid.styles.scss
+++ b/client/src/components/dashboard-grid/dashboard-grid.styles.scss
@@ -128,7 +128,7 @@
   height: 100%;
   width: 100%;
   .ant-card-body {
-    height: 80%;
+    height: calc(100% - 2rem);
     width: 100%;
     // //  background-color: red;
     // height: 90%;
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index dcbed3a58..bcba064a0 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -891,9 +891,9 @@
 				"productionhours": "Total Hours in Production",
 				"projectedmonthlysales": "Projected Monthly Sales",
 				"scheduledindate": "Sheduled In Today: {{date}}",
-				"scheduledintoday": "Sheduled In Today:",
+				"scheduledintoday": "Sheduled In Today",
 				"scheduledoutdate": "Sheduled Out Today: {{date}}",
-				"scheduledouttoday": "Sheduled Out Today:"
+				"scheduledouttoday": "Sheduled Out Today"
 			}
 		},
 		"dms": {