Added ordering invoice as in house BOD-101

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -1,4 +1,4 @@
-import { Table } from "antd";
+import { Table, Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -7,7 +7,7 @@ import { alphaSort } from "../../utils/sorters";
 export default function CourtesyCarsList({ loading, courtesycars }) {
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
 
   const { t } = useTranslation();
@@ -19,7 +19,7 @@ export default function CourtesyCarsList({ loading, courtesycars }) {
       key: "fleetnumber",
       sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber),
       sortOrder:
-        state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order,
     },
     {
       title: t("courtesycars.fields.vin"),
@@ -29,7 +29,7 @@ export default function CourtesyCarsList({ loading, courtesycars }) {
       sortOrder: state.sortedInfo.columnKey === "vin" && state.sortedInfo.order,
       render: (text, record) => (
         <Link to={`/manage/courtesycars/${record.id}`}>{record.vin}</Link>
-      )
+      ),
     },
     {
       title: t("courtesycars.fields.status"),
@@ -38,21 +38,23 @@ export default function CourtesyCarsList({ loading, courtesycars }) {
       sorter: (a, b) => alphaSort(a.status, b.status),
       sortOrder:
         state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
-      render: (text, record) => t(record.status)
+      render: (text, record) => t(record.status),
     },
     {
       title: t("courtesycars.fields.year"),
       dataIndex: "year",
       key: "year",
       sorter: (a, b) => alphaSort(a.year, b.year),
-      sortOrder: state.sortedInfo.columnKey === "year" && state.sortedInfo.order
+      sortOrder:
+        state.sortedInfo.columnKey === "year" && state.sortedInfo.order,
     },
     {
       title: t("courtesycars.fields.make"),
       dataIndex: "make",
       key: "make",
       sorter: (a, b) => alphaSort(a.make, b.make),
-      sortOrder: state.sortedInfo.columnKey === "make" && state.sortedInfo.order
+      sortOrder:
+        state.sortedInfo.columnKey === "make" && state.sortedInfo.order,
     },
     {
       title: t("courtesycars.fields.model"),
@@ -60,8 +62,8 @@ export default function CourtesyCarsList({ loading, courtesycars }) {
       key: "model",
       sorter: (a, b) => alphaSort(a.model, b.model),
       sortOrder:
-        state.sortedInfo.columnKey === "model" && state.sortedInfo.order
-    }
+        state.sortedInfo.columnKey === "model" && state.sortedInfo.order,
+    },
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -71,9 +73,14 @@ export default function CourtesyCarsList({ loading, courtesycars }) {
   return (
     <Table
       loading={loading}
+      title={() => (
+        <Link to={`/manage/courtesycars/new`}>
+          <Button>{t("courtesycars.actions.new")}</Button>
+        </Link>
+      )}
       size="small"
       pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
+      columns={columns.map((item) => ({ ...item }))}
       rowKey="id"
       dataSource={courtesycars}
       onChange={handleTableChange}