From 72f4d31b051d996ef31a78dc5812b88667e1b78a Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Tue, 31 Mar 2020 12:11:48 -0700
Subject: [PATCH] BOD-17 Basic creation of a contract functioning.

---
 bodyshop_translations.babel                   | 190 ++++++++++++-
 client/package.json                           |  10 +-
 .../contract-cars/contract-cars.component.jsx | 119 ++++++++
 .../contract-cars/contract-cars.container.jsx |  29 ++
 .../contract-form/contract-form.component.jsx |  45 +--
 .../contract-jobs/contract-jobs.component.jsx | 187 +++++++++++++
 .../contract-jobs/contract-jobs.container.jsx |  38 +++
 .../contract-status-select.component.jsx      |  33 +++
 .../components/header/header.component.jsx    |  31 ++-
 client/src/graphql/cccontracts.queries.js     |  11 +
 client/src/graphql/courtesy-car.queries.js    |  18 ++
 .../contract-create.page.component.jsx        |  13 +-
 .../contract-create.page.container.jsx        |  43 ++-
 client/src/translations/en_us/common.json     |  16 ++
 client/src/translations/es/common.json        |  16 ++
 client/src/translations/fr/common.json        |  16 ++
 client/yarn.lock                              | 259 +++++++++---------
 17 files changed, 884 insertions(+), 190 deletions(-)
 create mode 100644 client/src/components/contract-cars/contract-cars.component.jsx
 create mode 100644 client/src/components/contract-cars/contract-cars.container.jsx
 create mode 100644 client/src/components/contract-jobs/contract-jobs.component.jsx
 create mode 100644 client/src/components/contract-jobs/contract-jobs.container.jsx
 create mode 100644 client/src/components/contract-status-select/contract-status-select.component.jsx
 create mode 100644 client/src/graphql/cccontracts.queries.js

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 68b506d67..baeccc730 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.6.1">
+<babeledit_project be_version="2.6.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -1978,6 +1978,32 @@
                     <folder_node>
                         <name>contracts</name>
                         <children>
+                            <folder_node>
+                                <name>errors</name>
+                                <children>
+                                    <concept_node>
+                                        <name>selectjobandcar</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>fields</name>
                                 <children>
@@ -2424,6 +2450,100 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>status</name>
+                                <children>
+                                    <concept_node>
+                                        <name>new</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>out</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>returned</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                            <folder_node>
+                                <name>successess</name>
+                                <children>
+                                    <concept_node>
+                                        <name>saved</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                         </children>
                     </folder_node>
                     <folder_node>
@@ -2880,6 +3000,74 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>statuses</name>
+                                <children>
+                                    <concept_node>
+                                        <name>in</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>inservice</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>out</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>successes</name>
                                 <children>
diff --git a/client/package.json b/client/package.json
index 817621cd2..167e9cf15 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,9 +7,9 @@
     "@ckeditor/ckeditor5-build-classic": "^18.0.0",
     "@ckeditor/ckeditor5-react": "^2.1.0",
     "@nivo/pie": "^0.61.1",
-    "@tanem/react-nprogress": "^3.0.19",
+    "@tanem/react-nprogress": "^3.0.20",
     "aamva": "^1.2.0",
-    "antd": "^4.0.4",
+    "antd": "^4.1.0",
     "apollo-boost": "^0.4.4",
     "apollo-link-context": "^1.0.19",
     "apollo-link-error": "^1.1.12",
@@ -18,9 +18,9 @@
     "apollo-link-ws": "^1.0.19",
     "axios": "^0.19.2",
     "dotenv": "^8.2.0",
-    "firebase": "^7.12.0",
+    "firebase": "^7.13.1",
     "graphql": "^14.6.0",
-    "i18next": "^19.3.3",
+    "i18next": "^19.3.4",
     "node-sass": "^4.13.1",
     "react": "^16.13.1",
     "react-apollo": "^3.1.3",
@@ -73,6 +73,6 @@
     "@apollo/react-testing": "^3.1.3",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "source-map-explorer": "^2.3.1"
+    "source-map-explorer": "^2.4.2"
   }
 }
diff --git a/client/src/components/contract-cars/contract-cars.component.jsx b/client/src/components/contract-cars/contract-cars.component.jsx
new file mode 100644
index 000000000..75cec3ab9
--- /dev/null
+++ b/client/src/components/contract-cars/contract-cars.component.jsx
@@ -0,0 +1,119 @@
+import { Input, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+
+export default function ContractsCarsComponent({
+  loading,
+  data,
+  selectedCar,
+  handleSelect
+}) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+    search: ""
+  });
+
+  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.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
+    },
+    {
+      title: t("courtesycars.fields.plate"),
+      dataIndex: "plate",
+      key: "plate",
+      sorter: (a, b) => alphaSort(a.plate, b.plate),
+      sortOrder:
+        state.sortedInfo.columnKey === "plate" && state.sortedInfo.order
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const filteredData =
+    state.search === ""
+      ? data
+      : data.filter(
+          cc =>
+            (cc.fleetnumber || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.status || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.year || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.make || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.model || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (cc.plate || "").toLowerCase().includes(state.search.toLowerCase())
+        );
+  console.log("filteredData", filteredData);
+  return (
+    <Table
+      loading={loading}
+      title={() => (
+        <Input.Search
+          placeholder={t("general.labels.search")}
+          value={state.search}
+          onChange={e => setState({ ...state, search: e.target.value })}
+        />
+      )}
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={filteredData}
+      onChange={handleTableChange}
+      rowSelection={{
+        onSelect: handleSelect,
+        type: "radio",
+        selectedRowKeys: [selectedCar]
+      }}
+    />
+  );
+}
diff --git a/client/src/components/contract-cars/contract-cars.container.jsx b/client/src/components/contract-cars/contract-cars.container.jsx
new file mode 100644
index 000000000..b9198eb6d
--- /dev/null
+++ b/client/src/components/contract-cars/contract-cars.container.jsx
@@ -0,0 +1,29 @@
+import { useQuery } from "@apollo/react-hooks";
+import React from "react";
+import { QUERY_AVAILABLE_CC } from "../../graphql/courtesy-car.queries";
+import AlertComponent from "../alert/alert.component";
+import ContractCarsComponent from "./contract-cars.component";
+
+
+
+export default function ContractCarsContainer({ selectedCarState, bodyshop }) {
+  const { loading, error, data } = useQuery(QUERY_AVAILABLE_CC);
+
+  const [selectedCar, setSelectedCar] = selectedCarState;
+
+  const handleSelect = record => {
+    setSelectedCar(record.id);
+  };
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <div>
+      <ContractCarsComponent
+        handleSelect={handleSelect}
+        selectedCar={selectedCar}
+        loading={loading}
+        data={data ? data.courtesycars : []}
+      />
+    </div>
+  );
+}
diff --git a/client/src/components/contract-form/contract-form.component.jsx b/client/src/components/contract-form/contract-form.component.jsx
index 7f8fdb73f..f7952a7ba 100644
--- a/client/src/components/contract-form/contract-form.component.jsx
+++ b/client/src/components/contract-form/contract-form.component.jsx
@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Input, DatePicker, InputNumber, Button } from "antd";
 import aamva from "aamva";
+import InputPhone from "../form-items-formatted/phone-form-item.component";
+import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 
 export default function ContractFormComponent() {
   const [state, setState] = useState("");
@@ -15,9 +17,7 @@ export default function ContractFormComponent() {
           //let data = state;
 
           var data =
-            "%FLDELRAY BEACH^DOE$JOHN$^4818 S FEDERAL BLVD^           ?\
-            ;6360100462172082009=2101198299090=?\
-            #! 33435      I               1600                                   ECCECC00000?";
+            "%FLDELRAY BEACH^DOE$JOHN$^4818 S FEDERAL BLVD^           ?            ;6360100462172082009=2101198299090=?            #! 33435      I               1600                                   ECCECC00000?";
           data = data.replace(/\n/, "");
           // replace spaces with regular space
           data = data.replace(/\s/g, " ");
@@ -32,7 +32,7 @@ export default function ContractFormComponent() {
       </Button>
       <Form.Item
         label={t("contracts.fields.status")}
-        name="status "
+        name="status"
         rules={[
           {
             required: true,
@@ -40,7 +40,7 @@ export default function ContractFormComponent() {
           }
         ]}
       >
-        <Input />
+        <ContractStatusSelector />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.start")}
@@ -66,16 +66,7 @@ export default function ContractFormComponent() {
       >
         <DatePicker />
       </Form.Item>
-      <Form.Item
-        label={t("contracts.fields.actualreturn")}
-        name="actualreturn"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+      <Form.Item label={t("contracts.fields.actualreturn")} name="actualreturn">
         <DatePicker />
       </Form.Item>
       <Form.Item
@@ -90,16 +81,7 @@ export default function ContractFormComponent() {
       >
         <InputNumber />
       </Form.Item>
-      <Form.Item
-        label={t("contracts.fields.kmend")}
-        name="kmend"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+      <Form.Item label={t("contracts.fields.kmend")} name="kmend">
         <InputNumber />
       </Form.Item>
       <Form.Item
@@ -174,16 +156,7 @@ export default function ContractFormComponent() {
       >
         <Input />
       </Form.Item>
-      <Form.Item
-        label={t("contracts.fields.driver_addr2")}
-        name="driver_addr2"
-        rules={[
-          {
-            required: true,
-            message: t("general.validation.required")
-          }
-        ]}
-      >
+      <Form.Item label={t("contracts.fields.driver_addr2")} name="driver_addr2">
         <Input />
       </Form.Item>
       <Form.Item
@@ -232,7 +205,7 @@ export default function ContractFormComponent() {
           }
         ]}
       >
-        <Input />
+        <InputPhone />
       </Form.Item>
       <Form.Item
         label={t("contracts.fields.driver_dob")}
diff --git a/client/src/components/contract-jobs/contract-jobs.component.jsx b/client/src/components/contract-jobs/contract-jobs.component.jsx
new file mode 100644
index 000000000..c75d96b52
--- /dev/null
+++ b/client/src/components/contract-jobs/contract-jobs.component.jsx
@@ -0,0 +1,187 @@
+import { Table, Input } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+
+export default function ContractsJobsComponent({
+  loading,
+  data,
+  selectedJob,
+  handleSelect
+}) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+    search: ""
+  });
+
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      width: "8%",
+      sorter: (a, b) =>
+        alphaSort(
+          a.ro_number ? a.ro_number : "EST-" + a.est_number,
+          b.ro_number ? b.ro_number : "EST-" + b.est_number
+        ),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+
+      render: (text, record) => (
+        <span>
+          {record.ro_number ? record.ro_number : "EST-" + record.est_number}
+        </span>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
+      width: "25%",
+      sortOrder:
+        state.sortedInfo.columnKey === "owner" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.owner ? (
+          <span>
+            {record.ownr_fn} {record.ownr_ln}
+          </span>
+        ) : (
+          <span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      width: "10%",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.status, b.status),
+      sortOrder:
+        state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.status || t("general.labels.na");
+      }
+    },
+
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      width: "15%",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.vehicleid ? (
+          <span>
+            {`${record.v_model_yr || ""} ${record.v_make_desc ||
+              ""} ${record.v_model_desc || ""}`}
+          </span>
+        ) : (
+          t("jobs.errors.novehicle")
+        );
+      }
+    },
+    {
+      title: t("vehicles.fields.plate_no"),
+      dataIndex: "plate_no",
+      key: "plate_no",
+      width: "8%",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.plate_no, b.plate_no),
+      sortOrder:
+        state.sortedInfo.columnKey === "plate_no" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.plate_no ? (
+          <span>{record.plate_no}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no",
+      width: "12%",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
+      sortOrder:
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
+      render: (text, record) => {
+        return record.clm_no ? (
+          <span>{record.clm_no}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const filteredData =
+    state.search === ""
+      ? data
+      : data.filter(
+          j =>
+            (j.est_number || "")
+              .toString()
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (j.ro_number || "")
+              .toString()
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (j.ownr_fn || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (j.ownr_ln || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (j.clm_no || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (j.v_make_desc || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (j.v_model_desc || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase()) ||
+            (j.plate_no || "")
+              .toLowerCase()
+              .includes(state.search.toLowerCase())
+        );
+
+  console.log("filteredData", filteredData);
+  return (
+    <Table
+      loading={loading}
+      title={() => (
+        <Input.Search
+          placeholder={t("general.labels.search")}
+          value={state.search}
+          onChange={e => setState({ ...state, search: e.target.value })}
+        />
+      )}
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={filteredData}
+      onChange={handleTableChange}
+      rowSelection={{
+        onSelect: handleSelect,
+        type: "radio",
+        selectedRowKeys: [selectedJob]
+      }}
+    />
+  );
+}
diff --git a/client/src/components/contract-jobs/contract-jobs.container.jsx b/client/src/components/contract-jobs/contract-jobs.container.jsx
new file mode 100644
index 000000000..cd626e75a
--- /dev/null
+++ b/client/src/components/contract-jobs/contract-jobs.container.jsx
@@ -0,0 +1,38 @@
+import { useQuery } from "@apollo/react-hooks";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import ContractJobsComponent from "./contract-jobs.component";
+import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop
+});
+export function ContractJobsContainer({ selectedJobState, bodyshop }) {
+  const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+    variables: {
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
+    }
+  });
+  const [selectedJob, setSelectedJob] = selectedJobState;
+
+  const handleSelect = record => {
+    setSelectedJob(record.id);
+  };
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <div>
+      <ContractJobsComponent
+        handleSelect={handleSelect}
+        selectedJob={selectedJob}
+        loading={loading}
+        data={data ? data.jobs : []}
+      />
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(ContractJobsContainer);
diff --git a/client/src/components/contract-status-select/contract-status-select.component.jsx b/client/src/components/contract-status-select/contract-status-select.component.jsx
new file mode 100644
index 000000000..86d282187
--- /dev/null
+++ b/client/src/components/contract-status-select/contract-status-select.component.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Select } from "antd";
+import { useTranslation } from "react-i18next";
+const { Option } = Select;
+
+const ContractStatusComponent = ({ value = "", onChange }) => {
+  const [option, setOption] = useState("contracts.status.new");
+  const { t } = useTranslation();
+
+  const onChangeSelect = newOption => {
+    setOption(newOption);
+    if (onChange) {
+      onChange(newOption);
+    }
+  };
+
+  return (
+    <Select
+      value={option}
+      style={{
+        width: 100
+      }}
+      onChange={onChangeSelect}
+    >
+      <Option value="contracts.status.new">{t("contracts.status.new")}</Option>
+      <Option value="contracts.status.out">{t("contracts.status.out")}</Option>
+      <Option value="contracts.status.returned">
+        {t("contracts.status.returned")}
+      </Option>
+    </Select>
+  );
+};
+export default ContractStatusComponent;
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index d8b8dd4c5..c5bd6216a 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -1,15 +1,8 @@
-import {
-  CalendarFilled,
-  CarFilled,
-  GlobalOutlined,
-  HomeFilled,
-  TeamOutlined,
-  FileAddFilled,
-  FileFilled
-} from "@ant-design/icons";
+import Icon, { CarFilled, FileAddFilled, FileFilled, GlobalOutlined, HomeFilled, TeamOutlined } from "@ant-design/icons";
 import { Avatar, Col, Menu, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { FaCalendarAlt, FaCarCrash } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import UserImage from "../../assets/User.svg";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
@@ -100,10 +93,17 @@ export default ({
                 {t("menus.header.home")}
               </Link>
             </Menu.Item>
-            <Menu.SubMenu title={t("menus.header.jobs")}>
+            <Menu.SubMenu
+              title={
+                <span>
+                  <Icon component={FaCarCrash} />
+                  <span>{t("menus.header.jobs")}</span>
+                </span>
+              }
+            >
               <Menu.Item key="schedule">
                 <Link to="/manage/schedule">
-                  <CalendarFilled />
+                  <Icon component={FaCalendarAlt} />
                   {t("menus.header.schedule")}
                 </Link>
               </Menu.Item>
@@ -131,7 +131,14 @@ export default ({
               </Menu.Item>
             </Menu.SubMenu>
 
-            <Menu.SubMenu title={t("menus.header.courtesycars")}>
+            <Menu.SubMenu
+              title={
+                <span>
+                  <CarFilled />
+                  <span>{t("menus.header.courtesycars")}</span>
+                </span>
+              }
+            >
               <Menu.Item key="courtesycarsall">
                 <Link to="/manage/courtesycars">
                   <CarFilled />
diff --git a/client/src/graphql/cccontracts.queries.js b/client/src/graphql/cccontracts.queries.js
new file mode 100644
index 000000000..5436e4c33
--- /dev/null
+++ b/client/src/graphql/cccontracts.queries.js
@@ -0,0 +1,11 @@
+import { gql } from "apollo-boost";
+
+export const INSERT_NEW_CONTRACT = gql`
+  mutation INSERT_NEW_CONTRACT($contract: [cccontracts_insert_input!]!) {
+    insert_cccontracts(objects: $contract) {
+      returning {
+        id
+      }
+    }
+  }
+`;
diff --git a/client/src/graphql/courtesy-car.queries.js b/client/src/graphql/courtesy-car.queries.js
index 1457d5b7a..3d64201fd 100644
--- a/client/src/graphql/courtesy-car.queries.js
+++ b/client/src/graphql/courtesy-car.queries.js
@@ -12,6 +12,24 @@ export const INSERT_NEW_COURTESY_CAR = gql`
   }
 `;
 
+export const QUERY_AVAILABLE_CC = gql`
+  query QUERY_AVAILABLE_CC {
+    courtesycars(where: {serviceenddate: {_is_null: true}}) {
+      color
+      dailycost
+      damage
+      fleetnumber
+      fuel
+      id
+      make
+      model
+      plate
+      status
+      year
+    }
+  }
+`;
+
 export const QUERY_ALL_CC = gql`
   query QUERY_ALL_CC {
     courtesycars {
diff --git a/client/src/pages/contract-create/contract-create.page.component.jsx b/client/src/pages/contract-create/contract-create.page.component.jsx
index 750ac7793..9f136c19a 100644
--- a/client/src/pages/contract-create/contract-create.page.component.jsx
+++ b/client/src/pages/contract-create/contract-create.page.component.jsx
@@ -1,9 +1,20 @@
 import React from "react";
 import ContractFormComponent from "../../components/contract-form/contract-form.component";
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import ContractJobsContainer from "../../components/contract-jobs/contract-jobs.container";
+import ContractCarsContainer from "../../components/contract-cars/contract-cars.container";
 
-export default function ContractCreatePageComponent() {
+export default function ContractCreatePageComponent({
+  selectedJobState,
+  selectedCarState
+}) {
+  const { t } = useTranslation();
   return (
     <div>
+      <Button htmlType="submit">{t("general.actions.create")}</Button>
+      <ContractJobsContainer selectedJobState={selectedJobState} />
+      <ContractCarsContainer selectedCarState={selectedCarState} />
       <ContractFormComponent />
     </div>
   );
diff --git a/client/src/pages/contract-create/contract-create.page.container.jsx b/client/src/pages/contract-create/contract-create.page.container.jsx
index 2947e7f59..85d8c0f60 100644
--- a/client/src/pages/contract-create/contract-create.page.container.jsx
+++ b/client/src/pages/contract-create/contract-create.page.container.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import ContractCreatePageComponent from "./contract-create.page.component";
 import { connect } from "react-redux";
@@ -6,7 +6,8 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { Form, notification } from "antd";
 import { useTranslation } from "react-i18next";
-
+import { INSERT_NEW_CONTRACT } from "../../graphql/cccontracts.queries";
+import { useMutation } from "@apollo/react-hooks";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
@@ -14,15 +15,33 @@ const mapStateToProps = createStructuredSelector({
 export function ContractCreatePageContainer({ bodyshop }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
+  const selectedCarState = useState(null);
+  const selectedJobState = useState(null);
+
+  const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
 
   const handleFinish = values => {
-    //   insertCourtesyCar({
-    //     variables: { courtesycar: { ...values, bodyshopid: bodyshop.id } }
-    //   })
-    //     .then(response => {
-    notification["success"]({ message: t("courtesycars.successes.saved") });
-    //     })
-    //     .catch(error => console.log("error", error));
+    if (!!selectedCarState[0] && !!selectedJobState[0]) {
+      insertContract({
+        variables: {
+          contract: {
+            ...values,
+            courtesycarid: selectedCarState[0],
+            jobid: selectedJobState[0]
+          }
+        }
+      })
+        .then(response => {
+          notification["success"]({
+            message: t("contracts.successes.saved")
+          });
+        })
+        .catch(error => console.log("error", error));
+    } else {
+      notification["error"]({
+        message: t("contracts.errors.selectjobandcar")
+      });
+    }
   };
 
   useEffect(() => {
@@ -31,7 +50,11 @@ export function ContractCreatePageContainer({ bodyshop }) {
 
   return (
     <Form form={form} autoComplete="no" onFinish={handleFinish}>
-      <ContractCreatePageComponent />
+      <button onClick={() => console.log(form.getFieldsValue())}>t</button>
+      <ContractCreatePageComponent
+        selectedJobState={selectedJobState}
+        selectedCarState={selectedCarState}
+      />
     </Form>
   );
 }
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 725403a1e..21ba8d21c 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -140,6 +140,9 @@
 			}
 		},
 		"contracts": {
+			"errors": {
+				"selectjobandcar": "Please ensure both a car and job are selected."
+			},
 			"fields": {
 				"actualreturn": "Actual Return Date",
 				"cc_cardholder": "Cardholder Name",
@@ -162,6 +165,14 @@
 				"scheduledreturn": "Scheduled Return",
 				"start": "Contract Start",
 				"status": "Status"
+			},
+			"status": {
+				"new": "New Contract",
+				"out": "Current",
+				"returned": "Returned"
+			},
+			"successess": {
+				"saved": "Contract saved successfully. "
 			}
 		},
 		"courtesycars": {
@@ -190,6 +201,11 @@
 				"vin": "VIN",
 				"year": "Year"
 			},
+			"statuses": {
+				"in": "Available",
+				"inservice": "In Service",
+				"out": "Rented"
+			},
 			"successes": {
 				"saved": "Courtesy Car saved successfully."
 			}
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 07540675c..14582e6f5 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -140,6 +140,9 @@
 			}
 		},
 		"contracts": {
+			"errors": {
+				"selectjobandcar": ""
+			},
 			"fields": {
 				"actualreturn": "",
 				"cc_cardholder": "",
@@ -162,6 +165,14 @@
 				"scheduledreturn": "",
 				"start": " ",
 				"status": ""
+			},
+			"status": {
+				"new": "",
+				"out": "",
+				"returned": ""
+			},
+			"successess": {
+				"saved": ""
 			}
 		},
 		"courtesycars": {
@@ -190,6 +201,11 @@
 				"vin": "",
 				"year": ""
 			},
+			"statuses": {
+				"in": "",
+				"inservice": "",
+				"out": ""
+			},
 			"successes": {
 				"saved": ""
 			}
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 7a2653360..bbab0a4f9 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -140,6 +140,9 @@
 			}
 		},
 		"contracts": {
+			"errors": {
+				"selectjobandcar": ""
+			},
 			"fields": {
 				"actualreturn": "",
 				"cc_cardholder": "",
@@ -162,6 +165,14 @@
 				"scheduledreturn": "",
 				"start": "",
 				"status": ""
+			},
+			"status": {
+				"new": "",
+				"out": "",
+				"returned": ""
+			},
+			"successess": {
+				"saved": ""
 			}
 		},
 		"courtesycars": {
@@ -190,6 +201,11 @@
 				"vin": "",
 				"year": ""
 			},
+			"statuses": {
+				"in": "",
+				"inservice": "",
+				"out": ""
+			},
 			"successes": {
 				"saved": ""
 			}
diff --git a/client/yarn.lock b/client/yarn.lock
index ba6a377a9..1f1c3a649 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1287,20 +1287,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.8.4":
+"@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.8.7":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
-  integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.4.0", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@@ -1410,17 +1403,17 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@firebase/analytics-types@0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.2.8.tgz#f451b2a30f6c73af7e4c59a80e9bdc059d2486eb"
-  integrity sha512-7djG+mVLubSFy5ZEf8Gyn7XzrsLvpXCRj+vj6ta3KtwF2iCsOG4HvGv1TiU+sNwR017cAm2F0qmaAMac90Qq0g==
+"@firebase/analytics-types@0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.3.0.tgz#33c3f695313b561d48d18d663a20f20362d3ee7c"
+  integrity sha512-0AJ6xn53Qn0D/YOVHHvlWFfnzzRSdd98Lr8Oqe1PJ2HPIN+o7qf03YmOG7fLpR1uplcWd+7vGKmxUrN3jKUBwg==
 
-"@firebase/analytics@0.2.18":
-  version "0.2.18"
-  resolved "https://registry.yarnpkg.com/@firebase/analytics/-/analytics-0.2.18.tgz#c6b8b3c5684237b0d8b08a8047cb18e18a671a54"
-  integrity sha512-sw8TO7YYRnrcqQGYWjWHw6PTNpwWPSZzMaFgLp5oJKsKM7CoOz5K/fxEIfZIF36Zzf0Xky3oU8msek/Zjc5Phg==
+"@firebase/analytics@0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics/-/analytics-0.3.0.tgz#943e73e792ba3f282df4d47aff5a1603b93b37a5"
+  integrity sha512-EEHuK+OcWH6UxufRLVU3lAJ4rmm7aVHmcgkhE9ZQJQy5c+w7QTLvVpGqtrpqD+cYyIBJkFBKJB8NziVyqKwQHw==
   dependencies:
-    "@firebase/analytics-types" "0.2.8"
+    "@firebase/analytics-types" "0.3.0"
     "@firebase/component" "0.1.8"
     "@firebase/installations" "0.4.6"
     "@firebase/logger" "0.2.0"
@@ -1495,10 +1488,10 @@
   resolved "https://registry.yarnpkg.com/@firebase/firestore-types/-/firestore-types-1.10.1.tgz#bf018f9c495f470592de745389474dc1c2960d3f"
   integrity sha512-vyKdm+AYUFT8XeUX62IOqaqPFCs/mAMoSEsqIz9HnSVsqCw/IocNjtjSa+3M80kRw4V8fI7JI+Xz6Wg5VJXLqA==
 
-"@firebase/firestore@1.12.2":
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/@firebase/firestore/-/firestore-1.12.2.tgz#2688c9ef726eed8078bd92414c00b052ae167e03"
-  integrity sha512-Obv+jqyAvYEBZHXSQs5EI0q5R8wylVz/GHHMWtkxAWpXvZjpTYZuKcvxJ9Ugi9SwhgvxbdmmnrI/4FwjQjYi7Q==
+"@firebase/firestore@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@firebase/firestore/-/firestore-1.13.0.tgz#2638f25b2a3d19cb891a6b334a0dc14aefef5a34"
+  integrity sha512-GctO+sxLqOnY8SkBN5Z5p1nUYRX+yWSc9Kcx9nIPbUZ0WqBM5BaSlBHZHTFtjmJxS+0j/Y8Mu7c6qm6q5rVnjA==
   dependencies:
     "@firebase/component" "0.1.8"
     "@firebase/firestore-types" "1.10.1"
@@ -2102,15 +2095,15 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
-"@tanem/react-nprogress@^3.0.19":
-  version "3.0.19"
-  resolved "https://registry.yarnpkg.com/@tanem/react-nprogress/-/react-nprogress-3.0.19.tgz#c0bec53f87d0949d6d353b01e447ccade198ae25"
-  integrity sha512-BzKc/cp/AqdpIjb1rOCuqrr7AG7enTUioX05ikGgNQmMuRGbpOiC4NscJio0Nfi5dss00OPWkZxC33e5bIfOww==
+"@tanem/react-nprogress@^3.0.20":
+  version "3.0.20"
+  resolved "https://registry.yarnpkg.com/@tanem/react-nprogress/-/react-nprogress-3.0.20.tgz#98dc33c45460e1d751f6459dca4a8e732c468749"
+  integrity sha512-eZVDIKCVkTpEQmDVHrrAg3DlofPYR2K/tLgP4XLUQeAzVvMZ4W/GOhEajUGn740JCo6xAaBNhrf3i11ir6/8OA==
   dependencies:
-    "@babel/runtime" "^7.8.7"
+    "@babel/runtime" "^7.9.2"
     hoist-non-react-statics "^3.3.2"
     prop-types "^15.7.2"
-    react-use "^13.27.0"
+    react-use "^13.27.1"
 
 "@types/babel__core@^7.1.0":
   version "7.1.6"
@@ -2476,10 +2469,10 @@
   dependencies:
     tslib "^1.9.3"
 
-"@xobotyi/scrollbar-width@1.9.4":
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.4.tgz#a7dce20b7465bcad29cd6bbb557695e4ea7863cb"
-  integrity sha512-o12FCQt/X5n3pgKEWGpt0f/7Eg4mfv3uRwPUrctiOT8ZuxbH3cNLGWfH/8y6KxVJg4L2885ucuXQ6XECZzUiJA==
+"@xobotyi/scrollbar-width@1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -2686,10 +2679,10 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
     "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
-antd@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/antd/-/antd-4.0.4.tgz#fe7bf58151e069226941a4febe429f1e2f6c596f"
-  integrity sha512-wPcUzQBDDEFrA2L7b1HOHcVhXZk11nl773XQHb6wtQR6NANY11T8xNJ3GRZ/yB3sfzsWqXYCBGBui/12Dmu3nQ==
+antd@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/antd/-/antd-4.1.0.tgz#1e0b07a19d4887e09d47bdd50a3b483bb2c372c4"
+  integrity sha512-xj/GhuSlvWouZ6L3/qdZ6I9b4IWaDeNaGVlm5D18cNY0pNZTK2zh5ov130KDb6YERtAnA5BLU+5U+cvfbvJUcw==
   dependencies:
     "@ant-design/icons" "^4.0.0"
     "@ant-design/react-slick" "~0.25.5"
@@ -2709,29 +2702,29 @@ antd@^4.0.4:
     rc-dialog "~7.6.0"
     rc-drawer "~3.1.1"
     rc-dropdown "~3.0.0"
-    rc-field-form "~1.0.0"
+    rc-field-form "~1.1.0"
     rc-input-number "~4.5.4"
     rc-mentions "~1.0.0"
     rc-menu "~8.0.1"
     rc-notification "~4.0.0"
-    rc-pagination "~2.0.1"
-    rc-picker "~1.1.0"
+    rc-pagination "~2.2.0"
+    rc-picker "~1.4.0"
     rc-progress "~2.5.0"
     rc-rate "~2.5.1"
-    rc-resize-observer "^0.1.0"
-    rc-select "~10.0.0"
+    rc-resize-observer "^0.2.0"
+    rc-select "~10.1.0"
     rc-slider "~9.2.3"
     rc-steps "~3.5.0"
     rc-switch "~1.9.0"
     rc-table "~7.3.0"
-    rc-tabs "~10.0.0"
+    rc-tabs "~10.1.1"
     rc-tooltip "~4.0.2"
-    rc-tree "~3.0.0"
-    rc-tree-select "~3.0.0"
+    rc-tree "~3.1.0"
+    rc-tree-select "~3.1.0"
     rc-trigger "~4.0.0"
     rc-upload "~3.0.0"
     rc-util "^4.20.0"
-    rc-virtual-list "~1.0.0"
+    rc-virtual-list "^1.1.0"
     resize-observer-polyfill "^1.5.1"
     scroll-into-view-if-needed "^2.2.20"
     warning "~4.0.3"
@@ -5127,10 +5120,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-ejs@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.0.1.tgz#30c8f6ee9948502cc32e85c37a3f8b39b5a614a5"
-  integrity sha512-cuIMtJwxvzumSAkqaaoGY/L6Fc/t6YvoP9/VIaK0V/CyqKLEQ8sqODmYfy/cjXEdZ9+OOL8TecbJu+1RsofGDw==
+ejs@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.0.2.tgz#745b01cdcfe38c1c6a2da3bbb2d9957060a31226"
+  integrity sha512-IncmUpn1yN84hy2shb0POJ80FWrfGNY0cxO9f4v+/sG7qcBvAtVWUA1IdzY/8EYUmOVhoKJVdJjNd3AZcnxOjA==
 
 electron-to-chromium@^1.3.361:
   version "1.3.363"
@@ -5961,17 +5954,17 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-firebase@^7.12.0:
-  version "7.12.0"
-  resolved "https://registry.yarnpkg.com/firebase/-/firebase-7.12.0.tgz#aafaa51f0b081e356c2df670e39f8bd7c2f7d774"
-  integrity sha512-OXOOYE1RATpkBPEbiwW4qlz/raXkpAEqtxXeRKDIqJcSuzK2oyBVj5zrME1sqk77e0gjIlpbvpV0Vm36cFgpYg==
+firebase@^7.13.1:
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-7.13.1.tgz#f9c05ef60341cf8f7796ad7b8f3181b31be6dcf5"
+  integrity sha512-v4Z7Wioy/7LMC8RJn1jNlOaUqLK7bUEva+Uf+qrbtFd7hM2rWLW+0IqHZBwPrQ5tI604uHj7IlhqAZEjm38AMw==
   dependencies:
-    "@firebase/analytics" "0.2.18"
+    "@firebase/analytics" "0.3.0"
     "@firebase/app" "0.6.0"
     "@firebase/app-types" "0.6.0"
     "@firebase/auth" "0.14.1"
     "@firebase/database" "0.5.24"
-    "@firebase/firestore" "1.12.2"
+    "@firebase/firestore" "1.13.0"
     "@firebase/functions" "0.4.38"
     "@firebase/installations" "0.4.6"
     "@firebase/messaging" "0.6.10"
@@ -6735,10 +6728,10 @@ hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.2:
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
   integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
 
-i18next@^19.3.3:
-  version "19.3.3"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.3.3.tgz#04bd79b315e5fe2c87ab8f411e5d55eda0a17bd8"
-  integrity sha512-CnuPqep5/JsltkGvQqzYN4d79eCe0TreCBRF3a8qHHi8x4SON1qqZ/pvR2X7BfNkNqpA5HXIqw0E731H+VsgSg==
+i18next@^19.3.4:
+  version "19.3.4"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.3.4.tgz#512de50ee6075df825c646e1ce646a104f0938c9"
+  integrity sha512-ef7AxxutzdhBsBNugE9jgqsbwesG1muJOtZ9ZrPARPs/jXegViTp4+8JCeMp8BAyTIo1Zn0giqc8+2UpqFjU0w==
   dependencies:
     "@babel/runtime" "^7.3.1"
 
@@ -9248,6 +9241,14 @@ open@^7.0.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
+open@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.3.tgz#db551a1af9c7ab4c7af664139930826138531c48"
+  integrity sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -10790,10 +10791,10 @@ rc-dropdown@~3.0.0:
     classnames "^2.2.6"
     rc-trigger "^4.0.0"
 
-rc-field-form@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-1.0.1.tgz#b7517363acbcb8cc67cf8edfe4674c2cd88e4f5d"
-  integrity sha512-0m9ydH+XQtEwdTOrUgGqv0q6WCDQKNqwHiUB4fKZUdpLze/7i7gGIDVAc6CUNiTMb2Y5+V+wPtYhF4rBPhsX3g==
+rc-field-form@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-1.1.1.tgz#73f6a2d414005453bb70240abf39247a35b6ae18"
+  integrity sha512-nS/4BZ+Ikzk5/AYRZn3iGsJKJMBa/IQbe4bxYd/u1u5GMs630tHnKimxRJ5U/emdC1ZbVG3YahlSRin+1hKikA==
   dependencies:
     "@babel/runtime" "^7.8.4"
     async-validator "^3.0.3"
@@ -10853,17 +10854,17 @@ rc-notification@~4.0.0:
     rc-animate "2.x"
     rc-util "^4.0.4"
 
-rc-pagination@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/rc-pagination/-/rc-pagination-2.0.1.tgz#40deddb43173d951e2449c7d3f9951890f477ba1"
-  integrity sha512-jvLb05p1OEBUxRobWFjnrj6vRyvhG8XHouK6qh+eepCHPo7HDzUHHztvUUAWr5f+WnKldAXqdPcGgbM4rCH1OA==
+rc-pagination@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/rc-pagination/-/rc-pagination-2.2.0.tgz#8daaab1b6ad664da2ddea842f86687b692eb775d"
+  integrity sha512-fXempMD/kvHu8tsiW70uPjn1pI4mdD62xFG9drcBh17gj5CbCjazrjpWS615RSauk3b2BBgIcAJzREAMvlAkFQ==
   dependencies:
     classnames "^2.2.1"
 
-rc-picker@~1.1.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-1.1.5.tgz#131a6d42f33ac61939516d02b4331703c3af0074"
-  integrity sha512-4Ea42Yg/0J95typselVZj4kDu+eNKT1s31tFwAbLNnzCg3l6VUe9jtSLNMkl1rHWICg+RNmeuM0Ua1NAHpXR7Q==
+rc-picker@~1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-1.4.2.tgz#b7955b7690d913177948ba0fc0640cc307d18874"
+  integrity sha512-e1XDwpAjvK34I/R/DmcaFgIg/lQBO+J266Pe0+ItbrEivDFmfVKcd1anaIGB4T2Mu9vOyjp+vT+i9ohb9uMEOg==
   dependencies:
     classnames "^2.2.1"
     moment "^2.24.0"
@@ -10889,7 +10890,7 @@ rc-rate@~2.5.1:
     rc-util "^4.3.0"
     react-lifecycles-compat "^3.0.4"
 
-rc-resize-observer@^0.1.0, rc-resize-observer@^0.1.2:
+rc-resize-observer@^0.1.2:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-0.1.3.tgz#097191f9c3ab186ed907b553ba6ef565df11c249"
   integrity sha512-uzOQEwx83xdQSFOkOAM7x7GHIQKYnrDV4dWxtCxyG1BS1pkfJ4EvDeMfsvAJHSYkQXVBu+sgRHGbRtLG3qiuUg==
@@ -10898,16 +10899,25 @@ rc-resize-observer@^0.1.0, rc-resize-observer@^0.1.2:
     rc-util "^4.13.0"
     resize-observer-polyfill "^1.5.1"
 
-rc-select@~10.0.0:
-  version "10.0.4"
-  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-10.0.4.tgz#8a5fe65c8395df21c94ceb80e1cd8ec64a1b5cc7"
-  integrity sha512-yYua9bsg23GKrsp99kenqbzxt/Snvg2rIusUs+APhgOV3IBlZhfznOOnqQxFHHZa1sdc5hYt6qsWxjtFm8grtQ==
+rc-resize-observer@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-0.2.1.tgz#4610acb8a0f2a84b5e8d45664964ac32b5d3df72"
+  integrity sha512-GENTRkL3lq05ilrjTxPpHUPrKTC9D7XqUGesSXgi/GyO4j/jKIjLPn7zuZOcJ5QmN5QGRe24IaVWPZHQPE6vLw==
+  dependencies:
+    classnames "^2.2.1"
+    rc-util "^4.14.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-select@^10.1.0, rc-select@~10.1.0:
+  version "10.1.7"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-10.1.7.tgz#56b867bec059d904adf36576b7cb592386b19a57"
+  integrity sha512-ayFG4YtjJTrH5hv9ezqeyaUzDtzp/PcAberf/V6S5ocf6J4kdsIDjVDhTcJME1VTTtBA8XCJLhl/YriQFPY0Tw==
   dependencies:
     classnames "2.x"
     rc-animate "^2.10.0"
     rc-trigger "^4.0.0"
     rc-util "^4.20.0"
-    rc-virtual-list "^1.0.0"
+    rc-virtual-list "^1.1.0"
     warning "^4.0.3"
 
 rc-slider@~9.2.3:
@@ -10957,18 +10967,14 @@ rc-table@~7.3.0:
     react-lifecycles-compat "^3.0.2"
     shallowequal "^1.1.0"
 
-rc-tabs@~10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/rc-tabs/-/rc-tabs-10.0.0.tgz#4db516a66bc731c9a24b44407231262103f6da76"
-  integrity sha512-kpYho3S8GqHVKuFvsYyShN4GSM+f3RMfgwxmR4lpXA79lzPmIlaLamCGtTnMAOXOVTS3JEltWQCWC8LYY4ITIg==
+rc-tabs@~10.1.1:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/rc-tabs/-/rc-tabs-10.1.1.tgz#847d8c2038842a3cb5f2e74935d0e38b85fce61e"
+  integrity sha512-dOFeaYil3d6zV3ZtGZWfRf7zwyqUQ48cl67/Y/03SsBWEdYgfZzlgjfHqmUT+V7L7CvhQ5lIQyYpj4EthkgKCg==
   dependencies:
-    babel-runtime "6.x"
     classnames "2.x"
     lodash "^4.17.5"
-    prop-types "15.x"
-    raf "^3.4.1"
     rc-hammerjs "~0.6.0"
-    rc-util "^4.0.4"
     resize-observer-polyfill "^1.5.1"
     warning "^4.0.3"
 
@@ -10979,26 +10985,26 @@ rc-tooltip@^4.0.0, rc-tooltip@~4.0.2:
   dependencies:
     rc-trigger "^4.0.0"
 
-rc-tree-select@~3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-3.0.5.tgz#013d0c72e2e1d5e9556b0c3fb801d3b243e99125"
-  integrity sha512-C/3fZywOoHz/XvRUvfvH+Xd3gnOD24P1FDitNx+1E8E9kT3n+MUUfLWIaSnlU1b9djaMMJojGI1ODUjGlk/RAw==
+rc-tree-select@~3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-3.1.2.tgz#d71d505071df80be01abd0dfcafd4c2cbd9cde24"
+  integrity sha512-6i+uCD7FnO7GEuAtE73GW23WntseFvfjhm8nHQR8rbb3pdvpUs/mz0ESgjVavdr4fvjXozI/g0PkjcRa5bgtLg==
   dependencies:
     classnames "2.x"
-    rc-select "~10.0.0"
-    rc-tree "~3.0.0"
+    rc-select "^10.1.0"
+    rc-tree "^3.1.0"
     rc-util "^4.17.0"
 
-rc-tree@~3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-3.0.2.tgz#2b71318a0ad0c5f569eae51d9c512fdccb67dd29"
-  integrity sha512-5MJgIuP3R2QOuv+xuvttv0BVC6BJVz4PIqgZzk9oaGCN5WryPI30SrVCB3t0QO58gdf6tTQszI5aGEgN9PLQtQ==
+rc-tree@^3.1.0, rc-tree@~3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-3.1.2.tgz#14aae3167a6189ff401082d8a17adb8d8df00843"
+  integrity sha512-iK5q8Fmr8iR1Q/qq6flJd2SeCZc/D7aZryFY2yoqEAE01cO3NmY3RIN20IXF0rET/7SuFRW7pq+ClU1VLLdPOQ==
   dependencies:
     classnames "2.x"
     prop-types "^15.5.8"
     rc-animate "^2.9.2"
     rc-util "^4.11.0"
-    rc-virtual-list "^1.0.0"
+    rc-virtual-list "^1.1.0"
     react-lifecycles-compat "^3.0.4"
 
 rc-trigger@^4.0.0, rc-trigger@~4.0.0:
@@ -11033,7 +11039,18 @@ rc-util@^4.0.4, rc-util@^4.11.0, rc-util@^4.12.0, rc-util@^4.13.0, rc-util@^4.15
     react-lifecycles-compat "^3.0.4"
     shallowequal "^1.1.0"
 
-rc-virtual-list@^1.0.0:
+rc-util@^4.14.0:
+  version "4.20.3"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.20.3.tgz#c4d4ee6171cf685dc75572752a764310325888d3"
+  integrity sha512-NBBc9Ad5yGAVTp4jV+pD7tXQGqHxGM2onPSZFyVoJ5fuvRF+ZgzSjZ6RXLPE0pVVISRJ07h+APgLJPBcAeZQlg==
+  dependencies:
+    add-dom-event-listener "^1.1.0"
+    prop-types "^15.5.10"
+    react-is "^16.12.0"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+
+rc-virtual-list@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-1.1.1.tgz#824a2c210729ca738e041b8da9e3347cc6650e40"
   integrity sha512-1l2DFqvGMnCm6N5+zKaRnF294r3GKGvejdLIivdqbgMKwX+c1H+SftymdSKY92i6mDe7F0xg/JS6Q6Anu5/1pw==
@@ -11041,14 +11058,6 @@ rc-virtual-list@^1.0.0:
     classnames "^2.2.6"
     rc-util "^4.8.0"
 
-rc-virtual-list@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-1.0.1.tgz#10bc05daed95198be8b03c6e47e82f66c980c9a2"
-  integrity sha512-lqee1WuBXz6wUGr77g5bB1BHO9JQH+R1DX1oU0JbTLQs7bJl5JWk0xlX6UbB7VMtUss15+XiV7cyvlXVq6xzjg==
-  dependencies:
-    classnames "^2.2.6"
-    rc-util "^4.8.0"
-
 rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -11428,13 +11437,13 @@ react-transition-group@2:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-use@^13.27.0:
-  version "13.27.0"
-  resolved "https://registry.yarnpkg.com/react-use/-/react-use-13.27.0.tgz#53a619dc9213e2cbe65d6262e8b0e76641ade4aa"
-  integrity sha512-2lyTyqJWyvnaP/woVtDcFS4B5pUYz0FQWI9pVHk/6TBWom2x3/ziJthkEn/LbCA9Twv39xSQU7Dn0zdIWfsNTQ==
+react-use@^13.27.1:
+  version "13.27.1"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-13.27.1.tgz#e2ae2b708dafc7893c4772628801589aab9de370"
+  integrity sha512-bAwdqDMXs5lovEanXnL1izledfrPEUUv1afoTVB59eUiYcDyKul+M/dT/2WcgHjoY/R6QlrTcZoW4R7ifwvBfw==
   dependencies:
     "@types/js-cookie" "2.2.5"
-    "@xobotyi/scrollbar-width" "1.9.4"
+    "@xobotyi/scrollbar-width" "1.9.5"
     copy-to-clipboard "^3.2.0"
     fast-deep-equal "^3.1.1"
     fast-shallow-equal "^1.0.0"
@@ -12451,23 +12460,23 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-explorer@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-2.3.1.tgz#d91615a19ad1f4e08d05616bee6e30ddb770ae70"
-  integrity sha512-l3WQUCwaqia5x7EBnNp4GYwhXnROMz3NqKM2QMwQ3ADgjekp+enP+PHkjjbjoVX6WJ2G5mbvM6TjeE/q7fnIFw==
+source-map-explorer@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-2.4.2.tgz#fb23f86c3112eacde5683f24efaf4ddc9f677985"
+  integrity sha512-3ECQLffCFV8QgrTqcmddLkWL4/aQs6ljYfgWCLselo5QtizOfOeUCKnS4rFn7MIrdeZLM6TZrseOtsrWZhWKoQ==
   dependencies:
     btoa "^1.2.1"
     chalk "^3.0.0"
     convert-source-map "^1.7.0"
-    ejs "^3.0.1"
+    ejs "^3.0.2"
     escape-html "^1.0.3"
     glob "^7.1.6"
     gzip-size "^5.1.1"
     lodash "^4.17.15"
-    open "^7.0.2"
+    open "^7.0.3"
     source-map "^0.7.3"
     temp "^0.9.1"
-    yargs "^15.1.0"
+    yargs "^15.3.1"
 
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
@@ -14146,10 +14155,10 @@ yargs-parser@^13.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^18.1.0:
-  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.0.tgz#1b0ab1118ebd41f68bb30e729f4c83df36ae84c3"
-  integrity sha512-o/Jr6JBOv6Yx3pL+5naWSoIA2jJ+ZkMYQG/ie9qFbukBe4uzmBatlXFOiu/tNKRWEtyf+n5w7jc/O16ufqOTdQ==
+yargs-parser@^18.1.1:
+  version "18.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.2.tgz#2f482bea2136dbde0861683abea7756d30b504f1"
+  integrity sha512-hlIPNR3IzC1YuL1c2UwwDKpXlNFBqD1Fswwh1khz5+d8Cq/8yc/Mn0i+rQXduu8hcrFKvO7Eryk+09NecTQAAQ==
   dependencies:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
@@ -14195,10 +14204,10 @@ yargs@^13.3.0:
     y18n "^4.0.0"
     yargs-parser "^13.1.1"
 
-yargs@^15.1.0:
-  version "15.3.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.0.tgz#403af6edc75b3ae04bf66c94202228ba119f0976"
-  integrity sha512-g/QCnmjgOl1YJjGsnUg2SatC7NUYEiLXJqxNOQU9qSpjzGtGXda9b+OKccr1kLTy8BN9yqEyqfq5lxlwdc13TA==
+yargs@^15.3.1:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
+  integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==
   dependencies:
     cliui "^6.0.0"
     decamelize "^1.2.0"
@@ -14210,7 +14219,7 @@ yargs@^15.1.0:
     string-width "^4.2.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^18.1.0"
+    yargs-parser "^18.1.1"
 
 yargs@^3.10.0:
   version "3.32.0"