Added jobs list to vehicle detail page.

client/src/components/vehicle-detail-jobs/vehicle-detail-jobs.component.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Table } from "antd";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+export default function VehicleDetailJobsComponent({ vehicle }) {
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      ellipsis: true,
+      render: (text, record) => (
+        <Link to={`/manage/jobs/${record.id}`}>
+          {record.ro_number ? record.ro_number : `EST ${record.est_number}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      render: (text, record) => (
+        <Link to={`/manage/owners/${record.owner.id}`}>
+          {`${record.ownr_fn} ${record.ownr_ln}`}
+        </Link>
+      )
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no"
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status"
+    },
+
+    {
+      title: t("jobs.fields.clm_total"),
+      dataIndex: "clm_total",
+      key: "clm_total",
+      render: (text, record) => (
+        <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
+      )
+    }
+  ];
+
+  return (
+    <Table
+      pagination={{ position: "bottom" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={vehicle.jobs}
+    />
+  );
+}