BOD-16 Added pages + routing for courtesy cars

client/src/components/courtesy-car-form/courtesy-car-form.component.jsx

@@ -0,0 +1,197 @@
+import React from "react";
+import { Form, Input, InputNumber, DatePicker, Button } from "antd";
+import { useTranslation } from "react-i18next";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+export default function CourtesyCarCreateFormComponent() {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Button type="primary" htmlType="submit">
+        {t("general.actions.save")}
+      </Button>
+      <Form.Item
+        label={t("courtesycars.fields.make")}
+        name="make"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.model")}
+        name="model"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.year")}
+        name="year"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.plate")}
+        name="plate"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.color")}
+        name="color"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.vin")}
+        name="vin"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.fleetnumber")}
+        name="fleetnumber"
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.purchasedate")}
+        name="purchasedate"
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.servicestartdate")}
+        name="servicestartdate"
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.serviceenddate")}
+        name="serviceenddate"
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.leaseenddate")}
+        name="leaseenddate"
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.status")}
+        name="status"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.nextservicekm")}
+        name="nextservicekm"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <InputNumber />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.nextservicedate")}
+        name="nextservicedate"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item label={t("courtesycars.fields.damage")} name="damage">
+        <Input />
+      </Form.Item>
+      <Form.Item label={t("courtesycars.fields.notes")} name="notes">
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.fuel")}
+        name="fuel"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.registrationexpires")}
+        name="registrationexpires"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item
+        label={t("courtesycars.fields.insuranceexpires")}
+        name="insuranceexpires"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <DatePicker />
+      </Form.Item>
+      <Form.Item label={t("courtesycars.fields.dailycost")} name="dailycost">
+        <CurrencyInput />
+      </Form.Item>
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+import { Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { alphaSort } from "../../utils/sorters";
+
+export default function JobsList({ loading, courtesycars }) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" }
+  });
+  console.log("courtesycars", courtesycars);
+
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("courtesycars.fields.fleetnumber"),
+      dataIndex: "fleetnumber",
+      key: "fleetnumber",
+      sorter: (a, b) => alphaSort(a.fleetnumber, b.fleetnumber),
+      sortOrder:
+        state.sortedInfo.columnKey === "fleetnumber" && state.sortedInfo.order
+    },
+    {
+      title: t("courtesycars.fields.vin"),
+      dataIndex: "vin",
+      key: "vin",
+      sorter: (a, b) => alphaSort(a.vin, b.vin),
+      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"),
+      dataIndex: "status",
+      key: "status",
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order
+    },
+    {
+      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
+    },
+    {
+      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
+    },
+    {
+      title: t("courtesycars.fields.model"),
+      dataIndex: "model",
+      key: "model",
+      sorter: (a, b) => alphaSort(a.model, b.model),
+      sortOrder:
+        state.sortedInfo.columnKey === "model" && state.sortedInfo.order
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Table
+      loading={loading}
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={courtesycars}
+      onChange={handleTableChange}
+    />
+  );
+}

client/src/components/header/header.component.jsx

@@ -1,4 +1,12 @@
-import { CalendarFilled, CarFilled, GlobalOutlined, HomeFilled, TeamOutlined } from "@ant-design/icons";
+import {
+  CalendarFilled,
+  CarFilled,
+  GlobalOutlined,
+  HomeFilled,
+  TeamOutlined,
+  FileAddFilled,
+  FileFilled
+} from "@ant-design/icons";
 import { Avatar, Col, Menu, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -122,6 +130,28 @@ export default ({
                 </Link>
               </Menu.Item>
             </Menu.SubMenu>
+
+            <Menu.SubMenu title={t("menus.header.courtesycars")}>
+              <Menu.Item key="courtesycarsall">
+                <Link to="/manage/courtesycars">
+                  <CarFilled />
+                  {t("menus.header.courtesycars-all")}
+                </Link>
+              </Menu.Item>
+              <Menu.Item key="contracts">
+                <Link to="/manage/courtesycars/contracts">
+                  <FileFilled />
+                  {t("menus.header.courtesycars-contracts")}
+                </Link>
+              </Menu.Item>
+              <Menu.Item key="newcontract">
+                <Link to="/manage/courtesycars/contracts/new">
+                  <FileAddFilled />
+                  {t("menus.header.courtesycars-newcontract")}
+                </Link>
+              </Menu.Item>
+            </Menu.SubMenu>
+
             <Menu.SubMenu title={t("menus.header.shop")}>
               <Menu.Item key="shop">
                 <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>