Merge branch 'develop'

2022-07-19 18:24:19 -07:00
parent 872b0ba591 05d841159c
commit 2300c30f47
24 changed files with 1914 additions and 82 deletions
--- a/.github/workflows/blackduck.yml
+++ b/.github/workflows/blackduck.yml
@@ -0,0 +1,40 @@
+name: Blackduck
+
+on:
+  schedule:
+    # run scans twice a month
+    - cron: "0 2 1,15 * *"
+
+jobs:
+  blackduck:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          cache: "npm"
+      - run: npm install
+      - run: npm run build
+
+      # ota-admin-portal
+      - name: Run Synopsys Detect - ota-admin-portal
+        uses: synopsys-sig/detect-action@v0.3.2
+        env:
+          DETECT_PROJECT_NAME: ota-admin-portal
+          DETECT_EXCLUDED_DIRECTORIES: node_modules
+          DETECT_PROJECT_VERSION_NAME: default
+          DETECT_NPM_INCLUDE_DEV_DEPENDENCIES: "FALSE"
+          # DETECT_DETECTOR_SEARCH_EXCLUSION_DEFAULTS: "true"
+          DETECT_DETECTOR_SEARCH_DEPTH: 0
+          DETECT_DETECTOR_SEARCH_CONTINUE: "true"
+
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          detect-version: 7.9.0
+          blackduck-url: ${{ secrets.BLACKDUCK_URL }}
+          blackduck-api-token: ${{ secrets.BLACKDUCK_API_KEY }}
+          scan-mode: INTELLIGENT
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
        "@testing-library/user-event": "^13.5.0",
        "axios": "^0.26.1",
        "clsx": "^1.1.1",
+        "email-validator": "^2.0.4",
        "env-cmd": "^10.1.0",
        "leaflet": "^1.7.1",
        "material-ui-dropzone": "^3.5.0",
@@ -33,7 +34,7 @@
        "react-test-renderer": "^17.0.2"
      },
      "engines": {
-        "node": "14.17.6"
+        "node": "^16.13.0"
      }
    },
    "node_modules/@ampproject/remapping": {
@@ -7819,6 +7820,14 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.81.tgz",
      "integrity": "sha512-Gs7xVpIZ7tYYSDA+WgpzwpPvfGwUk3KSIjJ0akuj5XQHFdyQnsUoM76EA4CIHXNLPiVwTwOFay9RMb0ChG3OBw=="
    },
+    "node_modules/email-validator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
+      "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==",
+      "engines": {
+        "node": ">4.0"
+      }
+    },
    "node_modules/emittery": {
      "version": "0.8.1",
      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -23003,6 +23012,11 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.81.tgz",
      "integrity": "sha512-Gs7xVpIZ7tYYSDA+WgpzwpPvfGwUk3KSIjJ0akuj5XQHFdyQnsUoM76EA4CIHXNLPiVwTwOFay9RMb0ChG3OBw=="
    },
+    "email-validator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
+      "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ=="
+    },
    "emittery": {
      "version": "0.8.1",
      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "clsx": "^1.1.1",
+    "email-validator": "^2.0.4",
    "env-cmd": "^10.1.0",
    "leaflet": "^1.7.1",
    "material-ui-dropzone": "^3.5.0",
@@ -48,7 +49,7 @@
    "not op_mini all"
  ],
  "engines": {
-    "node": "14.17.6"
+    "node": "^16.13.0"
  },
  "devDependencies": {
    "react-test-renderer": "^17.0.2"
@@ -71,4 +72,4 @@
      "lcov"
    ]
  }
-}
+}
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -120,6 +120,14 @@ describe("App", () => {
    );
  });

+  it("Route /supplier/{email} unauthenticated", async () => {
+    await check(
+      "/supplier/test@supplier.com",
+      "span.MuiButton-label",
+      "Sign In"
+    );
+  });
+
  it("Route /tools/certificates/add unauthenticated", async () => {
    await check("/tools/certificates/add", "span.MuiButton-label", "Sign In");
  });
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/src/components/App/snapshots/App.test.js.snap
@@ -1399,10 +1399,10 @@ exports[`App Route /package-create authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1164 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1166"
+                        class="PrivateNotchedOutline-legendLabelled-1227"
                      >
                        <span>
                          Package name
@@ -1445,10 +1445,10 @@ exports[`App Route /package-create authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1164 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1166"
+                        class="PrivateNotchedOutline-legendLabelled-1227"
                      >
                        <span>
                          Version
@@ -1499,10 +1499,10 @@ exports[`App Route /package-create authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1164 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1166"
+                        class="PrivateNotchedOutline-legendLabelled-1227"
                      >
                        <span>
                          Description
@@ -1546,10 +1546,10 @@ exports[`App Route /package-create authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1164 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1166"
+                        class="PrivateNotchedOutline-legendLabelled-1227"
                      >
                        <span>
                          Release Notes URL
@@ -2097,11 +2097,11 @@ exports[`App Route /package-create authenticated 1`] = `
                          </svg>
                          <fieldset
                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-1164 MuiOutlinedInput-notchedOutline"
+                            class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
                            style="padding-left: 8px;"
                          >
                            <legend
-                              class="PrivateNotchedOutline-legend-1165"
+                              class="PrivateNotchedOutline-legend-1226"
                              style="width: 0.01px;"
                            >
                              <span>
@@ -2324,11 +2324,11 @@ exports[`App Route /package-create authenticated 1`] = `
                                  </svg>
                                  <fieldset
                                    aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-1164 MuiOutlinedInput-notchedOutline"
+                                    class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
                                    style="padding-left: 8px;"
                                  >
                                    <legend
-                                      class="PrivateNotchedOutline-legend-1165"
+                                      class="PrivateNotchedOutline-legend-1226"
                                      style="width: 0.01px;"
                                    >
                                      <span>
@@ -2977,14 +2977,14 @@ exports[`App Route /package-deploy authenticated 1`] = `
                            >
                              <span
                                aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1099 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1160 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                              >
                                <span
                                  class="MuiIconButton-label"
                                >
                                  <input
                                    aria-label="select all desserts"
-                                    class="PrivateSwitchBase-input-1102"
+                                    class="PrivateSwitchBase-input-1163"
                                    data-indeterminate="false"
                                    type="checkbox"
                                    value=""
@@ -5204,6 +5204,62 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
 </div>
 `;

+exports[`App Route /supplier/{email} unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-0000"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-0000 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <div>
+            <h6
+              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+            />
+          </div>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-0000"
+      >
+        <div
+          class="makeStyles-drawerHeader-0000"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthLg"
+        >
+          <div
+            class="makeStyles-paper-0000 makeStyles-textJustifyAlign-0000"
+          >
+            <a
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0000 MuiButton-containedPrimary"
+              href="https://cognito.com/authorize?redirect=https://example.com/callback"
+              tabindex="0"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Sign In
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`App Route /tools/certificates/add authenticated 1`] = `
 <div>
  <div
@@ -5604,10 +5660,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                  />
                  <fieldset
                    aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1429 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-1490 MuiOutlinedInput-notchedOutline"
                  >
                    <legend
-                      class="PrivateNotchedOutline-legendLabelled-1431"
+                      class="PrivateNotchedOutline-legendLabelled-1492"
                    >
                      <span>
                        VIN
@@ -5634,20 +5690,20 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                >
                  <span
                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1433 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1434 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1494 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1495 Mui-checked MuiIconButton-colorSecondary"
                  >
                    <span
                      class="MuiIconButton-label"
                    >
                      <input
                        checked=""
-                        class="PrivateSwitchBase-input-1436"
+                        class="PrivateSwitchBase-input-1497"
                        name="cert-type"
                        type="radio"
                        value="TBOX"
                      />
                      <div
-                        class="PrivateRadioButtonIcon-root-1437 PrivateRadioButtonIcon-checked-1439"
+                        class="PrivateRadioButtonIcon-root-1498 PrivateRadioButtonIcon-checked-1500"
                      >
                        <svg
                          aria-hidden="true"
@@ -5661,7 +5717,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                        </svg>
                        <svg
                          aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1438"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1499"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
@@ -5686,19 +5742,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                >
                  <span
                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1433 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1494 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                  >
                    <span
                      class="MuiIconButton-label"
                    >
                      <input
-                        class="PrivateSwitchBase-input-1436"
+                        class="PrivateSwitchBase-input-1497"
                        name="cert-type"
                        type="radio"
                        value="ICC"
                      />
                      <div
-                        class="PrivateRadioButtonIcon-root-1437"
+                        class="PrivateRadioButtonIcon-root-1498"
                      >
                        <svg
                          aria-hidden="true"
@@ -5712,7 +5768,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                        </svg>
                        <svg
                          aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1438"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1499"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
@@ -5737,19 +5793,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                >
                  <span
                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1433 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1494 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                  >
                    <span
                      class="MuiIconButton-label"
                    >
                      <input
-                        class="PrivateSwitchBase-input-1436"
+                        class="PrivateSwitchBase-input-1497"
                        name="cert-type"
                        type="radio"
                        value="Charging"
                      />
                      <div
-                        class="PrivateRadioButtonIcon-root-1437"
+                        class="PrivateRadioButtonIcon-root-1498"
                      >
                        <svg
                          aria-hidden="true"
@@ -5763,7 +5819,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                        </svg>
                        <svg
                          aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1438"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1499"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
@@ -6266,10 +6322,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1229 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1231"
+                        class="PrivateNotchedOutline-legendLabelled-1292"
                      >
                        <span>
                          VIN
@@ -6312,10 +6368,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1229 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1231 PrivateNotchedOutline-legendNotched-1232"
+                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
                      >
                        <span>
                          Model
@@ -6359,10 +6415,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1229 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1231 PrivateNotchedOutline-legendNotched-1232"
+                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
                      >
                        <span>
                          Year
@@ -6406,10 +6462,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1229 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1231 PrivateNotchedOutline-legendNotched-1232"
+                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
                      >
                        <span>
                          Trim
@@ -6436,19 +6492,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          name="log-level-group"
                          type="radio"
                          value="trace"
                        />
                        <div
-                          class="PrivateRadioButtonIcon-root-1237"
+                          class="PrivateRadioButtonIcon-root-1298"
                        >
                          <svg
                            aria-hidden="true"
@@ -6462,7 +6518,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                          </svg>
                          <svg
                            aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1238"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
@@ -6487,19 +6543,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          name="log-level-group"
                          type="radio"
                          value="debug"
                        />
                        <div
-                          class="PrivateRadioButtonIcon-root-1237"
+                          class="PrivateRadioButtonIcon-root-1298"
                        >
                          <svg
                            aria-hidden="true"
@@ -6513,7 +6569,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                          </svg>
                          <svg
                            aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1238"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
@@ -6538,20 +6594,20 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1234 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1295 Mui-checked MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
                          checked=""
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          name="log-level-group"
                          type="radio"
                          value="info"
                        />
                        <div
-                          class="PrivateRadioButtonIcon-root-1237 PrivateRadioButtonIcon-checked-1239"
+                          class="PrivateRadioButtonIcon-root-1298 PrivateRadioButtonIcon-checked-1300"
                        >
                          <svg
                            aria-hidden="true"
@@ -6565,7 +6621,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                          </svg>
                          <svg
                            aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1238"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
@@ -6590,19 +6646,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          name="log-level-group"
                          type="radio"
                          value="warn"
                        />
                        <div
-                          class="PrivateRadioButtonIcon-root-1237"
+                          class="PrivateRadioButtonIcon-root-1298"
                        >
                          <svg
                            aria-hidden="true"
@@ -6616,7 +6672,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                          </svg>
                          <svg
                            aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1238"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
@@ -6641,19 +6697,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          name="log-level-group"
                          type="radio"
                          value="error"
                        />
                        <div
-                          class="PrivateRadioButtonIcon-root-1237"
+                          class="PrivateRadioButtonIcon-root-1298"
                        >
                          <svg
                            aria-hidden="true"
@@ -6667,7 +6723,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                          </svg>
                          <svg
                            aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1238"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
@@ -6692,19 +6748,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          name="log-level-group"
                          type="radio"
                          value="critical"
                        />
                        <div
-                          class="PrivateRadioButtonIcon-root-1237"
+                          class="PrivateRadioButtonIcon-root-1298"
                        >
                          <svg
                            aria-hidden="true"
@@ -6718,7 +6774,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                          </svg>
                          <svg
                            aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1238"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
@@ -6753,14 +6809,14 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1234 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1295 Mui-checked MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
                          checked=""
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          data-indeterminate="false"
                          type="checkbox"
                          value=""
@@ -6819,10 +6875,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                      />
                      <fieldset
                        aria-hidden="true"
-                        class="PrivateNotchedOutline-root-1229 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
                      >
                        <legend
-                          class="PrivateNotchedOutline-legendLabelled-1231 PrivateNotchedOutline-legendNotched-1232"
+                          class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
                        >
                          <span>
                            Max Memory Buffer Size (0 uses default size)
@@ -6837,13 +6893,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                  >
                    <span
                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1233 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                    >
                      <span
                        class="MuiIconButton-label"
                      >
                        <input
-                          class="PrivateSwitchBase-input-1236"
+                          class="PrivateSwitchBase-input-1297"
                          data-indeterminate="false"
                          type="checkbox"
                          value=""
@@ -6904,10 +6960,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                    />
                    <fieldset
                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1229 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
                    >
                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-1231 PrivateNotchedOutline-legendNotched-1232"
+                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
                      >
                        <span>
                          Max Disk Buffer Size (0 uses default size)
@@ -7360,7 +7416,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
            class="makeStyles-paper-0000 makeStyles-tableSize-0000"
          >
            <div
-              class="MuiBox-root MuiBox-root-1362 makeStyles-tableToolbar-0000"
+              class="MuiBox-root MuiBox-root-1423 makeStyles-tableToolbar-0000"
            >
              <div
                class="MuiTabs-root"
@@ -7430,7 +7486,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                    </button>
                  </div>
                  <span
-                    class="PrivateTabIndicator-root-1363 PrivateTabIndicator-colorSecondary-1365 MuiTabs-indicator"
+                    class="PrivateTabIndicator-root-1424 PrivateTabIndicator-colorSecondary-1426 MuiTabs-indicator"
                    style="left: 0px; width: 0px;"
                  />
                </div>
@@ -7442,7 +7498,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
              role="tabpanel"
            >
              <div
-                class="MuiBox-root MuiBox-root-1367"
+                class="MuiBox-root MuiBox-root-1428"
              >
                <div
                  class="makeStyles-paper-0000 makeStyles-tableSize-0000"
--- a/src/components/Contexts/SupplierContext.jsx
+++ b/src/components/Contexts/SupplierContext.jsx
@@ -0,0 +1,42 @@
+import React, { useContext, useState } from "react";
+import api from "../../services/suppliersAPI";
+
+const SupplierContext = React.createContext();
+
+export const SupplierProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+  const [suppliers, setSuppliers] = useState([]);
+  const [totalSuppliers, setTotalSuppliers] = useState(0);
+
+  const getSuppliers = async (search, token) => {
+    try {
+      setBusy(true);
+      const result = await api.getSuppliers(search, token);
+      if (result.error) {
+        setSuppliers([]);
+        throw new Error(`Get suppliers error. ${result.message}`);
+      }
+      setSuppliers(result.data ?? []);
+      if (result.total) {
+        setTotalSuppliers(result.total);
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <SupplierContext.Provider
+      value={{
+        busy,
+        totalSuppliers,
+        suppliers,
+        getSuppliers,
+      }}
+    >
+      {children}
+    </SupplierContext.Provider>
+  );
+};
+
+export const useSupplierContext = () => useContext(SupplierContext);
--- a/src/components/Contexts/SupplierDetailsContext.jsx
+++ b/src/components/Contexts/SupplierDetailsContext.jsx
@@ -0,0 +1,146 @@
+import React, { useContext, useEffect, useState } from "react";
+import api from "../../services/suppliersAPI";
+import { LocalDateTimeString } from "../../utils/dates";
+
+import {
+  validateSupplier,
+  validateEmail,
+} from "../../utils/validationSupplier";
+import { useSupplierContext } from "./SupplierContext";
+
+const SupplierDetailsContext = React.createContext();
+
+export const SupplierDetailsProvider = ({ children }) => {
+  const { getSuppliers, suppliers } = useSupplierContext();
+  const [busy, setBusy] = useState(false);
+  const [contact, setContact] = useState("");
+  const [company, setCompany] = useState("");
+  const [address, setAddress] = useState("");
+  const [phone, setPhone] = useState("");
+  const [program, setProgram] = useState("");
+  const [ecus, setECUs] = useState("");
+  const [activated, setActivated] = useState(null);
+
+  useEffect(() => {
+    if (!suppliers || suppliers.length === 0) return;
+
+    const supplier = suppliers[0];
+
+    setContact(supplier?.contact || "");
+    setCompany(supplier?.company || "");
+    setAddress(supplier?.address || "");
+    setPhone(supplier?.telephone || "");
+    setProgram(supplier?.program || "");
+    setECUs(supplier?.ecus.join(",") || "");
+    setActivated(LocalDateTimeString(supplier?.activated));
+  }, [suppliers]);
+
+  const getSupplier = async (email, token) => {
+    try {
+      setBusy(true);
+      const result = await getSuppliers({ email }, token);
+      if (result?.error)
+        throw new Error(`Get supplier error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const getECUs = () => {
+    if (!ecus) return [];
+
+    const items = ecus.split(",");
+
+    return items.map((item) => item.trim());
+  };
+
+  const formData = (email) => ({
+    contact,
+    company,
+    address,
+    telephone: phone,
+    email,
+    program,
+    ecus: getECUs(),
+  });
+
+  const activateSupplier = async (email, token) => {
+    try {
+      setBusy(true);
+      validateEmail(email);
+
+      const result = await api.activateSupplier(email, token);
+      if (result.error)
+        throw new Error(`Activate supplier error. ${result.message}`);
+
+      setActivated(
+        LocalDateTimeString(result.activate) || new Date().toDateString()
+      );
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const updateSupplier = async (email, token) => {
+    try {
+      const supplier = formData(email);
+      setBusy(true);
+      validateSupplier(supplier);
+
+      const result = await api.updateSupplier(email, supplier, token);
+      if (result.error)
+        throw new Error(`Update supplier error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deleteSupplier = async (email, token) => {
+    try {
+      setBusy(true);
+      validateEmail(email);
+
+      const result = await api.deleteSupplier(email, token);
+      if (result.error)
+        throw new Error(`Delete supplier error. ${result.message}`);
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <SupplierDetailsContext.Provider
+      value={{
+        activated,
+        busy,
+        contact,
+        company,
+        address,
+        phone,
+        program,
+        ecus,
+        activateSupplier,
+        deleteSupplier,
+        getSupplier,
+        updateSupplier,
+        setContact,
+        setCompany,
+        setAddress,
+        setPhone,
+        setProgram,
+        setECUs,
+      }}
+    >
+      {children}
+    </SupplierDetailsContext.Provider>
+  );
+};
+
+export const useSupplierDetailsContext = () =>
+  useContext(SupplierDetailsContext);
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -36,6 +36,7 @@ export const VehicleProvider = ({ children }) => {

  const addConnections = async (cars, token) => {
    try {
+      if (cars.length === 0) return;
      const vins = cars.map((car) => car.vin);
      const result = await api.getConnections(vins, token);

--- a/src/components/Controls/CarSelectionTable/index.jsx
+++ b/src/components/Controls/CarSelectionTable/index.jsx
@@ -122,6 +122,10 @@ const CarSelectionTable = (props) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pageIndex, pageSize, orderBy, order, search, token]);

+  useEffect(() => {
+    setPageIndex(0);
+  }, [search]);
+
  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Table>
--- a/src/components/Layouts/SideMenu.jsx
+++ b/src/components/Layouts/SideMenu.jsx
@@ -6,6 +6,7 @@ import CommuteIcon from "@material-ui/icons/Commute";
 import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
 import AssessmentIcon from "@material-ui/icons/Assessment";
 import BuildIcon from "@material-ui/icons/Build";
+import SettingsInputCompositeIcon from "@material-ui/icons/SettingsInputComposite";

 import ListItemLink from "../ListItemLink";
 import ListItemExternalLink from "../ListItemExternalLink";
@@ -44,11 +45,17 @@ const menuData = [
    icon: <AssessmentIcon />,
    roles: [Roles.READ, Roles.CREATE],
  },
+  {
+    label: "Suppliers",
+    to: "/suppliers",
+    icon: <SettingsInputCompositeIcon />,
+    roles: [Roles.APPROVESUPPLIERS],
+  },
  {
    label: "Tools",
    to: "/tools/certificates/add",
    icon: <BuildIcon />,
-    roles: [Roles.CERTIFICATES],
+    roles: [Roles.CERTIFICATES, Roles.APPROVESUPPLIERS],
    submenus: [
      {
        label: "Certificate",
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -112,7 +112,7 @@ const MainForm = () => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pageIndex, pageSize, token, orderBy, order, search]);

-  const handleChangePageIndex = (event, newIndex) => {
+  const handleChangePageIndex = (_event, newIndex) => {
    setPageIndex(newIndex);
  };

@@ -122,6 +122,7 @@ const MainForm = () => {
  };

  const handleSearch = (query) => {
+    setPageIndex(0);
    setSearch(query);
  };

--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -34,6 +34,8 @@ const SSOForm = React.lazy(() => import("../SSOForm"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
 const VehicleUpdateForm = React.lazy(() => import("../Cars/Update"));
 const CertificateCreate = React.lazy(() => import("../Certificates/Add"));
+const SuppliersList = React.lazy(() => import("../Suppliers/List"));
+const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));

 const SiteRoutes = () => {
  const { token, groups } = useUserContext();
@@ -206,6 +208,22 @@ const SiteRoutes = () => {
          groups={groups}
          roles={[Roles.CERTIFICATES]}
        />
+        <AuthRoute
+          path="/suppliers"
+          render={() => <SuppliersList />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.APPROVESUPPLIERS]}
+        />
+        <AuthRoute
+          path="/supplier/:email"
+          render={() => <SupplierDetails />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.APPROVESUPPLIERS]}
+        />
        <PageNotFound />
      </Switch>
    </Suspense>
--- a/src/components/Suppliers/Details/snapshots/index.test.js.snap
+++ b/src/components/Suppliers/Details/snapshots/index.test.js.snap
@@ -0,0 +1,332 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Supplier page Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        id="mock-browserrouter"
+      >
+        <div
+          class="makeStyles-paper-3"
+        >
+          <form
+            action="#"
+            class="makeStyles-form-5"
+            novalidate=""
+          >
+            <div
+              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                data-shrink="true"
+                for="contact"
+                id="contact-label"
+              >
+                Contact
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="contact"
+                  maxlength="255"
+                  name="contact"
+                  required=""
+                  type="text"
+                  value="contact"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                  >
+                    <span>
+                      Contact
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                data-shrink="true"
+                for="company"
+                id="company-label"
+              >
+                Company
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="company"
+                  maxlength="255"
+                  name="company"
+                  required=""
+                  type="text"
+                  value="company"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                  >
+                    <span>
+                      Company
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                data-shrink="true"
+                for="address"
+                id="address-label"
+              >
+                Address
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="address"
+                  maxlength="1200"
+                  name="address"
+                  required=""
+                  type="text"
+                  value="address"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                  >
+                    <span>
+                      Address
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                data-shrink="true"
+                for="telephone"
+                id="telephone-label"
+              >
+                Telephone
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="telephone"
+                  maxlength="50"
+                  name="telephone"
+                  required=""
+                  type="text"
+                  value="555-555-5555"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                  >
+                    <span>
+                      Telephone
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                data-shrink="true"
+                for="program"
+                id="program-label"
+              >
+                Program
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="program"
+                  maxlength="50"
+                  name="program"
+                  required=""
+                  type="text"
+                  value="Ocean"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                  >
+                    <span>
+                      Program
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                data-shrink="true"
+                for="ecus"
+                id="ecus-label"
+              >
+                ECUs
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="ecus"
+                  maxlength="1000"
+                  name="ecus"
+                  required=""
+                  type="text"
+                  value="ADAS"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-64 PrivateNotchedOutline-legendNotched-65"
+                  >
+                    <span>
+                      ECUs
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedSecondary MuiButton-fullWidth"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Activate
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Submit
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/components/Suppliers/Details/index.js
+++ b/src/components/Suppliers/Details/index.js
@@ -0,0 +1,222 @@
+import { Button, TextField } from "@material-ui/core";
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { SupplierProvider } from "../../Contexts/SupplierContext";
+import {
+  SupplierDetailsProvider,
+  useSupplierDetailsContext,
+} from "../../Contexts/SupplierDetailsContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import useStyles from "../../useStyles";
+
+const Main = () => {
+  const { email } = useParams();
+  const classes = useStyles();
+  const {
+    busy,
+    activated,
+    contact,
+    company,
+    address,
+    phone,
+    program,
+    ecus,
+    getSupplier,
+    setContact,
+    setCompany,
+    setAddress,
+    setPhone,
+    setProgram,
+    setECUs,
+    activateSupplier,
+    updateSupplier,
+  } = useSupplierDetailsContext();
+  const { setTitle, setSitePath, setMessage } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  const update = async (event) => {
+    event.preventDefault();
+    try {
+      await updateSupplier(email, token);
+      setMessage(`Updated ${email}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  const activate = async (event) => {
+    event.preventDefault();
+    try {
+      await activateSupplier(email, token);
+      setMessage(`Activated ${email}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  useEffect(() => {
+    setTitle(`Supplier ${email}`);
+    setSitePath([
+      {
+        label: `Suppliers`,
+        link: "/suppliers",
+      },
+      {
+        label: email,
+      },
+    ]);
+
+    (async () => {
+      try {
+        await getSupplier(email, token);
+      } catch (e) {
+        setMessage(e.message);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="#">
+        <TextField
+          id="contact"
+          name="contact"
+          label="Contact"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          value={contact}
+          onChange={(e) => setContact(e.target.value)}
+        />
+        <TextField
+          id="company"
+          name="company"
+          label="Company"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          value={company}
+          onChange={(e) => setCompany(e.target.value)}
+        />
+        <TextField
+          id="address"
+          name="address"
+          label="Address"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "1200",
+          }}
+          required
+          fullWidth
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+        />
+        <TextField
+          id="telephone"
+          name="telephone"
+          label="Telephone"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "50",
+          }}
+          required
+          fullWidth
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+        />
+        <TextField
+          id="program"
+          name="program"
+          label="Program"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "50",
+          }}
+          required
+          fullWidth
+          value={program}
+          onChange={(e) => setProgram(e.target.value)}
+        />
+        <TextField
+          id="ecus"
+          name="ecus"
+          label="ECUs"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "1000",
+          }}
+          required
+          fullWidth
+          value={ecus}
+          onChange={(e) => setECUs(e.target.value)}
+        />
+        {activated ? (
+          <TextField
+            id="activated"
+            name="activated"
+            label="Activated"
+            variant="outlined"
+            margin="normal"
+            inputProps={{
+              maxLength: "255",
+              readOnly: true,
+            }}
+            required
+            fullWidth
+            value={activated}
+          />
+        ) : (
+          <Button
+            disabled={busy}
+            fullWidth
+            variant="contained"
+            color="secondary"
+            className={classes.submit}
+            onClick={activate}
+          >
+            Activate
+          </Button>
+        )}
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={update}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+const SupplierDetails = () => (
+  <SupplierProvider>
+    <SupplierDetailsProvider>
+      <Main />
+    </SupplierDetailsProvider>
+  </SupplierProvider>
+);
+
+export default SupplierDetails;
--- a/src/components/Suppliers/Details/index.test.js
+++ b/src/components/Suppliers/Details/index.test.js
@@ -0,0 +1,45 @@
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("../../../services/suppliersAPI");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+jest.mock("react-router-dom", () => ({
+  BrowserRouter: ({ children }) => (
+    <div id="mock-browserrouter">{children}</div>
+  ),
+  useParams: () => ({ email: "test@supplier.com" }),
+}));
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { SupplierProvider } from "../../Contexts/SupplierContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import MainForm from "./index";
+
+const renderSupplierDetailsPage = async () => {
+  const { container } = render(
+    <SupplierProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </SupplierProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("Supplier page", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderSupplierDetailsPage();
+    expect(container).toMatchSnapshot();
+  });
+});
--- a/src/components/Suppliers/List/snapshots/index.test.jsx.snap
+++ b/src/components/Suppliers/List/snapshots/index.test.jsx.snap
@@ -0,0 +1,463 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Suppliers page Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        class="makeStyles-paper-3 makeStyles-tableSize-53"
+      >
+        <div
+          class="makeStyles-paper-3 makeStyles-tableSize-53"
+        >
+          <table
+            class="MuiTable-root"
+          >
+            <thead
+              class="MuiTableHead-root"
+            >
+              <tr
+                class="MuiTableRow-root MuiTableRow-head"
+              >
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Contact
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Company
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Email
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Program
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    ECUs
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  aria-sort="ascending"
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Registered
+                    <span
+                      class="makeStyles-hiddenSortSpan-27"
+                    >
+                      sorted ascending
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Activated
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root"
+            >
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  <a
+                    href="/supplier/test@supplier.com"
+                  >
+                    contact
+                  </a>
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  company
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  <a
+                    href="mailto:test@supplier.com"
+                  >
+                    test@supplier.com
+                  </a>
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  Ocean
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  ADAS
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  7/14/2021 8:09:40 PM
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+              </tr>
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  <a
+                    href="/supplier/test2@supplier.com"
+                  >
+                    contact
+                  </a>
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  company
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  <a
+                    href="mailto:test2@supplier.com"
+                  >
+                    test2@supplier.com
+                  </a>
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  Pear
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  ICC, BCM
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  7/16/2021 10:09:40 PM
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+              </tr>
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  <a
+                    href="/supplier/test3@supplier.com"
+                  >
+                    contact
+                  </a>
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  company
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  <a
+                    href="mailto:test3@supplier.com"
+                  >
+                    test3@supplier.com
+                  </a>
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  Ocean
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  BCM
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  7/16/2021 10:09:40 PM
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+              </tr>
+            </tbody>
+            <tfoot
+              class="MuiTableFooter-root"
+            >
+              <tr
+                class="MuiTableRow-root MuiTableRow-footer"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                  colspan="7"
+                >
+                  <div
+                    class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                  >
+                    <div
+                      class="MuiTablePagination-spacer"
+                    />
+                    <p
+                      class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                    >
+                      Rows per page:
+                    </p>
+                    <div
+                      class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                    >
+                      <select
+                        aria-label="rows per page"
+                        class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                      >
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="5"
+                        >
+                          5
+                        </option>
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="10"
+                        >
+                          10
+                        </option>
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="25"
+                        >
+                          25
+                        </option>
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="100"
+                        >
+                          100
+                        </option>
+                      </select>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                    <p
+                      class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                    >
+                      0-0 of 0
+                    </p>
+                    <div
+                      class="MuiTablePagination-actions"
+                    >
+                      <button
+                        aria-label="Previous page"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                        disabled=""
+                        tabindex="-1"
+                        title="Previous page"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        aria-label="Next page"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                        disabled=""
+                        tabindex="-1"
+                        title="Next page"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/components/Suppliers/List/index.jsx
+++ b/src/components/Suppliers/List/index.jsx
@@ -0,0 +1,38 @@
+import React, { useEffect } from "react";
+import clsx from "clsx";
+
+import { SupplierProvider } from "../../Contexts/SupplierContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import SupplierTable from "../Table";
+
+const MainForm = () => {
+  const classes = useStyles();
+  const { setTitle, setSitePath } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  useEffect(() => {
+    setTitle("Suppliers");
+    setSitePath([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <SupplierTable classes={classes} token={token} />
+    </div>
+  );
+};
+
+const SuppliersList = () => (
+  <SupplierProvider>
+    <MainForm />
+  </SupplierProvider>
+);
+
+export default SuppliersList;
--- a/src/components/Suppliers/List/index.test.jsx
+++ b/src/components/Suppliers/List/index.test.jsx
@@ -0,0 +1,40 @@
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("../../../services/suppliersAPI");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { SupplierProvider } from "../../Contexts/SupplierContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import MainForm from "./index";
+
+const renderSuppliersPage = async () => {
+  const { container } = render(
+    <SupplierProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </SupplierProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("Suppliers page", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderSuppliersPage();
+    expect(container).toMatchSnapshot();
+  });
+});
--- a/src/components/Suppliers/Table/index.jsx
+++ b/src/components/Suppliers/Table/index.jsx
@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow,
+} from "@material-ui/core";
+import clsx from "clsx";
+
+import { useSupplierContext } from "../../Contexts/SupplierContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { LocalDateTimeString } from "../../../utils/dates";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { logger } from "../../../services/monitoring";
+
+const tableColumns = [
+  {
+    id: "contact",
+    label: "Contact",
+  },
+  {
+    id: "company",
+    label: "Company",
+  },
+  {
+    id: "email",
+    label: "Email",
+  },
+  {
+    id: "program",
+    label: "Program",
+  },
+  {
+    id: "ecus",
+    label: "ECUs",
+  },
+  {
+    id: "created_at",
+    label: "Registered",
+  },
+  {
+    id: "activated_at",
+    label: "Activated",
+  },
+];
+
+const SupplierTable = (props) => {
+  const { token, classes } = props;
+  const [pageSize, setPageSize] = useState(10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("created_at");
+  const [order, setOrder] = useState("asc");
+  const { getSuppliers, suppliers, totalSuppliers } = useSupplierContext();
+  const { setMessage } = useStatusContext();
+
+  const sortHandler = (_event, property) => {
+    if (property === orderBy) {
+      if (order === "asc") {
+        setOrder("desc");
+      } else {
+        setOrder("asc");
+      }
+    } else {
+      setOrderBy(property);
+      setOrder("asc");
+    }
+  };
+
+  const handleChangePageIndex = (_event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const query = async (signal) => {
+    try {
+      const options = {
+        limit: pageSize,
+        offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
+      };
+      await getSuppliers(options, token, signal);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    query(controller.signal);
+
+    return () => {
+      controller.abort();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageIndex, pageSize, orderBy, order, token]);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={sortHandler}
+          rowCount={suppliers ? suppliers.length : 0}
+        />
+        <TableBody>
+          {suppliers.map((row, index) => {
+            return (
+              <TableRow key={index}>
+                <TableCell align="center">
+                  <Link to={`/supplier/${row.email}`}>{row.contact}</Link>
+                </TableCell>
+                <TableCell align="center">{row.company}</TableCell>
+                <TableCell align="center">
+                  <a href={`mailto:${row.email}`}>{row.email}</a>
+                </TableCell>
+                <TableCell align="center">{row.program}</TableCell>
+                <TableCell align="center">{row.ecus.join(", ")}</TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.created)}
+                </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.activated)}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={7}
+              count={totalSuppliers}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  );
+};
+
+SupplierTable.propTypes = {
+  token: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+export default SupplierTable;
--- a/src/services/mocks/suppliersAPI.js
+++ b/src/services/mocks/suppliersAPI.js
@@ -0,0 +1,64 @@
+const data = [
+  {
+    email: "test@supplier.com",
+    address: "address",
+    company: "company",
+    contact: "contact",
+    created: "2021-07-14T20:09:40.98187Z",
+    ecus: ["ADAS"],
+    program: "Ocean",
+    telephone: "555-555-5555",
+    updated: "2021-07-15T21:09:40.98187Z",
+  },
+  {
+    email: "test2@supplier.com",
+    address: "address",
+    company: "company",
+    contact: "contact",
+    created: "2021-07-16T22:09:40.98187Z",
+    ecus: ["ICC", "BCM"],
+    program: "Pear",
+    telephone: "555-555-5555",
+    updated: "2021-07-17T20:09:40.98187Z",
+  },
+  {
+    email: "test3@supplier.com",
+    address: "address",
+    company: "company",
+    contact: "contact",
+    created: "2021-07-16T22:09:40.98187Z",
+    ecus: ["BCM"],
+    program: "Ocean",
+    telephone: "555-555-5555",
+    updated: "2021-07-17T20:09:40.98187Z",
+  },
+];
+
+const suppliersAPI = {
+  addSupplier: async (supplier) => {
+    data.push(supplier);
+    return supplier;
+  },
+  activateSupplier: async (_email, _token) => {
+    return { message: "2022-07-14T21:02:58.998182Z" };
+  },
+  deleteSupplier: async (email) => {
+    const index = data.findIndex((element) => element.email === email);
+    if (index >= 0) data.splice(index, 1);
+    return email;
+  },
+  getSupplier: async (email) => {
+    const index = data.findIndex((element) => element.email === email);
+    return data[index];
+  },
+  getSuppliers: async () => {
+    return { data };
+  },
+  updateSupplier: async (email, supplier) => {
+    const index = data.findIndex((element) => element.email === email);
+    if (index >= 0) data[index] = supplier;
+    return supplier;
+  },
+};
+
+export default suppliersAPI;
--- a/src/services/suppliersAPI.js
+++ b/src/services/suppliersAPI.js
@@ -0,0 +1,83 @@
+import {
+  errorHandler,
+  getAuthHeaderOptions,
+  fetchRespHandler,
+  addQueryParams,
+} from "../utils/http";
+
+const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+
+const suppliersAPI = {
+  addSupplier: async (vehicle, token) =>
+    fetch(`${API_ENDPOINT}/supplier`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(vehicle),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
+  activateSupplier: async (email, token) =>
+    fetch(`${API_ENDPOINT}/supplier/activate/${email}`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
+  deleteSupplier: async (email, token) =>
+    fetch(`${API_ENDPOINT}/supplier/${email}`, {
+      method: "DELETE",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
+  getSupplier: async (email, token, signal) =>
+    fetch(`${API_ENDPOINT}/supplier/${email}`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      signal,
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
+  getSuppliers: async (search, token) => {
+    const u = addQueryParams(`${API_ENDPOINT}/suppliers`, search);
+    return fetch(u, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
+
+  updateSupplier: async (email, supplier, token) =>
+    fetch(`${API_ENDPOINT}/supplier/${email}`, {
+      method: "PUT",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(supplier),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+};
+
+export default suppliersAPI;
--- a/src/utils/dates.js
+++ b/src/utils/dates.js
@@ -1,13 +1,14 @@
 export const ts2DateTime = (timestamp) => {
  return new Date(timestamp * 1000);
-}
+};

 export const tsLocalDateTimeString = (timestamp) => {
  const date = ts2DateTime(timestamp);
-  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
-}
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+};

 export const LocalDateTimeString = (datestring) => {
-  const date = new Date(datestring.replace(' ', 'T'));
-  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
-}
+  if (!datestring) return "";
+  const date = new Date(datestring.replace(" ", "T"));
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+};
--- a/src/utils/roles.js
+++ b/src/utils/roles.js
@@ -5,6 +5,7 @@ export const Roles = {
  CREATE: "efcc3025-e2d8-4212-8227-805c7be39d2c",
  DELETE: "8f78dce7-f5f9-4033-a10c-c9c7408bfcfe",
  CERTIFICATES: "746f34b0-9ba0-4b5d-8d84-0256a9c8e390",
+  APPROVESUPPLIERS: "a6c9805e-80b2-42b2-bfbb-9df52e5504d8",
 };

 export const hasRoleToken = (roles, token) => {
--- a/src/utils/validationSupplier.js
+++ b/src/utils/validationSupplier.js
@@ -0,0 +1,37 @@
+import validator from "email-validator";
+
+export const validateSupplier = (supplier) => {
+  if (supplier == null) {
+    throw new Error("No supplier data");
+  }
+
+  validateEmail(supplier.email);
+
+  if (!supplier?.contact) {
+    throw new Error("contact required");
+  }
+
+  if (!supplier?.company) {
+    throw new Error("company required");
+  }
+
+  if (!supplier?.address) {
+    throw new Error("address required");
+  }
+
+  if (!supplier?.telephone) {
+    throw new Error("telephone required");
+  }
+
+  if (!supplier?.program) {
+    throw new Error("program required");
+  }
+
+  if (!supplier?.ecus) {
+    throw new Error("ecus required");
+  }
+};
+
+export const validateEmail = (email) => {
+  if (!validator.validate(email)) throw new Error("invalid email");
+};