494 lines
15 KiB
JavaScript
494 lines
15 KiB
JavaScript
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 DashboardRefreshRequired from "../refresh-required.component";
|
|
|
|
export default function DashboardScheduledOutToday({ data, ...cardProps }) {
|
|
const { t } = useTranslation();
|
|
const [state, setState] = useState({
|
|
sortedInfo: {},
|
|
filteredInfo: {},
|
|
});
|
|
const [isTvModeScheduledOut, setIsTvModeScheduledOut] = useLocalStorage(
|
|
"isTvModeScheduledOut",
|
|
false
|
|
);
|
|
|
|
if (!data) return null;
|
|
if (!data.scheduled_out_today)
|
|
return <DashboardRefreshRequired {...cardProps} />;
|
|
|
|
data.scheduled_out_today.forEach((item) => {
|
|
item.joblines_body = item.joblines
|
|
? item.joblines
|
|
.filter((l) => l.mod_lbr_ty !== "LAR")
|
|
.reduce((acc, val) => acc + val.mod_lb_hrs, 0)
|
|
: 0;
|
|
item.joblines_ref = item.joblines
|
|
? item.joblines
|
|
.filter((l) => l.mod_lbr_ty === "LAR")
|
|
.reduce((acc, val) => acc + val.mod_lb_hrs, 0)
|
|
: 0;
|
|
});
|
|
data.scheduled_out_today.sort(function (a, b) {
|
|
return new Date(a.scheduled_completion) - new Date(b.scheduled_completion);
|
|
});
|
|
|
|
const tvFontSize = 18;
|
|
const tvFontWeight = "bold";
|
|
|
|
const tvColumns = [
|
|
{
|
|
title: t("jobs.fields.scheduled_completion"),
|
|
dataIndex: "scheduled_completion",
|
|
key: "scheduled_completion",
|
|
ellipsis: true,
|
|
sorter: (a, b) =>
|
|
dateSort(a.scheduled_completion, b.scheduled_completion),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "scheduled_completion" &&
|
|
state.sortedInfo.order,
|
|
render: (text, record) => (
|
|
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
|
|
<TimeFormatter>{record.scheduled_completion}</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 }}>
|
|
{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>
|
|
)}
|
|
</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} />
|
|
</span>
|
|
</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 }}>
|
|
{`${record.v_model_yr || ""} ${record.v_make_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:
|
|
(data.scheduled_out_today &&
|
|
data.scheduled_out_today
|
|
.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))) ||
|
|
[],
|
|
onFilter: (value, record) => value.includes(record.alt_transport),
|
|
render: (text, record) => (
|
|
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
|
|
{record.alt_transport}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
title: t("jobs.fields.status"),
|
|
dataIndex: "status",
|
|
key: "status",
|
|
ellipsis: true,
|
|
sorter: (a, b) => alphaSort(a.alt_transport, b.alt_transport),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
|
|
filters:
|
|
(data.scheduled_out_today &&
|
|
data.scheduled_out_today
|
|
.map((j) => j.status)
|
|
.filter(onlyUnique)
|
|
.map((s) => {
|
|
return {
|
|
text: s || "No Status*",
|
|
value: [s],
|
|
};
|
|
})
|
|
.sort((a, b) => alphaSort(a.text, b.text))) ||
|
|
[],
|
|
onFilter: (value, record) => value.includes(record.status),
|
|
render: (text, record) => (
|
|
<span style={{ fontSize: tvFontSize, fontWeight: tvFontWeight }}>
|
|
{record.status}
|
|
</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 }}>
|
|
{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 }}>
|
|
{record.joblines_ref.toFixed(1)}
|
|
</span>
|
|
),
|
|
},
|
|
];
|
|
|
|
const columns = [
|
|
{
|
|
title: t("jobs.fields.scheduled_completion"),
|
|
dataIndex: "scheduled_completion",
|
|
key: "scheduled_completion",
|
|
ellipsis: true,
|
|
sorter: (a, b) =>
|
|
dateSort(a.scheduled_completion, b.scheduled_completion),
|
|
sortOrder:
|
|
state.sortedInfo.columnKey === "scheduled_completion" &&
|
|
state.sortedInfo.order,
|
|
render: (text, record) => (
|
|
<TimeFormatter>{record.scheduled_completion}</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:
|
|
(data.scheduled_out_today &&
|
|
data.scheduled_out_today
|
|
.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:
|
|
(data.scheduled_out_today &&
|
|
data.scheduled_out_today
|
|
.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))) ||
|
|
[],
|
|
onFilter: (value, record) => value.includes(record.alt_transport),
|
|
},
|
|
];
|
|
|
|
const handleTableChange = (pagination, filters, sorter) => {
|
|
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
|
};
|
|
|
|
return (
|
|
<Card
|
|
title={t("dashboard.titles.scheduledoutdate", {
|
|
date: moment().startOf("day").format("MM/DD/YYYY"),
|
|
})}
|
|
extra={
|
|
<Space>
|
|
<Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
|
|
<Switch
|
|
onClick={() => setIsTvModeScheduledOut(!isTvModeScheduledOut)}
|
|
defaultChecked={isTvModeScheduledOut}
|
|
/>
|
|
</Space>
|
|
}
|
|
{...cardProps}
|
|
>
|
|
<div style={{ height: "100%" }}>
|
|
<Table
|
|
onChange={handleTableChange}
|
|
pagination={false}
|
|
columns={isTvModeScheduledOut ? tvColumns : columns}
|
|
scroll={{ x: true, y: "calc(100% - 2em)" }}
|
|
rowKey="id"
|
|
style={{ height: "85%" }}
|
|
dataSource={data.scheduled_out_today}
|
|
size={isTvModeScheduledOut ? "small" : "middle"}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export const DashboardScheduledOutTodayGql = `
|
|
scheduled_out_today: jobs(where: {
|
|
date_invoiced: {_is_null: true},
|
|
ro_number: {_is_null: false},
|
|
voided: {_eq: false},
|
|
scheduled_completion: {_gte: "${moment().startOf("day").toISOString()}",
|
|
_lte: "${moment().endOf("day").toISOString()}"}}) {
|
|
alt_transport
|
|
clm_no
|
|
jobid: id
|
|
joblines(where: {removed: {_eq: false}}) {
|
|
mod_lb_hrs
|
|
mod_lbr_ty
|
|
}
|
|
ins_co_nm
|
|
iouparent
|
|
ownerid
|
|
ownr_co_nm
|
|
ownr_ea
|
|
ownr_fn
|
|
ownr_ln
|
|
ownr_ph1
|
|
ownr_ph2
|
|
production_vars
|
|
ro_number
|
|
scheduled_completion
|
|
status
|
|
suspended
|
|
v_make_desc
|
|
v_model_desc
|
|
v_model_yr
|
|
v_vin
|
|
vehicleid
|
|
|
|
}
|
|
`;
|