Added my shop page and ability to add, edit and delete employees.

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -0,0 +1,112 @@
+import { Button, DatePicker, Form, Input, InputNumber, Switch } from "antd";
+import moment from "moment";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export default function ShopEmployeesFormComponent({
+  form,
+  selectedEmployee,
+  handleSubmit
+}) {
+  const { t } = useTranslation();
+  const { getFieldDecorator } = form;
+  if (!selectedEmployee) return "//TODO No employee selected.";
+  return (
+    <Form onSubmit={handleSubmit} autoComplete={"off"}>
+      <Button type="primary" htmlType="submit">
+        {t("general.actions.save")}
+      </Button>
+
+      <Form.Item label={t("employees.fields.first_name")}>
+        {getFieldDecorator("first_name", {
+          initialValue: selectedEmployee.first_name,
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]
+        })(<Input name="first_name" />)}
+      </Form.Item>
+      <Form.Item label={t("employees.fields.last_name")}>
+        {getFieldDecorator("last_name", {
+          initialValue: selectedEmployee.last_name,
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]
+        })(<Input name="last_name" />)}
+      </Form.Item>
+      <Form.Item label={t("employees.fields.employee_number")}>
+        {getFieldDecorator("employee_number", {
+          initialValue: selectedEmployee.employee_number,
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]
+        })(<Input name="employee_number" />)}
+      </Form.Item>
+      <Form.Item label={t("employees.fields.active")}>
+        {getFieldDecorator("active", {
+          initialValue: selectedEmployee.active,
+          valuePropName: "checked"
+        })(<Switch name="active" />)}
+      </Form.Item>
+      <Form.Item label={t("employees.fields.flat_rate")}>
+        {getFieldDecorator("flat_rate", {
+          initialValue: selectedEmployee.flat_rate,
+          valuePropName: "checked"
+        })(<Switch name="active" />)}
+      </Form.Item>
+      <Form.Item label={t("employees.fields.hire_date")}>
+        {getFieldDecorator("hire_date", {
+          initialValue: selectedEmployee.hire_date
+            ? moment(selectedEmployee.hire_date)
+            : null,
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]
+        })(<DatePicker name="hire_date" />)}
+      </Form.Item>
+      <Form.Item label={t("employees.fields.termination_date")}>
+        {getFieldDecorator("termination_date", {
+          initialValue: selectedEmployee.termination_date
+            ? moment(selectedEmployee.termination_date)
+            : null
+        })(<DatePicker name="termination_date" />)}
+      </Form.Item>
+      {
+        //TODO Make this a picklist.
+      }
+      <Form.Item label={t("employees.fields.cost_center")}>
+        {getFieldDecorator("cost_center", {
+          initialValue: selectedEmployee.cost_center,
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]
+        })(<Input name="cost_center" />)}
+      </Form.Item>
+      <Form.Item label={t("employees.fields.base_rate")}>
+        {getFieldDecorator("base_rate", {
+          initialValue: selectedEmployee.base_rate,
+          rules: [
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]
+        })(<InputNumber name="base_rate" />)}
+      </Form.Item>
+    </Form>
+  );
+}