From 90152fc613c6bc6fe787a97c3dc0119ff6a7ce0b Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Thu, 4 Jun 2020 13:44:43 -0700
Subject: [PATCH] Added viewing all CSI responses + read only version of
 configurable form BOD-154

---
 bodyshop_translations.babel                   | 110 ++++++++++++
 .../accounting-payables-table.component.jsx   |   2 +-
 .../checkbox/checkbox.component.jsx           |   9 +-
 .../config-form-components.component.jsx      |  14 +-
 .../rate/rate.component.jsx                   |   7 +-
 .../slider/slider.component.jsx               |   7 +-
 .../text/text.component.jsx                   |   7 +-
 .../textarea/textarea.component.jsx           |   7 +-
 .../csi-response-form.container.jsx           |  43 +++++
 .../csi-response-list-paginated.component.jsx | 159 ++++++++++++++++++
 .../form-date-time-picker.component.jsx       |   2 +-
 .../components/header/header.component.jsx    |   3 +
 .../invoice-export-all-button.component.jsx   |   2 +-
 .../jobs-detail-header-actions.component.jsx  |  33 ++--
 .../jobs-detail-header.component.jsx          |  23 ++-
 .../jobs-list-paginated.component.jsx         |   9 +-
 .../schedule-day-view.component.jsx           |   1 -
 .../schedule-job-modal.component.jsx          |   4 +-
 client/src/graphql/csi.queries.js             |  40 +++++
 .../pages/manage/manage.page.component.jsx    |   8 +
 .../shop-csi/shop-csi.container.page.jsx      |  79 +++++++++
 client/src/translations/en_us/common.json     |   9 +-
 client/src/translations/es/common.json        |   7 +
 client/src/translations/fr/common.json        |   7 +
 .../down.yaml                                 |  36 ++++
 .../up.yaml                                   |  36 ++++
 hasura/migrations/metadata.yaml               |   1 +
 27 files changed, 615 insertions(+), 50 deletions(-)
 create mode 100644 client/src/components/csi-response-form/csi-response-form.container.jsx
 create mode 100644 client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
 create mode 100644 client/src/pages/shop-csi/shop-csi.container.page.jsx
 create mode 100644 hasura/migrations/1591292925100_update_permission_user_public_table_csi/down.yaml
 create mode 100644 hasura/migrations/1591292925100_update_permission_user_public_table_csi/up.yaml

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index c9ef73550..f3058c0ef 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -4169,9 +4169,56 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>fields</name>
+                                <children>
+                                    <concept_node>
+                                        <name>completedon</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>labels</name>
                                 <children>
+                                    <concept_node>
+                                        <name>noneselected</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>title</name>
                                         <definition_loaded>false</definition_loaded>
@@ -12480,6 +12527,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>shop_csi</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>shop_templates</name>
                                         <definition_loaded>false</definition_loaded>
@@ -15698,6 +15766,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>shop-csi</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>shop-templates</name>
                                         <definition_loaded>false</definition_loaded>
@@ -16246,6 +16335,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>shop-csi</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>shop-templates</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
index 87598f74b..ffe3badfa 100644
--- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
+++ b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
@@ -128,7 +128,7 @@ export default function AccountingPayablesTableComponent({
       ),
     },
   ];
-  console.log("transInProgress", transInProgress);
+
   const handleSearch = (e) => {
     setState({ ...state, search: e.target.value });
   };
diff --git a/client/src/components/config-form-components/checkbox/checkbox.component.jsx b/client/src/components/config-form-components/checkbox/checkbox.component.jsx
index 5e80707bd..8b407dc65 100644
--- a/client/src/components/config-form-components/checkbox/checkbox.component.jsx
+++ b/client/src/components/config-form-components/checkbox/checkbox.component.jsx
@@ -2,21 +2,22 @@ import React from "react";
 import { Form, Checkbox } from "antd";
 import { useTranslation } from "react-i18next";
 
-export default function JobIntakeFormCheckboxComponent({ formItem }) {
+export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
   const { name, label, required } = formItem;
   const { t } = useTranslation();
   return (
     <Form.Item
       name={name}
       label={label}
-      valuePropName='checked'
+      valuePropName="checked"
       rules={[
         {
           required: required,
           message: t("general.validation.required"),
         },
-      ]}>
-      <Checkbox />
+      ]}
+    >
+      <Checkbox disabled={readOnly} />
     </Form.Item>
   );
 }
diff --git a/client/src/components/config-form-components/config-form-components.component.jsx b/client/src/components/config-form-components/config-form-components.component.jsx
index 419689402..0961de1dc 100644
--- a/client/src/components/config-form-components/config-form-components.component.jsx
+++ b/client/src/components/config-form-components/config-form-components.component.jsx
@@ -5,21 +5,23 @@ import Text from "./text/text.component";
 import Textarea from "./textarea/textarea.component";
 import Rate from "./rate/rate.component";
 
-export default function ConfirmFormComponents({ componentList }) {
+export default function ConfirmFormComponents({ componentList, readOnly }) {
   return (
     <div>
       {componentList.map((f, idx) => {
         switch (f.type) {
           case "checkbox":
-            return <CheckboxFormItem key={idx} formItem={f} />;
+            return (
+              <CheckboxFormItem key={idx} formItem={f} readOnly={readOnly} />
+            );
           case "slider":
-            return <Slider key={idx} formItem={f} />;
+            return <Slider key={idx} formItem={f} readOnly={readOnly} />;
           case "text":
-            return <Text key={idx} formItem={f} />;
+            return <Text key={idx} formItem={f} readOnly={readOnly} />;
           case "textarea":
-            return <Textarea key={idx} formItem={f} />;
+            return <Textarea key={idx} formItem={f} readOnly={readOnly} />;
           case "rate":
-            return <Rate key={idx} formItem={f} />;
+            return <Rate key={idx} formItem={f} readOnly={readOnly} />;
           default:
             return <div key={idx}>Error</div>;
         }
diff --git a/client/src/components/config-form-components/rate/rate.component.jsx b/client/src/components/config-form-components/rate/rate.component.jsx
index 42b2e4ca7..6b9d31e73 100644
--- a/client/src/components/config-form-components/rate/rate.component.jsx
+++ b/client/src/components/config-form-components/rate/rate.component.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Form, Rate } from "antd";
 import { useTranslation } from "react-i18next";
 
-export default function JobIntakeFormCheckboxComponent({ formItem }) {
+export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
   const { name, label, required } = formItem;
   const { t } = useTranslation();
   return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
           required: required,
           message: t("general.validation.required"),
         },
-      ]}>
-      <Rate allowHalf />
+      ]}
+    >
+      <Rate disabled={readOnly} allowHalf />
     </Form.Item>
   );
 }
diff --git a/client/src/components/config-form-components/slider/slider.component.jsx b/client/src/components/config-form-components/slider/slider.component.jsx
index 021dbfeab..a3b3e7fe4 100644
--- a/client/src/components/config-form-components/slider/slider.component.jsx
+++ b/client/src/components/config-form-components/slider/slider.component.jsx
@@ -2,7 +2,7 @@ import { Form, Slider } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-export default function JobIntakeFormCheckboxComponent({ formItem }) {
+export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
   const { name, label, required, min, max } = formItem;
   const { t } = useTranslation();
   return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
           required: required,
           message: t("general.validation.required"),
         },
-      ]}>
-      <Slider min={min || 0} max={max || 10} />
+      ]}
+    >
+      <Slider disabled={readOnly} min={min || 0} max={max || 10} />
     </Form.Item>
   );
 }
diff --git a/client/src/components/config-form-components/text/text.component.jsx b/client/src/components/config-form-components/text/text.component.jsx
index e12ffa4df..623b73666 100644
--- a/client/src/components/config-form-components/text/text.component.jsx
+++ b/client/src/components/config-form-components/text/text.component.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Form, Input } from "antd";
 import { useTranslation } from "react-i18next";
 
-export default function JobIntakeFormCheckboxComponent({ formItem }) {
+export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
   const { name, label, required } = formItem;
   const { t } = useTranslation();
   return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
           required: required,
           message: t("general.validation.required"),
         },
-      ]}>
-      <Input />
+      ]}
+    >
+      <Input disabled={readOnly} />
     </Form.Item>
   );
 }
diff --git a/client/src/components/config-form-components/textarea/textarea.component.jsx b/client/src/components/config-form-components/textarea/textarea.component.jsx
index 0ebd6f4f8..d60c58fdc 100644
--- a/client/src/components/config-form-components/textarea/textarea.component.jsx
+++ b/client/src/components/config-form-components/textarea/textarea.component.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Form, Input } from "antd";
 import { useTranslation } from "react-i18next";
 
-export default function JobIntakeFormCheckboxComponent({ formItem }) {
+export default function JobIntakeFormCheckboxComponent({ formItem, readOnly }) {
   const { name, label, required, rows } = formItem;
   const { t } = useTranslation();
   return (
@@ -14,8 +14,9 @@ export default function JobIntakeFormCheckboxComponent({ formItem }) {
           required: required,
           message: t("general.validation.required"),
         },
-      ]}>
-      <Input.TextArea rows={rows || 4} />
+      ]}
+    >
+      <Input.TextArea disabled={readOnly} rows={rows || 4} />
     </Form.Item>
   );
 }
diff --git a/client/src/components/csi-response-form/csi-response-form.container.jsx b/client/src/components/csi-response-form/csi-response-form.container.jsx
new file mode 100644
index 000000000..ff9bd0fb2
--- /dev/null
+++ b/client/src/components/csi-response-form/csi-response-form.container.jsx
@@ -0,0 +1,43 @@
+import { useQuery } from "@apollo/react-hooks";
+import { Form } from "antd";
+import queryString from "query-string";
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { QUERY_CSI_RESPONSE_BY_PK } from "../../graphql/csi.queries";
+import ConfigFormComponents from "../config-form-components/config-form-components.component";
+import { useTranslation } from "react-i18next";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default function CsiResponseFormContainer() {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const searchParams = queryString.parse(useLocation().search);
+  const { responseid } = searchParams;
+  const { loading, error, data } = useQuery(QUERY_CSI_RESPONSE_BY_PK, {
+    variables: {
+      id: responseid,
+    },
+    skip: !!!responseid,
+  });
+
+  useEffect(() => {
+    form.resetFields();
+  }, [data, form]);
+
+  if (!!!responseid) return <div>{t("csi.labels.noneselected")}</div>;
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <div>
+      <Form form={form} initialValues={data.csi_by_pk.response}>
+        <ConfigFormComponents
+          readOnly
+          componentList={data.csi_by_pk.csiquestion.config}
+        />
+      </Form>
+    </div>
+  );
+}
diff --git a/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
new file mode 100644
index 000000000..dbbb3bcf7
--- /dev/null
+++ b/client/src/components/csi-response-list-paginated/csi-response-list-paginated.component.jsx
@@ -0,0 +1,159 @@
+import { SyncOutlined } from "@ant-design/icons";
+import { Button, Table } from "antd";
+import queryString from "query-string";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useHistory, useLocation } from "react-router-dom";
+import { DateFormatter } from "../../utils/DateFormatter";
+import { alphaSort } from "../../utils/sorters";
+
+export default function CsiResponseListPaginated({
+  refetch,
+  loading,
+  responses,
+  total,
+}) {
+  const search = queryString.parse(useLocation().search);
+  const { responseid, page, sortcolumn, sortorder } = search;
+  const history = useHistory();
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" },
+  });
+
+  const { t } = useTranslation();
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      width: "8%",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortOrder: sortcolumn === "ro_number" && sortorder,
+
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>{record.job.ro_number}</Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.est_number"),
+      dataIndex: "est_number",
+      key: "est_number",
+      width: "8%",
+      sorter: (a, b) => a.job.est_number - b.job.est_number,
+      sortOrder: sortcolumn === "est_number" && sortorder,
+
+      render: (text, record) => (
+        <Link to={"/manage/jobs/" + record.job.id}>
+          {record.job.est_number}
+        </Link>
+      ),
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+      sorter: (a, b) => alphaSort(a.job.ownr_ln, b.job.ownr_ln),
+      width: "25%",
+      sortOrder: sortcolumn === "owner" && sortorder,
+      render: (text, record) => {
+        return record.owner ? (
+          <Link to={"/manage/owners/" + record.owner.id}>
+            {`${record.job.ownr_fn || ""} ${record.job.ownr_ln || ""}`}
+          </Link>
+        ) : (
+          <span>{`${record.job.ownr_fn || ""} ${
+            record.job.ownr_ln || ""
+          }`}</span>
+        );
+      },
+    },
+    {
+      title: t("csi.fields.completedon"),
+      dataIndex: "completedon",
+      key: "completedon",
+      ellipsis: true,
+      sorter: (a, b) => a.completedon - b.completedon,
+      width: "25%",
+      sortOrder: sortcolumn === "completedon" && sortorder,
+      render: (text, record) => {
+        return record.completedon ? (
+          <DateFormatter>{record.completedon}</DateFormatter>
+        ) : null;
+      },
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history.push({ search: queryString.stringify(search) });
+  };
+
+  const handleOnRowClick = (record) => {
+    if (record) {
+      if (record.id) {
+        search.responseid = record.id;
+        history.push({ search: queryString.stringify(search) });
+      }
+    } else {
+      delete search.responseid;
+      history.push({ search: queryString.stringify(search) });
+    }
+  };
+
+  return (
+    <div>
+      <Table
+        loading={loading}
+        title={() => {
+          return (
+            <div style={{ display: "flex" }}>
+              <Button onClick={() => refetch()}>
+                <SyncOutlined />
+              </Button>
+              {
+                // <Input.Search
+                //   placeholder={t("general.labels.search")}
+                //   onSearch={(value) => {
+                //     search.search = value;
+                //     history.push({ search: queryString.stringify(search) });
+                //   }}
+                //   enterButton
+                // />
+              }
+            </div>
+          );
+        }}
+        size="small"
+        pagination={{
+          position: "top",
+          pageSize: 25,
+          current: parseInt(page || 1),
+          total: total,
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={responses}
+        onChange={handleTableChange}
+        rowSelection={{
+          onSelect: (record) => {
+            handleOnRowClick(record);
+          },
+          selectedRowKeys: [responseid],
+          type: "radio",
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleOnRowClick(record);
+            }, // click row
+          };
+        }}
+      />
+    </div>
+  );
+}
diff --git a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
index 58c55e1ea..be5c1ed23 100644
--- a/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
+++ b/client/src/components/form-date-time-picker/form-date-time-picker.component.jsx
@@ -21,7 +21,7 @@ const DateTimePicker = ({ value, onChange, onBlur }) => {
       selected={value ? new Date(value) : null}
       onChange={handleChange}
       showTimeSelect
-      timeIntervals={5}
+      timeIntervals={15}
       onBlur={onBlur}
       isClearable
       placeholderText={t("general.labels.selectdate")}
diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index 17c538f9f..b2ae84283 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -250,6 +250,9 @@ function Header({
                   {t("menus.header.shop_vendors")}
                 </Link>
               </Menu.Item>
+              <Menu.Item key="shop-csi">
+                <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
+              </Menu.Item>
             </Menu.SubMenu>
 
             <Menu.SubMenu
diff --git a/client/src/components/invoice-export-all-button/invoice-export-all-button.component.jsx b/client/src/components/invoice-export-all-button/invoice-export-all-button.component.jsx
index 1f74bef10..70c6d367a 100644
--- a/client/src/components/invoice-export-all-button/invoice-export-all-button.component.jsx
+++ b/client/src/components/invoice-export-all-button/invoice-export-all-button.component.jsx
@@ -55,7 +55,7 @@ export function InvoiceExportAllButton({
 
     try {
       PartnerResponse = await axios.post(
-        "http://48f9a09ccdec.ngrok.io/qb/",
+        "http://localhost:1337/qb/",
         QbXmlResponse.data
       );
     } catch (error) {
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
index 3c325d9b1..d6623b366 100644
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
+++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
@@ -32,27 +32,29 @@ export function JobsDetailHeaderActions({
   const client = useApolloClient();
   const history = useHistory();
   const statusmenu = (
-    <Menu key='popovermenu'>
-      <Menu.Item key='cccontract'>
+    <Menu key="popovermenu">
+      <Menu.Item key="cccontract">
         <Link
           to={{
             pathname: "/manage/courtesycars/contracts/new",
             state: { jobId: job.id },
-          }}>
+          }}
+        >
           {t("menus.jobsactions.newcccontract")}
         </Link>
       </Menu.Item>
       <Menu.Item
-        key='addtoproduction'
+        key="addtoproduction"
         disabled={!!!job.converted || !!job.inproduction}
-        onClick={() => AddToProduction(client, job.id, refetch)}>
+        onClick={() => AddToProduction(client, job.id, refetch)}
+      >
         {t("jobs.actions.addtoproduction")}
       </Menu.Item>
-      <Menu.Item key='duplicatejob'>
+      <Menu.Item key="duplicatejob">
         <Popconfirm
           title={t("jobs.labels.duplicateconfirm")}
-          okText='Yes'
-          cancelText='No'
+          okText="Yes"
+          cancelText="No"
           onClick={(e) => e.stopPropagation()}
           onConfirm={() =>
             DuplicateJob(
@@ -64,12 +66,13 @@ export function JobsDetailHeaderActions({
               }
             )
           }
-          getPopupContainer={(trigger) => trigger.parentNode}>
+          getPopupContainer={(trigger) => trigger.parentNode}
+        >
           {t("menus.jobsactions.duplicate")}
         </Popconfirm>
       </Menu.Item>
       <Menu.Item
-        key='postinvoices'
+        key="postinvoices"
         onClick={() => {
           setInvoiceEnterContext({
             actions: { refetch: refetch },
@@ -77,14 +80,16 @@ export function JobsDetailHeaderActions({
               job: job,
             },
           });
-        }}>
+        }}
+      >
         {t("jobs.actions.postInvoices")}
       </Menu.Item>
-      <Menu.Item key='closejob'>
+      <Menu.Item key="closejob">
         <Link
           to={{
             pathname: `/manage/jobs/${job.id}/close`,
-          }}>
+          }}
+        >
           {t("menus.jobsactions.closejob")}
         </Link>
       </Menu.Item>
@@ -92,7 +97,7 @@ export function JobsDetailHeaderActions({
     </Menu>
   );
   return (
-    <Dropdown overlay={statusmenu} key='changestatus'>
+    <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
       <Button>
         {t("general.labels.actions")} <DownCircleFilled />
       </Button>
diff --git a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
index 1013d0afa..c7c6408f3 100644
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -1,4 +1,4 @@
-import { DownCircleFilled } from "@ant-design/icons";
+import { DownCircleFilled, PrinterFilled } from "@ant-design/icons";
 import {
   Avatar,
   Badge,
@@ -31,13 +31,15 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "schedule" })),
+  setPrintCenterContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "printCenter" })),
 });
 
 export function JobsDetailHeader({
   job,
   mutationConvertJob,
   refetch,
-
+  setPrintCenterContext,
   bodyshop,
   updateJobStatus,
   setScheduleContext,
@@ -66,11 +68,26 @@ export function JobsDetailHeader({
   );
 
   const menuExtra = [
-    <Dropdown overlay={statusmenu} key="changestatus">
+    <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
       <Button>
         {t("jobs.actions.changestatus")} <DownCircleFilled />
       </Button>
     </Dropdown>,
+    <Button
+      onClick={() => {
+        setPrintCenterContext({
+          actions: { refetch: refetch },
+          context: {
+            id: job.id,
+            type: "job",
+          },
+        });
+      }}
+      key="printing"
+    >
+      <PrinterFilled />
+      {t("jobs.actions.printCenter")}
+    </Button>,
     <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
       <Button
         //TODO Enabled logic based on status.
diff --git a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
index b0e809ffb..9edcab14f 100644
--- a/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
+++ b/client/src/components/jobs-list-paginated/jobs-list-paginated.component.jsx
@@ -47,8 +47,8 @@ export default function JobsList({ refetch, loading, jobs, total }) {
     },
     {
       title: t("jobs.fields.owner"),
-      dataIndex: "ownr_ln",
-      key: "ownr_ln",
+      dataIndex: "owner",
+      key: "owner",
       ellipsis: true,
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       width: "25%",
@@ -176,7 +176,6 @@ export default function JobsList({ refetch, loading, jobs, total }) {
 
   return (
     <div>
-      THE RIGHT COMPONENT
       <Table
         loading={loading}
         title={() => {
@@ -196,7 +195,7 @@ export default function JobsList({ refetch, loading, jobs, total }) {
             </div>
           );
         }}
-        size='small'
+        size="small"
         pagination={{
           position: "top",
           pageSize: 25,
@@ -204,7 +203,7 @@ export default function JobsList({ refetch, loading, jobs, total }) {
           total: total,
         }}
         columns={columns}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobs}
         onChange={handleTableChange}
       />
diff --git a/client/src/components/schedule-day-view/schedule-day-view.component.jsx b/client/src/components/schedule-day-view/schedule-day-view.component.jsx
index a70ebd87a..e9eb03a55 100644
--- a/client/src/components/schedule-day-view/schedule-day-view.component.jsx
+++ b/client/src/components/schedule-day-view/schedule-day-view.component.jsx
@@ -11,7 +11,6 @@ export default function ScheduleDayViewComponent({ data, day }) {
         events={data}
         defaultView="day"
         views={["day"]}
-        style={{ height: "40vh" }}
         date={day}
       />
     );
diff --git a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
index 62aa7ba00..8d6aa75f9 100644
--- a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
@@ -71,7 +71,9 @@ export default function ScheduleJobModalComponent({
         />
       </Col>
       <Col span={10}>
-        <ScheduleDayViewContainer day={appData.start} />
+        <div style={{ height: "70vh" }}>
+          <ScheduleDayViewContainer day={appData.start} />
+        </div>
       </Col>
     </Row>
   );
diff --git a/client/src/graphql/csi.queries.js b/client/src/graphql/csi.queries.js
index 08e4b57e4..e6f838e10 100644
--- a/client/src/graphql/csi.queries.js
+++ b/client/src/graphql/csi.queries.js
@@ -39,3 +39,43 @@ export const INSERT_CSI = gql`
     }
   }
 `;
+
+export const QUERY_CSI_RESPONSE_PAGINATED = gql`
+  query QUERY_CSI_RESPONSE_PAGINATED(
+    $offset: Int
+    $limit: Int
+    $order: [csi_order_by!]!
+  ) {
+    csi(offset: $offset, limit: $limit, order_by: $order) {
+      id
+      completedon
+      job {
+        ownr_fn
+        ownr_ln
+        ro_number
+        est_number
+        id
+      }
+    }
+    csi_aggregate {
+      aggregate {
+        count(distinct: true)
+      }
+    }
+  }
+`;
+export const QUERY_CSI_RESPONSE_BY_PK = gql`
+  query QUERY_CSI_RESPONSE_BY_PK($id: uuid!) {
+    csi_by_pk(id: $id) {
+      relateddata
+      valid
+      validuntil
+      id
+      response
+      csiquestion {
+        id
+        config
+      }
+    }
+  }
+`;
diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx
index 829adfbb4..7f9f5c68d 100644
--- a/client/src/pages/manage/manage.page.component.jsx
+++ b/client/src/pages/manage/manage.page.component.jsx
@@ -99,6 +99,9 @@ const AccountingPayables = lazy(() =>
 );
 const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
 const JobsClose = lazy(() => import("../jobs-close/jobs-close.container"));
+const ShopCsiPageContainer = lazy(() =>
+  import("../shop-csi/shop-csi.container.page")
+);
 
 const { Header, Content, Footer } = Layout;
 
@@ -275,6 +278,11 @@ export function Manage({ match, conflict }) {
                   path={`${match.path}/shop/vendors`}
                   component={ShopVendorPageContainer}
                 />
+                <Route
+                  exact
+                  path={`${match.path}/shop/csi`}
+                  component={ShopCsiPageContainer}
+                />
                 <Route
                   exact
                   path={`${match.path}/accounting/receivables`}
diff --git a/client/src/pages/shop-csi/shop-csi.container.page.jsx b/client/src/pages/shop-csi/shop-csi.container.page.jsx
new file mode 100644
index 000000000..437ceb6da
--- /dev/null
+++ b/client/src/pages/shop-csi/shop-csi.container.page.jsx
@@ -0,0 +1,79 @@
+import { Row, Col } from "antd";
+import { useQuery } from "@apollo/react-hooks";
+import queryString from "query-string";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import AlertComponent from "../../components/alert/alert.component";
+import CsiResponseFormContainer from "../../components/csi-response-form/csi-response-form.container";
+import CsiResponseListPaginated from "../../components/csi-response-list-paginated/csi-response-list-paginated.component";
+import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function ShopCsiContainer({ bodyshop, setBreadcrumbs }) {
+  const { t } = useTranslation();
+
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = searchParams;
+
+  const { loading, error, data, refetch } = useQuery(
+    QUERY_CSI_RESPONSE_PAGINATED,
+    {
+      variables: {
+        //search: search || "",
+        offset: page ? (page - 1) * 25 : 0,
+        limit: 25,
+        order: [
+          {
+            [sortcolumn || "completedon"]: sortorder
+              ? sortorder === "descend"
+                ? "desc_nulls_last"
+                : "asc"
+              : "desc_nulls_last",
+          },
+        ],
+      },
+    }
+  );
+
+  useEffect(() => {
+    document.title = t("titles.shop-csi");
+    setBreadcrumbs([
+      {
+        link: "/manage/shop",
+        label: t("titles.bc.shop", { shopname: bodyshop.shopname }),
+      },
+      { link: "/manage/shop/csi", label: t("titles.bc.shop-csi") },
+    ]);
+  }, [t, setBreadcrumbs, bodyshop.shopname]);
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  return (
+    <Row>
+      <Col span={10}>
+        <CsiResponseListPaginated
+          refetch={refetch}
+          loading={loading}
+          responses={data ? data.csi : []}
+          total={data ? data.csi_aggregate.aggregate.count : 0}
+        />
+      </Col>
+      <Col span={13} offset={1}>
+        <CsiResponseFormContainer />
+      </Col>
+    </Row>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(ShopCsiContainer);
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index f11d64f57..9933174a9 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -269,7 +269,11 @@
 				"notfoundsubtitle": "We were unable to find a survey using the link you provided. Please ensure the URL is correct or reach out to your shop for more help.",
 				"notfoundtitle": "No survey found."
 			},
+			"fields": {
+				"completedon": "Completed On"
+			},
 			"labels": {
+				"noneselected": "No response selected.",
 				"title": "Customer Satisfaction Survey"
 			},
 			"successes": {
@@ -429,7 +433,7 @@
 			},
 			"errors": {
 				"creating": "Error adding invoice.",
-				"exporting": "Error exporting invoice {{error}}",
+				"exporting": "Error exporting invoice(s). {{error}}",
 				"exporting-partner": "Unable to connect to ImEX Partner. Please ensure it is running and logged in.",
 				"invalidro": "Not a valid RO.",
 				"invalidvendor": "Not a valid vendor.",
@@ -759,6 +763,7 @@
 				"schedule": "Schedule",
 				"shop": "My Shop",
 				"shop_config": "Configuration",
+				"shop_csi": "CSI",
 				"shop_templates": "Templates",
 				"shop_vendors": "Vendors",
 				"vehicles": "Vehicles"
@@ -988,6 +993,7 @@
 				"productionlist": "Production - List",
 				"schedule": "Schedule",
 				"shop": "Manage my Shop ({{shopname}})",
+				"shop-csi": "CSI Responses",
 				"shop-templates": "Shop Templates",
 				"vehicle-details": "Vehicle: {{vehicle}}",
 				"vehicles": "Vehicles"
@@ -1015,6 +1021,7 @@
 			"profile": "My Profile | $t(titles.app)",
 			"schedule": "Schedule | $t(titles.app)",
 			"shop": "My Shop | $t(titles.app)",
+			"shop-csi": "CSI Responses | $t(titles.app)",
 			"shop-templates": "Shop Templates | $t(titles.app)",
 			"shop_vendors": "Vendors | $t(titles.app)",
 			"vehicledetail": "Vehicle Details {{vehicle}} | $t(titles.app)",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 43523c3d0..984bf9b02 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -269,7 +269,11 @@
 				"notfoundsubtitle": "",
 				"notfoundtitle": ""
 			},
+			"fields": {
+				"completedon": ""
+			},
 			"labels": {
+				"noneselected": "",
 				"title": ""
 			},
 			"successes": {
@@ -759,6 +763,7 @@
 				"schedule": "Programar",
 				"shop": "Mi tienda",
 				"shop_config": "Configuración",
+				"shop_csi": "",
 				"shop_templates": "",
 				"shop_vendors": "Vendedores",
 				"vehicles": "Vehículos"
@@ -988,6 +993,7 @@
 				"productionlist": "",
 				"schedule": "",
 				"shop": "",
+				"shop-csi": "",
 				"shop-templates": "",
 				"vehicle-details": "",
 				"vehicles": ""
@@ -1015,6 +1021,7 @@
 			"profile": "Mi perfil | $t(titles.app)",
 			"schedule": "Horario | $t(titles.app)",
 			"shop": "Mi tienda | $t(titles.app)",
+			"shop-csi": "",
 			"shop-templates": "",
 			"shop_vendors": "Vendedores | $t(titles.app)",
 			"vehicledetail": "Detalles del vehículo {{vehicle}} | $t(titles.app)",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index c4793e5d4..ca95942d5 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -269,7 +269,11 @@
 				"notfoundsubtitle": "",
 				"notfoundtitle": ""
 			},
+			"fields": {
+				"completedon": ""
+			},
 			"labels": {
+				"noneselected": "",
 				"title": ""
 			},
 			"successes": {
@@ -759,6 +763,7 @@
 				"schedule": "Programme",
 				"shop": "Mon magasin",
 				"shop_config": "Configuration",
+				"shop_csi": "",
 				"shop_templates": "",
 				"shop_vendors": "Vendeurs",
 				"vehicles": "Véhicules"
@@ -988,6 +993,7 @@
 				"productionlist": "",
 				"schedule": "",
 				"shop": "",
+				"shop-csi": "",
 				"shop-templates": "",
 				"vehicle-details": "",
 				"vehicles": ""
@@ -1015,6 +1021,7 @@
 			"profile": "Mon profil | $t(titles.app)",
 			"schedule": "Horaire | $t(titles.app)",
 			"shop": "Mon magasin | $t(titles.app)",
+			"shop-csi": "",
 			"shop-templates": "",
 			"shop_vendors": "Vendeurs | $t(titles.app)",
 			"vehicledetail": "Détails du véhicule {{vehicle} | $t(titles.app)",
diff --git a/hasura/migrations/1591292925100_update_permission_user_public_table_csi/down.yaml b/hasura/migrations/1591292925100_update_permission_user_public_table_csi/down.yaml
new file mode 100644
index 000000000..a45ce22ba
--- /dev/null
+++ b/hasura/migrations/1591292925100_update_permission_user_public_table_csi/down.yaml
@@ -0,0 +1,36 @@
+- args:
+    role: user
+    table:
+      name: csi
+      schema: public
+  type: drop_select_permission
+- args:
+    permission:
+      allow_aggregations: false
+      columns:
+      - bodyshopid
+      - completedon
+      - created_at
+      - id
+      - jobid
+      - questionset
+      - relateddata
+      - response
+      - updated_at
+      - valid
+      - validuntil
+      computed_fields: []
+      filter:
+        bodyshop:
+          associations:
+            _and:
+            - user:
+                authid:
+                  _eq: X-Hasura-User-Id
+            - active:
+                _eq: true
+    role: user
+    table:
+      name: csi
+      schema: public
+  type: create_select_permission
diff --git a/hasura/migrations/1591292925100_update_permission_user_public_table_csi/up.yaml b/hasura/migrations/1591292925100_update_permission_user_public_table_csi/up.yaml
new file mode 100644
index 000000000..a94a371de
--- /dev/null
+++ b/hasura/migrations/1591292925100_update_permission_user_public_table_csi/up.yaml
@@ -0,0 +1,36 @@
+- args:
+    role: user
+    table:
+      name: csi
+      schema: public
+  type: drop_select_permission
+- args:
+    permission:
+      allow_aggregations: true
+      columns:
+      - bodyshopid
+      - completedon
+      - created_at
+      - id
+      - jobid
+      - questionset
+      - relateddata
+      - response
+      - updated_at
+      - valid
+      - validuntil
+      computed_fields: []
+      filter:
+        bodyshop:
+          associations:
+            _and:
+            - user:
+                authid:
+                  _eq: X-Hasura-User-Id
+            - active:
+                _eq: true
+    role: user
+    table:
+      name: csi
+      schema: public
+  type: create_select_permission
diff --git a/hasura/migrations/metadata.yaml b/hasura/migrations/metadata.yaml
index 1b83cbd37..0f2144f22 100644
--- a/hasura/migrations/metadata.yaml
+++ b/hasura/migrations/metadata.yaml
@@ -957,6 +957,7 @@ tables:
                   _eq: X-Hasura-User-Id
             - active:
                 _eq: true
+      allow_aggregations: true
   update_permissions:
   - role: anonymous
     permission: