Merge branch 'feature/IO-1828-Front-End-Package-Updates' into test-beta

client/src/components/dashboard-components/scheduled-in-today/scheduled-in-today.component.jsx

@@ -1,443 +1,455 @@
-import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined,} from "@ant-design/icons";
-import {Card, Space, Switch, Table, Tooltip, Typography} from "antd";
-import dayjs from "../../../utils/day";
-import React, {useState} from "react";
-import {useTranslation} from "react-i18next";
-import {Link} from "react-router-dom";
-import {TimeFormatter} from "../../../utils/DateFormatter";
-import {onlyUnique} from "../../../utils/arrayHelper";
-import {alphaSort, dateSort} from "../../../utils/sorters";
+import {
+  BranchesOutlined,
+  ExclamationCircleFilled,
+  PauseCircleOutlined,
+} from "@ant-design/icons";
+import { Card, Space, Switch, Table, Tooltip, Typography } from "antd";
+import moment from "moment";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { TimeFormatter } from "../../../utils/DateFormatter";
+import { onlyUnique } from "../../../utils/arrayHelper";
+import { alphaSort, dateSort } from "../../../utils/sorters";
 import useLocalStorage from "../../../utils/useLocalStorage";
 import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
-import OwnerNameDisplay, {OwnerNameDisplayFunction,} from "../../owner-name-display/owner-name-display.component";
+import OwnerNameDisplay, {
+  OwnerNameDisplayFunction,
+} from "../../owner-name-display/owner-name-display.component";
 import DashboardRefreshRequired from "../refresh-required.component";
 
-export default function DashboardScheduledInToday({data, ...cardProps}) {
-    const {t} = useTranslation();
-    const [state, setState] = useState({
-        sortedInfo: {},
-    });
-    const [isTvModeScheduledIn, setIsTvModeScheduledIn] = useLocalStorage(
-        "isTvModeScheduledIn",
-        false
-    );
-    if (!data) return null;
-    if (!data.scheduled_in_today)
-        return <DashboardRefreshRequired {...cardProps} />;
+export default function DashboardScheduledInToday({ data, ...cardProps }) {
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  const [isTvModeScheduledIn, setIsTvModeScheduledIn] = useLocalStorage(
+    "isTvModeScheduledIn",
+    false
+  );
 
-    const appt = []; // Flatten Data
-    data.scheduled_in_today.forEach((item) => {
-        if (item.job) {
-            var i = {
-                canceled: item.canceled,
-                id: item.id,
-                alt_transport: item.job.alt_transport,
-                clm_no: item.job.clm_no,
-                jobid: item.job.jobid,
-                joblines_body: item.job.joblines
-                    .filter((l) => l.mod_lbr_ty !== "LAR")
-                    .reduce((acc, val) => acc + val.mod_lb_hrs, 0),
-                joblines_ref: item.job.joblines
-                    .filter((l) => l.mod_lbr_ty === "LAR")
-                    .reduce((acc, val) => acc + val.mod_lb_hrs, 0),
-                ins_co_nm: item.job.ins_co_nm,
-                iouparent: item.job.iouparent,
-                ownerid: item.job.ownerid,
-                ownr_co_nm: item.job.ownr_co_nm,
-                ownr_ea: item.job.ownr_ea,
-                ownr_fn: item.job.ownr_fn,
-                ownr_ln: item.job.ownr_ln,
-                ownr_ph1: item.job.ownr_ph1,
-                ownr_ph2: item.job.ownr_ph2,
-                production_vars: item.job.production_vars,
-                ro_number: item.job.ro_number,
-                suspended: item.job.suspended,
-                v_make_desc: item.job.v_make_desc,
-                v_model_desc: item.job.v_model_desc,
-                v_model_yr: item.job.v_model_yr,
-                v_vin: item.job.v_vin,
-                vehicleid: item.job.vehicleid,
-                note: item.note,
-                start: item.start,
-                title: item.title,
-            };
-            appt.push(i);
-        }
-    });
-    appt.sort(function (a, b) {
-        return dayjs(a.start) - dayjs(b.start);
-    });
+  if (!data) return null;
+  if (!data.scheduled_in_today)
+    return <DashboardRefreshRequired {...cardProps} />;
 
-    const tvFontSize = 16;
-    const tvFontWeight = "bold";
+  const appt = []; // Flatten Data
+  data.scheduled_in_today.forEach((item) => {
+    if (item.job) {
+      var i = {
+        canceled: item.canceled,
+        id: item.id,
+        alt_transport: item.job.alt_transport,
+        clm_no: item.job.clm_no,
+        jobid: item.job.jobid,
+        joblines_body: item.job.joblines
+          .filter((l) => l.mod_lbr_ty !== "LAR")
+          .reduce((acc, val) => acc + val.mod_lb_hrs, 0),
+        joblines_ref: item.job.joblines
+          .filter((l) => l.mod_lbr_ty === "LAR")
+          .reduce((acc, val) => acc + val.mod_lb_hrs, 0),
+        ins_co_nm: item.job.ins_co_nm,
+        iouparent: item.job.iouparent,
+        ownerid: item.job.ownerid,
+        ownr_co_nm: item.job.ownr_co_nm,
+        ownr_ea: item.job.ownr_ea,
+        ownr_fn: item.job.ownr_fn,
+        ownr_ln: item.job.ownr_ln,
+        ownr_ph1: item.job.ownr_ph1,
+        ownr_ph2: item.job.ownr_ph2,
+        production_vars: item.job.production_vars,
+        ro_number: item.job.ro_number,
+        suspended: item.job.suspended,
+        v_make_desc: item.job.v_make_desc,
+        v_model_desc: item.job.v_model_desc,
+        v_model_yr: item.job.v_model_yr,
+        v_vin: item.job.v_vin,
+        vehicleid: item.job.vehicleid,
+        note: item.note,
+        start: item.start,
+        title: item.title,
+      };
+      appt.push(i);
+    }
+  });
+  appt.sort(function (a, b) {
+    return new moment(a.start) - new moment(b.start);
+  });
 
-    const tvColumns = [
-        {
-            title: t("appointments.fields.time"),
-            dataIndex: "start",
-            key: "start",
-            ellipsis: true,
-            sorter: (a, b) => dateSort(a.start, b.start),
-            sortOrder:
-                state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
-            render: (text, record) => (
-                <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
+  const tvFontSize = 16;
+  const tvFontWeight = "bold";
+
+  const tvColumns = [
+    {
+      title: t("appointments.fields.time"),
+      dataIndex: "start",
+      key: "start",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.start, b.start),
+      sortOrder:
+        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           <TimeFormatter>{record.start}</TimeFormatter>
         </span>
-            ),
-        },
-        {
-            title: t("jobs.fields.ro_number"),
-            dataIndex: "ro_number",
-            key: "ro_number",
-            sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
-            sortOrder:
-                state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
-            render: (text, record) => (
-                <Link
-                    to={"/manage/jobs/" + record.jobid}
-                    onClick={(e) => e.stopPropagation()}
-                >
-                    <Space>
-            <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
+      ),
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Space>
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               {record.ro_number || t("general.labels.na")}
-                {record.production_vars && record.production_vars.alert ? (
-                    <ExclamationCircleFilled className="production-alert"/>
-                ) : null}
-                {record.suspended && (
-                    <PauseCircleOutlined style={{color: "orangered"}}/>
-                )}
-                {record.iouparent && (
-                    <Tooltip title={t("jobs.labels.iou")}>
-                        <BranchesOutlined style={{color: "orangered"}}/>
-                    </Tooltip>
-                )}
+              {record.production_vars && record.production_vars.alert ? (
+                <ExclamationCircleFilled className="production-alert" />
+              ) : null}
+              {record.suspended && (
+                <PauseCircleOutlined style={{ color: "orangered" }} />
+              )}
+              {record.iouparent && (
+                <Tooltip title={t("jobs.labels.iou")}>
+                  <BranchesOutlined style={{ color: "orangered" }} />
+                </Tooltip>
+              )}
             </span>
-                    </Space>
-                </Link>
-            ),
-        },
-        {
-            title: t("jobs.fields.owner"),
-            dataIndex: "owner",
-            key: "owner",
-            ellipsis: true,
-            sorter: (a, b) =>
-                alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
-            sortOrder:
-                state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-            render: (text, record) => {
-                return record.ownerid ? (
-                    <Link
-                        to={"/manage/owners/" + record.ownerid}
-                        onClick={(e) => e.stopPropagation()}
-                    >
-            <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
-              <OwnerNameDisplay ownerObject={record}/>
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+              <OwnerNameDisplay ownerObject={record} />
             </span>
-                    </Link>
-                ) : (
-                    <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
-            <OwnerNameDisplay ownerObject={record}/>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
+            <OwnerNameDisplay ownerObject={record} />
           </span>
-                );
-            },
-        },
-        {
-            title: t("jobs.fields.vehicle"),
-            dataIndex: "vehicle",
-            key: "vehicle",
-            ellipsis: true,
-            sorter: (a, b) =>
-                alphaSort(
-                    `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
-                        a.v_model_desc || ""
-                    }`,
-                    `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
-                ),
-            sortOrder:
-                state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
-            render: (text, record) => {
-                return record.vehicleid ? (
-                    <Link
-                        to={"/manage/vehicles/" + record.vehicleid}
-                        onClick={(e) => e.stopPropagation()}
-                    >
-            <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
               {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-                  record.v_model_desc || ""
+                record.v_model_desc || ""
               }`}
             </span>
-                    </Link>
-                ) : (
-                    <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>{`${
-                        record.v_model_yr || ""
-                    } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
-                );
-            },
-        },
-        {
-            title: t("appointments.fields.alt_transport"),
-            dataIndex: "alt_transport",
-            key: "alt_transport",
-            ellipsis: true,
-            sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
-            sortOrder:
-                state.sortedInfo.columnKey === "alt_transport" &&
-                state.sortedInfo.order,
-            filters:
-                (appt &&
-                    appt
-                        .map((j) => j.alt_transport)
-                        .filter(onlyUnique)
-                        .map((s) => {
-                            return {
-                                text: s || "No Alt. Transport",
-                                value: [s],
-                            };
-                        })
-                        .sort((a, b) => alphaSort(a.text, b.text))) ||
-                [],
-            render: (text, record) => (
-                <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
+          </Link>
+        ) : (
+          <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>{`${
+            record.v_model_yr || ""
+          } ${record.v_make_desc || ""} ${record.v_model_desc || ""}`}</span>
+        );
+      },
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "alt_transport" &&
+        state.sortedInfo.order,
+      filters:
+        (appt &&
+          appt
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Alt. Transport",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           {record.alt_transport}
         </span>
-            ),
-        },
-        {
-            title: t("jobs.fields.lab"),
-            dataIndex: "joblines_body",
-            key: "joblines_body",
-            sorter: (a, b) => a.joblines_body - b.joblines_body,
-            sortOrder:
-                state.sortedInfo.columnKey === "joblines_body" &&
-                state.sortedInfo.order,
-            align: "right",
-            render: (text, record) => (
-                <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
+      ),
+    },
+    {
+      title: t("jobs.fields.lab"),
+      dataIndex: "joblines_body",
+      key: "joblines_body",
+      sorter: (a, b) => a.joblines_body - b.joblines_body,
+      sortOrder:
+        state.sortedInfo.columnKey === "joblines_body" &&
+        state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           {record.joblines_body.toFixed(1)}
         </span>
-            ),
-        },
-        {
-            title: t("jobs.fields.lar"),
-            dataIndex: "joblines_ref",
-            key: "joblines_ref",
-            sorter: (a, b) => a.joblines_ref - b.joblines_ref,
-            sortOrder:
-                state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
-            align: "right",
-            render: (text, record) => (
-                <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
+      ),
+    },
+    {
+      title: t("jobs.fields.lar"),
+      dataIndex: "joblines_ref",
+      key: "joblines_ref",
+      sorter: (a, b) => a.joblines_ref - b.joblines_ref,
+      sortOrder:
+        state.sortedInfo.columnKey === "joblines_ref" && state.sortedInfo.order,
+      align: "right",
+      render: (text, record) => (
+        <span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
           {record.joblines_ref.toFixed(1)}
         </span>
-            ),
-        },
-    ];
-    const columns = [
-        {
-            title: t("appointments.fields.time"),
-            dataIndex: "start",
-            key: "start",
-            ellipsis: true,
-            sorter: (a, b) => dateSort(a.start, b.start),
-            sortOrder:
-                state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
-            render: (text, record) => <TimeFormatter>{record.start}</TimeFormatter>,
-        },
-        {
-            title: t("jobs.fields.ro_number"),
-            dataIndex: "ro_number",
-            key: "ro_number",
-            sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
-            sortOrder:
-                state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order, render: (text, record) => (
-                <Link
-                    to={"/manage/jobs/" + record.jobid}
-                    onClick={(e) => e.stopPropagation()}
-                >
-                    <Space>
-                        {record.ro_number || t("general.labels.na")}
-                        {record.production_vars && record.production_vars.alert ? (
-                            <ExclamationCircleFilled className="production-alert"/>
-                        ) : null}
-                        {record.suspended && (
-                            <PauseCircleOutlined style={{color: "orangered"}}/>
-                        )}
-                        {record.iouparent && (
-                            <Tooltip title={t("jobs.labels.iou")}>
-                                <BranchesOutlined style={{color: "orangered"}}/>
-                            </Tooltip>
-                        )}
-                    </Space>
-                </Link>
-            ),
-        },
-        {
-            title: t("jobs.fields.owner"),
-            dataIndex: "owner",
-            key: "owner",
-            ellipsis: true,
-            sorter: (a, b) =>
-                alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
-            sortOrder:
-                state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
-            render: (text, record) => {
-                return record.ownerid ? (
-                    <Link
-                        to={"/manage/owners/" + record.ownerid}
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        <OwnerNameDisplay ownerObject={record}/>
-                    </Link>
-                ) : (
-                    <span>
-            <OwnerNameDisplay ownerObject={record}/>
-          </span>
-                );
-            },
-        },
-        {
-            title: t("dashboard.labels.phone"),
-            dataIndex: "ownr_ph",
-            key: "ownr_ph",
-            ellipsis: true,
-            responsive: ["md"],
-            render: (text, record) => (<Space size="small" wrap>
-                <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid}/>
+      ),
+    },
+  ];
 
-                <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid}/>
-            </Space>),
-        },
-        {
-            title: t("jobs.fields.ownr_ea"),
-            dataIndex: "ownr_ea",
-            key: "ownr_ea",
-            ellipsis: true,
-            responsive: ["md"],
-            render: (text, record) => (
-                <a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a>
-            ),
-        },
-        {
-            title: t("jobs.fields.vehicle"),
-            dataIndex: "vehicle",
-            key: "vehicle",
-            ellipsis: true,
-            sorter: (a, b) =>
-                alphaSort(
-                    `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
-                        a.v_model_desc || ""
-                    }`,
-                    `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
-                ),
-            sortOrder:
-                state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order, render: (text, record) => {
-                return record.vehicleid ? (
-                    <Link
-                        to={"/manage/vehicles/" + record.vehicleid}
-                        onClick={(e) => e.stopPropagation()}
-                    >
-                        {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-                            record.v_model_desc || ""
-                        }`}
-                    </Link>
-                ) : (
-                    <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
-                        record.v_model_desc || ""
-                    }`}</span>
-                );
-            },
-        },
-        {
-            title: t("jobs.fields.ins_co_nm"),
-            dataIndex: "ins_co_nm",
-            key: "ins_co_nm",
-            ellipsis: true,
-            responsive: ["md"],
-            sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
-            sortOrder:
-                state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
-            filters:
-                (appt &&
-                    appt
-                        .map((j) => j.ins_co_nm)
-                        .filter(onlyUnique)
-                        .map((s) => {
-                            return {
-                                text: s || "No Ins. Co.*",
-                                value: [s],
-                            };
-                        })
-                        .sort((a, b) => alphaSort(a.text, b.text))) ||
-                [],
-            onFilter: (value, record) => value.includes(record.ins_co_nm),
-        },
-        {
-            title: t("appointments.fields.alt_transport"),
-            dataIndex: "alt_transport",
-            key: "alt_transport",
-            ellipsis: true,
-            sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
-            sortOrder:
-                state.sortedInfo.columnKey === "alt_transport" &&
-                state.sortedInfo.order,
-            filters:
-                (appt &&
-                    appt
-                        .map((j) => j.alt_transport)
-                        .filter(onlyUnique)
-                        .map((s) => {
-                            return {
-                                text: s || "No Alt. Transport",
-                                value: [s],
-                            };
-                        })
-                        .sort((a, b) => alphaSort(a.text, b.text))) ||
-                [],
-        },
-    ];
-
-    const handleTableChange = (sorter) => {
-        setState({...state, sortedInfo: sorter});
-    };
-
-    return (
-        <Card
-            title={t("dashboard.titles.scheduledindate", {
-                date: dayjs().startOf("day").format("MM/DD/YYYY"),
-            })}
-            extra={
-                <Space>
-                    <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
-                    <Switch
-                        onClick={() => setIsTvModeScheduledIn(!isTvModeScheduledIn)}
-                        defaultChecked={isTvModeScheduledIn}
-                    />
-                </Space>
-            }{...cardProps}
+  const columns = [
+    {
+      title: t("appointments.fields.time"),
+      dataIndex: "start",
+      key: "start",
+      ellipsis: true,
+      sorter: (a, b) => dateSort(a.start, b.start),
+      sortOrder:
+        state.sortedInfo.columnKey === "start" && state.sortedInfo.order,
+      render: (text, record) => <TimeFormatter>{record.start}</TimeFormatter>,
+    },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.ro_number, b.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link
+          to={"/manage/jobs/" + record.jobid}
+          onClick={(e) => e.stopPropagation()}
         >
-            <div style={{height: "100%"}}>
-                <Table
-                    onChange={handleTableChange}
-                    pagination={false}
-                    columns={isTvModeScheduledIn ? tvColumns : columns}
-                    scroll={{x: true, y: "calc(100% - 2em)"}}
-                    rowKey="id"
-                    style={{height: "85%"}}
-                    dataSource={appt} size={isTvModeScheduledIn ? "small" : "middle"}
-                />
-            </div>
-        </Card>
-    );
+          <Space>
+            {record.ro_number || t("general.labels.na")}
+            {record.production_vars && record.production_vars.alert ? (
+              <ExclamationCircleFilled className="production-alert" />
+            ) : null}
+            {record.suspended && (
+              <PauseCircleOutlined style={{ color: "orangered" }} />
+            )}
+            {record.iouparent && (
+              <Tooltip title={t("jobs.labels.iou")}>
+                <BranchesOutlined style={{ color: "orangered" }} />
+              </Tooltip>
+            )}
+          </Space>
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(OwnerNameDisplayFunction(a), OwnerNameDisplayFunction(b)),
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.ownerid ? (
+          <Link
+            to={"/manage/owners/" + record.ownerid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <OwnerNameDisplay ownerObject={record} />
+          </Link>
+        ) : (
+          <span>
+            <OwnerNameDisplay ownerObject={record} />
+          </span>
+        );
+      },
+    },
+    {
+      title: t("dashboard.labels.phone"),
+      dataIndex: "ownr_ph",
+      key: "ownr_ph",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <Space size="small" wrap>
+          <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid} />
+          <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid} />
+        </Space>
+      ),
+    },
+    {
+      title: t("jobs.fields.ownr_ea"),
+      dataIndex: "ownr_ea",
+      key: "ownr_ea",
+      ellipsis: true,
+      responsive: ["md"],
+      render: (text, record) => (
+        <a href={`mailto:${record.ownr_ea}`}>{record.ownr_ea}</a>
+      ),
+    },
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      ellipsis: true,
+      sorter: (a, b) =>
+        alphaSort(
+          `${a.v_model_yr || ""} ${a.v_make_desc || ""} ${
+            a.v_model_desc || ""
+          }`,
+          `${b.v_model_yr || ""} ${b.v_make_desc || ""} ${b.v_model_desc || ""}`
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "vehicle" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <Link
+            to={"/manage/vehicles/" + record.vehicleid}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+              record.v_model_desc || ""
+            }`}
+          </Link>
+        ) : (
+          <span>{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+            record.v_model_desc || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("jobs.fields.ins_co_nm"),
+      dataIndex: "ins_co_nm",
+      key: "ins_co_nm",
+      ellipsis: true,
+      responsive: ["md"],
+      sorter: (a, b) => alphaSort(a.ins_co_nm, b.ins_co_nm),
+      sortOrder:
+        state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
+      filters:
+        (appt &&
+          appt
+            .map((j) => j.ins_co_nm)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Ins. Co.*",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+      onFilter: (value, record) => value.includes(record.ins_co_nm),
+    },
+    {
+      title: t("appointments.fields.alt_transport"),
+      dataIndex: "alt_transport",
+      key: "alt_transport",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
+      sortOrder:
+        state.sortedInfo.columnKey === "alt_transport" &&
+        state.sortedInfo.order,
+      filters:
+        (appt &&
+          appt
+            .map((j) => j.alt_transport)
+            .filter(onlyUnique)
+            .map((s) => {
+              return {
+                text: s || "No Alt. Transport",
+                value: [s],
+              };
+            })
+            .sort((a, b) => alphaSort(a.text, b.text))) ||
+        [],
+    },
+  ];
+
+  const handleTableChange = (sorter) => {
+    setState({ ...state, sortedInfo: sorter });
+  };
+  return (
+    <Card
+      title={t("dashboard.titles.scheduledindate", {
+        date: moment().startOf("day").format("MM/DD/YYYY"),
+      })}
+      extra={
+        <Space>
+          <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
+          <Switch
+            onClick={() => setIsTvModeScheduledIn(!isTvModeScheduledIn)}
+            defaultChecked={isTvModeScheduledIn}
+          />
+        </Space>
+      }
+      {...cardProps}
+    >
+      <div style={{ height: "100%" }}>
+        <Table
+          onChange={handleTableChange}
+          pagination={false}
+          columns={isTvModeScheduledIn ? tvColumns : columns}
+          scroll={{ x: true, y: "calc(100% - 2em)" }}
+          rowKey="id"
+          style={{ height: "85%" }}
+          dataSource={appt}
+          size={isTvModeScheduledIn ? "small" : "middle"}
+        />
+      </div>
+    </Card>
+  );
 }
 
 export const DashboardScheduledInTodayGql = `
-  scheduled_in_today: appointments(where: {start: {_gte: "${dayjs()
+  scheduled_in_today: appointments(where: {start: {_gte: "${moment()
     .startOf("day")
-    .toISOString()}", _lte: "${dayjs()
-    .endOf("day")
-    .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
+    .toISOString()}", _lte: "${moment()
+  .endOf("day")
+  .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
     canceled
     id
     job {

client/src/components/dashboard-components/scheduled-out-today/scheduled-out-today.component.jsx

@@ -16,7 +16,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
     const {t} = useTranslation();
     const [state, setState] = useState({
         sortedInfo: {},
-    });
+    filteredInfo: {},});
     const [isTvModeScheduledOut, setIsTvModeScheduledOut] = useLocalStorage(
         "isTvModeScheduledOut",
         false
@@ -41,10 +41,11 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
             joblines_body,
             joblines_ref,
         };
-    }).sort(function (a, b) {
-        return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
     });
 
+    console.log('Scheduled Out Today')
+    console.dir(scheduledOutToday);
+
     const tvFontSize = 18;
     const tvFontWeight = "bold";
 
@@ -106,6 +107,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
             sortOrder:
                 state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
             render: (text, record) => {
+                console.log('Render record out today');
+                console.dir(record);
                 return record.ownerid ? (
                     <Link
                         to={"/manage/owners/" + record.ownerid}
@@ -150,8 +153,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
                     </Link>
                 ) : (
                     <span
-                        style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}
-                    >{`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+                        style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>{`${
+                    record.v_model_yr || ""} ${record.v_make_desc || ""} ${
                         record.v_model_desc || ""
                     }`}</span>
                 );
@@ -178,7 +181,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
                             };
                         })
                         .sort((a, b) => alphaSort(a.text, b.text))) ||
-                [],
+                [],onFilter: (value, record) => value.includes(record.alt_transport),
             render: (text, record) => (
                 <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
           {record.alt_transport}
@@ -194,8 +197,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
             sortOrder:
                 state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
             filters:
-                (data.scheduled_out_today &&
-                    data.scheduled_out_today
+                (scheduledOutToday &&
+                    scheduledOutToday
                         .map((j) => j.status)
                         .filter(onlyUnique)
                         .map((s) => {
@@ -206,7 +209,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
                         })
                         .sort((a, b) => alphaSort(a.text, b.text))) ||
                 [],
-            render: (text, record) => (
+            onFilter: (value, record) => value.includes(record.status),render: (text, record) => (
                 <span style={{fontSize: tvFontSize, fontWeight: tvFontWeight}}>
           {record.status}
         </span>
@@ -372,8 +375,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
             sortOrder:
                 state.sortedInfo.columnKey === "ins_co_nm" && state.sortedInfo.order,
             filters:
-                (data.scheduled_out_today &&
-                    data.scheduled_out_today
+                (scheduledOutToday &&
+                    scheduledOutToday
                         .map((j) => j.ins_co_nm)
                         .filter(onlyUnique)
                         .map((s) => {
@@ -396,8 +399,8 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
                 state.sortedInfo.columnKey === "alt_transport" &&
                 state.sortedInfo.order,
             filters:
-                (data.scheduled_out_today &&
-                    data.scheduled_out_today
+                (scheduledOutToday &&
+                    scheduledOutToday
                         .map((j) => j.alt_transport)
                         .filter(onlyUnique)
                         .map((s) => {
@@ -408,11 +411,11 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
                         })
                         .sort((a, b) => alphaSort(a.text, b.text))) ||
                 [],
-        },
+        onFilter: (value, record) => value.includes(record.alt_transport),},
     ];
 
-    const handleTableChange = (sorter) => {
-        setState({...state, sortedInfo: sorter});
+    const handleTableChange = (pagination, filters, sorter) => {
+        setState({...state, filteredInfo: filters, sortedInfo: sorter});
     };
 
     return (
@@ -438,7 +441,7 @@ export default function DashboardScheduledOutToday({data, ...cardProps}) {
                     scroll={{x: true, y: "calc(100% - 2em)"}}
                     rowKey="id"
                     style={{height: "85%"}}
-                    dataSource={data.scheduled_out_today}
+                    dataSource={scheduledOutToday}
                     size={isTvModeScheduledOut ? "small" : "middle"}
                 />
             </div>