UI Updates & Bill Entering

client/src/components/job-employee-assignments/job-employee-assignments.component.jsx

@@ -1,5 +1,5 @@
 import { DeleteFilled, PlusCircleFilled } from "@ant-design/icons";
-import { Button, Popover, Select, Spin } from "antd";
+import { Button, Col, Popover, Row, Select, Space, Spin } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -40,35 +40,42 @@ export function JobEmployeeAssignments({
   };
 
   const popContent = (
-    <div>
-      <Select
-        id="employeeSelector"
-        showSearch
-        style={{ width: 200 }}
-        optionFilterProp="children"
-        onChange={onChange}
-        filterOption={(input, option) =>
-          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        }
-      >
-        {bodyshop.employees.map((emp) => (
-          <Select.Option value={emp.id} key={emp.id}>
-            {`${emp.first_name} ${emp.last_name}`}
-          </Select.Option>
-        ))}
-      </Select>
-      <Button
-        type="primary"
-        disabled={!assignment.employeeid || jobRO}
-        onClick={() => {
-          handleAdd(assignment);
-          setVisibility(false);
-        }}
-      >
-        Assign
-      </Button>
-      <Button onClick={() => setVisibility(false)}>Close</Button>
-    </div>
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <Select
+          id="employeeSelector"
+          showSearch
+          style={{ width: 200 }}
+          optionFilterProp="children"
+          onChange={onChange}
+          filterOption={(input, option) =>
+            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
+            0
+          }
+        >
+          {bodyshop.employees.map((emp) => (
+            <Select.Option value={emp.id} key={emp.id}>
+              {`${emp.first_name} ${emp.last_name}`}
+            </Select.Option>
+          ))}
+        </Select>
+      </Col>
+      <Col span={24}>
+        <Space wrap>
+          <Button
+            type="primary"
+            disabled={!assignment.employeeid || jobRO}
+            onClick={() => {
+              handleAdd(assignment);
+              setVisibility(false);
+            }}
+          >
+            Assign
+          </Button>
+          <Button onClick={() => setVisibility(false)}>Close</Button>
+        </Space>
+      </Col>
+    </Row>
   );
 
   return (