In Progress work for Jobs Form.

client/src/components/jobs-list/jobs-list.component.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Table, Divider, Icon } from "antd";
+import { alphaSort } from "../../utils/sorters";
+
+export default function JobsPage({ loading, jobs }) {
+  const [sortedInfo, setSortedInfo] = useState({});
+
+  const columns = [
+    {
+      title: "RO #",
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
+      ellipsis: true,
+      render: (text, record) => (
+        <span>
+          <Link to={`/manage/jobs/${record.id}`}>{record.ro_number}</Link>
+        </span>
+      )
+    },
+    {
+      title: "Est. #",
+      dataIndex: "est_number",
+      key: "est_number"
+    },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a, b),
+      sortOrder: sortedInfo.columnKey === "status" && sortedInfo.order,
+      ellipsis: true
+    },
+    {
+      title: "Customer",
+      dataIndex: "customer",
+      key: "customer",
+      render: (text, record) => {
+        return record.owner ? (
+          <div>
+            {record.owner.first_name} {record.owner.last_name}
+          </div>
+        ) : (
+          "No Customer"
+        );
+      }
+    },
+    {
+      title: "Vehicle",
+      dataIndex: "vehicle",
+      key: "vehicle",
+      render: (text, record) => {
+        return record.vehicle ? (
+          <div>
+            {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
+            {record.vehicle.v_model_desc}
+          </div>
+        ) : (
+          "No Vehicle"
+        );
+      }
+    },
+    {
+      title: "Action",
+      key: "action",
+      render: (text, record) => (
+        <span>
+          Action 一 {record.ro_number}
+          <Divider type="vertical" />
+          <Divider type="vertical" />
+          More actions <Icon type="down" />
+        </span>
+      )
+    }
+  ];
+
+  const handleChange = (pagination, filters, sorter) => {
+    setSortedInfo(sorter);
+  };
+
+  return (
+    <div>
+      <Table
+        loading={loading}
+        pagination={{ position: "bottom" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
+        dataSource={jobs}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}