SGI Modal for groupings.

Co-authored-by: Copilot <copilot@github.com>

src/components/molecules/job-group/job-group.molecule.jsx

@@ -74,7 +74,7 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
     <Menu
       onClick={handleMenuClick}
       //disabled
-      items={[{ label: "N/A", key: "Default", value: "Default" }]}
+      items={[{ label: "Default", key: "Default", value: "Default" }]}
     ></Menu>
   );
 
@@ -98,7 +98,7 @@ export function JobGroupMolecule({ bodyshop, jobId, group, job }) {
           <GroupVerifySwitch job={job} loading={loading} loadingCallback={setLoading} />
         </div>
       )}
-      {bodyshop?.ins_rule_set === "MPI" && <JobsGroupModalMolecule job={job} />}
+      <JobsGroupModalMolecule job={job} />
 
       {loading && <LoadingOutlined />}
     </Space>

src/components/molecules/jobs-group-modal/jobs-group-modal.molecule.jsx

@@ -2,10 +2,17 @@ import { Modal, List, Card, Input, Table } from "antd";
 import _ from "lodash";
 import React, { useState } from "react";
 import { InfoCircleFilled } from "@ant-design/icons";
-import { FakedGroupsForV3WithMake } from "../../../ipc/ipc-estimate-utils";
+import { FakedGroupsForV3WithMake, SgiGroupsV12026April } from "../../../ipc/ipc-estimate-utils";
 import { WhichMPIRulesetToApply } from "../../../util/constants";
 import { alphaSort } from "../../../util/sorters";
 import { getDecimalPrecision } from "../../../util/decimalPrecision";
+import { createStructuredSelector } from "reselect";
+import { connect } from "react-redux";
+import { selectBodyshop } from "../../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
 
 const data = [
   {
@@ -285,9 +292,15 @@ const data = [
   }
 ];
 
-export default function JobsGroupModalMolecule({ job }) {
-  const MPIRulesetToApply = WhichMPIRulesetToApply(job.close_date);
-  return MPIRulesetToApply === "V3" ? <JobsGroupV3ModalMolecule /> : <JobsGroupPreV3ModalMolecule />;
+function JobsGroupModalMolecule({ job, bodyshop }) {
+  if (bodyshop?.ins_rule_set === "MPI") {
+    const MPIRulesetToApply = WhichMPIRulesetToApply(job.close_date);
+    return MPIRulesetToApply === "V3" ? <JobsGroupV3ModalMolecule /> : <JobsGroupPreV3ModalMolecule />;
+  } else if (bodyshop?.ins_rule_set === "SGI") {
+    return <SGIJobsGroupModalMolecule />;
+  } else {
+    return null;
+  }
 }
 
 export function JobsGroupPreV3ModalMolecule() {
@@ -440,3 +453,72 @@ export function JobsGroupV3ModalMolecule() {
     </div>
   );
 }
+
+export function SGIJobsGroupModalMolecule() {
+  const [visible, setVisible] = useState(false);
+  const [search, setSearch] = useState("");
+  const precision = getDecimalPrecision();
+  const v3DataSourceFiltered =
+    search === null || search.trim() === ""
+      ? SgiGroupsV12026April
+      : SgiGroupsV12026April.filter((i) => i.make.toLowerCase().includes(search.toLowerCase()));
+  return (
+    <div style={{ margin: ".2rem" }}>
+      <Modal
+        open={visible}
+        onCancel={() => setVisible(false)}
+        onOk={() => setVisible(false)}
+        width="90%"
+        title="SGI Guidelines"
+      >
+        <div>
+          <Input.Search
+            placeholder="Search for Make"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{ marginBottom: ".5rem" }}
+          />
+
+          <Table
+            dataSource={v3DataSourceFiltered}
+            pagination={{ pageSize: 20 }}
+            columns={[
+              {
+                title: "Make",
+                dataIndex: "make",
+                key: "make",
+                sorter: (a, b) => alphaSort(a.make - b.make),
+                filters: _.uniq(SgiGroupsV12026April.map((i) => i.make)).map((i) => ({ text: i, value: i })),
+                filterSearch: true,
+                onFilter: (value, record) => record.make.startsWith(value)
+              },
+              {
+                title: "Type",
+                dataIndex: "desc",
+                key: "desc"
+              },
+              {
+                title: "Age Group",
+                dataIndex: "ageDesc",
+                key: "ageDesc"
+              },
+              {
+                title: "Target",
+                dataIndex: "target",
+                key: "target",
+                render: (text, record) => `${(record.target * 100).toFixed(precision)}%`
+              }
+            ]}
+          />
+          <div>
+            This grouping information is provided for reference only and is not guaranteed to be correct. Please confirm
+            with grouping guidelines provided by SGI.
+          </div>
+        </div>
+      </Modal>
+      <InfoCircleFilled onClick={() => setVisible(true)} />
+    </div>
+  );
+}
+
+export default connect(mapStateToProps, null)(JobsGroupModalMolecule);