Added job searching, sider keys, formatting on settings

src/components/molecules/jobs-search-fields/jobs-search-fields.molecule.jsx

@@ -0,0 +1,38 @@
+import { SearchOutlined } from "@ant-design/icons";
+import { Button, DatePicker, Form, Input } from "antd";
+import React from "react";
+export default function JobsSearchFieldsMolecule({ callSearchQuery }) {
+  const [form] = Form.useForm();
+
+  const handleFinish = (values) => {
+    callSearchQuery({
+      variables: {
+        search: values.search,
+        startDate: (values.dateRange && values.dateRange[0]) || null,
+        endDate: (values.dateRange && values.dateRange[1]) || null,
+      },
+    });
+  };
+
+  return (
+    <div>
+      <Form
+        autoComplete="new-password"
+        size="small"
+        onFinish={handleFinish}
+        form={form}
+      >
+        <Form.Item name="search">
+          <Input placeholder="Search by Claim # or Name" />
+        </Form.Item>
+        <Form.Item name="dateRange" rules={[{ type: "array" }]}>
+          <DatePicker.RangePicker />
+        </Form.Item>
+        <Button type="primary" htmlType="submit" onClick={() => form.submit()}>
+          <SearchOutlined />
+          Search
+        </Button>
+      </Form>
+    </div>
+  );
+}

src/components/molecules/shop-settings-form/shop-settings-form.molecule.jsx

@@ -1,4 +1,4 @@
-import { Button, Input, Form, Select, InputNumber } from "antd";
+import { Button, Input, Form, Select, InputNumber, Typography } from "antd";
 import FormListMoveArrows from "../../atoms/form-list-move-arrows/form-list-move-arrows.atom";
 import React from "react";
 import LayoutFormRow from "../../atoms/layout-form-row/layout-form-row.atom";
@@ -7,6 +7,7 @@ import { DeleteFilled } from "@ant-design/icons";
 export default function ShopSettingsFormMolecule({ form, saveLoading }) {
   return (
     <div>
+      <Typography.Title>Shop Settings</Typography.Title>
       <Button
         type="primary"
         loading={saveLoading}
@@ -14,31 +15,33 @@ export default function ShopSettingsFormMolecule({ form, saveLoading }) {
       >
         Save
       </Button>
-      <Form.Item
-        label="Shop Name"
-        name="shopname"
-        rules={[
-          {
-            required: true,
-          },
-        ]}
-      >
-        <Input />
-      </Form.Item>
-      <Form.Item
-        name="accepted_ins_co"
-        label="Accepted Insurance Company Names (must be exactly as in estimating system)"
-        rules={[
-          {
-            required: true,
-
-            type: "array",
-          },
-        ]}
-      >
-        <Select mode="tags" />
-      </Form.Item>
+      <LayoutFormRow grow>
+        <Form.Item
+          label="Shop Name"
+          name="shopname"
+          rules={[
+            {
+              required: true,
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="accepted_ins_co"
+          label="Accepted Insurance Company Names (must be exactly as in estimating system)"
+          rules={[
+            {
+              required: true,
 
+              type: "array",
+            },
+          ]}
+        >
+          <Select mode="tags" />
+        </Form.Item>
+      </LayoutFormRow>
+      <Typography.Title level={4}>Group Definitions</Typography.Title>
       <Form.List name={["targets"]}>
         {(fields, { add, remove, move }) => {
           return (