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

import {BranchesOutlined, ExclamationCircleFilled, PauseCircleOutlined,} from "@ant-design/icons";
import {Card, Space, Table, Tooltip} from "antd";
import dayjs from "../../../utils/day";
import React, {useState} from "react";
import {useTranslation} from "react-i18next";
import {Link} from "react-router-dom";
import ChatOpenButton from "../../chat-open-button/chat-open-button.component";
import OwnerNameDisplay from "../../owner-name-display/owner-name-display.component";
import DashboardRefreshRequired from "../refresh-required.component";
import {pageLimit} from "../../../utils/config";

export default function DashboardScheduledInToday({data, ...cardProps}) {
    const {t} = useTranslation();
    const [state, setState] = useState({
        sortedInfo: {},
    });
    if (!data) return null;
    if (!data.scheduled_in_today)
        return <DashboardRefreshRequired {...cardProps} />;

    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,
                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: dayjs(item.start).format("hh:mm a"),
                title: item.title,
            };
            appt.push(i);
        }
    });
    appt.sort(function (a, b) {
        return new dayjs(a.start) - new dayjs(b.start);
    });

    const columns = [
        {
            title: t("jobs.fields.ro_number"),
            dataIndex: "ro_number",
            key: "ro_number",
            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,
            responsive: ["md"],
            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("jobs.fields.ownr_ph1"),
            dataIndex: "ownr_ph1",
            key: "ownr_ph1",
            ellipsis: true,
            responsive: ["md"],
            render: (text, record) => (
                <ChatOpenButton phone={record.ownr_ph1} jobid={record.jobid}/>
            ),
        },
        {
            title: t("jobs.fields.ownr_ph2"),
            dataIndex: "ownr_ph2",
            key: "ownr_ph2",
            ellipsis: true,
            responsive: ["md"],
            render: (text, record) => (
                <ChatOpenButton phone={record.ownr_ph2} jobid={record.jobid}/>
            ),
        },
        {
            title: t("jobs.fields.ownr_ea"),
            dataIndex: "ownr_ea",
            key: "ownr_ea",
            ellipsis: true,
            responsive: ["md"],
            render: (text, record) => (
                <ChatOpenButton phone={record.ownr_ea} jobid={record.jobid}/>
            ),
        },
        {
            title: t("jobs.fields.vehicle"),
            dataIndex: "vehicle",
            key: "vehicle",
            ellipsis: true,
            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"],
        },
        {
            title: t("appointments.fields.time"),
            dataIndex: "start",
            key: "start",
            ellipsis: true,
            responsive: ["md"],
        },
        {
            title: t("appointments.fields.alt_transport"),
            dataIndex: "alt_transport",
            key: "alt_transport",
            ellipsis: true,
            responsive: ["md"],
        },
    ];

    const handleTableChange = (sorter) => {
        setState({...state, sortedInfo: sorter});
    };

    return (
        <Card
            title={t("dashboard.titles.scheduledintoday", {
                date: dayjs().startOf("day").format("MM/DD/YYYY"),
            })}
            {...cardProps}
        >
            <div style={{height: "100%"}}>
                <Table
                    onChange={handleTableChange}
                    pagination={{position: "top", defaultPageSize: pageLimit}}
                    columns={columns}
                    scroll={{x: true, y: "calc(100% - 2em)"}}
                    rowKey="id"
                    style={{height: "85%"}}
                    dataSource={appt}
                />
            </div>
        </Card>
    );
}

export const DashboardScheduledInTodayGql = `
  scheduled_in_today: appointments(where: {start: {_gte: "${dayjs()
    .startOf("day")
    .toISOString()}", _lte: "${dayjs()
    .endOf("day")
    .toISOString()}"}, canceled: {_eq: false}, block: {_neq: true}}) {
    canceled
    id
    job {
      alt_transport
      clm_no
      jobid: id
      ins_co_nm
      iouparent
      ownerid
      ownr_co_nm
      ownr_ea
      ownr_fn
      ownr_ln
      ownr_ph1
      ownr_ph2
      production_vars
      ro_number
      suspended
      v_make_desc
      v_model_desc
      v_model_yr
      v_vin
      vehicleid
    }
    note
    start
    title
  }
`;