From 5129289a800fd9976595cfae1b3a094120f43cfe Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Thu, 7 Jul 2022 12:15:42 -0700
Subject: [PATCH] CEC-1666 Deploy Supplier Accounts to Staging (#165)

* CEC-1965 Supplier update and approval (#162)

* CEC-1965 Supplier update and approval
Fix calling connectedcars for no VINs
Search sets table page to 0

* PR comments

* CEC-1965 Cleanup (#163)

* CEC-1965 Table footer fix (#164)

tiny tiny change
---
 package-lock.json                             |  16 +-
 package.json                                  |   5 +-
 src/components/App/App.test.js                |   8 +
 .../App/__snapshots__/App.test.js.snap        | 198 +++++---
 src/components/Contexts/SupplierContext.jsx   |  42 ++
 .../Contexts/SupplierDetailsContext.jsx       | 126 +++++
 src/components/Contexts/VehicleContext.jsx    |   1 +
 .../Controls/CarSelectionTable/index.jsx      |   4 +
 src/components/Layouts/SideMenu.jsx           |   9 +-
 src/components/Manifest/List/index.jsx        |   3 +-
 src/components/Routes/SiteRoutes.jsx          |  18 +
 .../Details/__snapshots__/index.test.js.snap  | 364 ++++++++++++++
 src/components/Suppliers/Details/index.js     | 199 ++++++++
 .../Suppliers/Details/index.test.js           |  45 ++
 .../List/__snapshots__/index.test.jsx.snap    | 463 ++++++++++++++++++
 src/components/Suppliers/List/index.jsx       |  38 ++
 src/components/Suppliers/List/index.test.jsx  |  40 ++
 src/components/Suppliers/Table/index.jsx      | 166 +++++++
 src/services/__mocks__/suppliersAPI.js        |  61 +++
 src/services/suppliersAPI.js                  |  72 +++
 src/utils/dates.js                            |  13 +-
 src/utils/roles.js                            |   1 +
 src/utils/validationSupplier.js               |  41 ++
 23 files changed, 1851 insertions(+), 82 deletions(-)
 create mode 100644 src/components/Contexts/SupplierContext.jsx
 create mode 100644 src/components/Contexts/SupplierDetailsContext.jsx
 create mode 100644 src/components/Suppliers/Details/__snapshots__/index.test.js.snap
 create mode 100644 src/components/Suppliers/Details/index.js
 create mode 100644 src/components/Suppliers/Details/index.test.js
 create mode 100644 src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
 create mode 100644 src/components/Suppliers/List/index.jsx
 create mode 100644 src/components/Suppliers/List/index.test.jsx
 create mode 100644 src/components/Suppliers/Table/index.jsx
 create mode 100644 src/services/__mocks__/suppliersAPI.js
 create mode 100644 src/services/suppliersAPI.js
 create mode 100644 src/utils/validationSupplier.js

diff --git a/package-lock.json b/package-lock.json
index 0ada385..50501fd 100644
--- 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",
diff --git a/package.json b/package.json
index 54f6371..c1c5967 100644
--- 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"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index 9a9157b..b78ce25 100644
--- 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");
   });
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index ced51d8..f76157a 100644
--- 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"
diff --git a/src/components/Contexts/SupplierContext.jsx b/src/components/Contexts/SupplierContext.jsx
new file mode 100644
index 0000000..7348a0f
--- /dev/null
+++ 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);
diff --git a/src/components/Contexts/SupplierDetailsContext.jsx b/src/components/Contexts/SupplierDetailsContext.jsx
new file mode 100644
index 0000000..a061c24
--- /dev/null
+++ b/src/components/Contexts/SupplierDetailsContext.jsx
@@ -0,0 +1,126 @@
+import React, { useContext, useEffect, useState } from "react";
+import api from "../../services/suppliersAPI";
+
+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 [id, setID] = useState("");
+  const [contact, setContact] = useState("");
+  const [company, setCompany] = useState("");
+  const [address, setAddress] = useState("");
+  const [phone, setPhone] = useState("");
+  const [program, setProgram] = useState("");
+  const [ecus, setECUs] = useState("");
+
+  useEffect(() => {
+    if (!suppliers || suppliers.length === 0) return;
+
+    const supplier = suppliers[0];
+
+    setID(supplier?.id || "");
+    setContact(supplier?.contact || "");
+    setCompany(supplier?.company || "");
+    setAddress(supplier?.address || "");
+    setPhone(supplier?.telephone || "");
+    setProgram(supplier?.program || "");
+    setECUs(supplier?.ecus.join(",") || "");
+  }, [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) => ({
+    id,
+    contact,
+    company,
+    address,
+    telephone: phone,
+    email,
+    program,
+    ecus: getECUs(),
+  });
+
+  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 (vin, token) => {
+    try {
+      setBusy(true);
+      validateEmail(vin);
+
+      const result = await api.deleteSupplier(vin, token);
+      if (result.error)
+        throw new Error(`Delete supplier error. ${result.message}`);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <SupplierDetailsContext.Provider
+      value={{
+        busy,
+        id,
+        contact,
+        company,
+        address,
+        phone,
+        program,
+        ecus,
+        deleteSupplier,
+        getSupplier,
+        updateSupplier,
+        setID,
+        setContact,
+        setCompany,
+        setAddress,
+        setPhone,
+        setProgram,
+        setECUs,
+      }}
+    >
+      {children}
+    </SupplierDetailsContext.Provider>
+  );
+};
+
+export const useSupplierDetailsContext = () =>
+  useContext(SupplierDetailsContext);
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index 87eb925..7d22072 100644
--- 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);
 
diff --git a/src/components/Controls/CarSelectionTable/index.jsx b/src/components/Controls/CarSelectionTable/index.jsx
index 800659d..742e596 100644
--- 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>
diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx
index 77f2c49..8991a8b 100644
--- 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",
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index ae69831..a414f20 100644
--- 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);
   };
 
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index 54c7086..cb75b6a 100644
--- 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>
diff --git a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000..ba15850
--- /dev/null
+++ b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
@@ -0,0 +1,364 @@
+// 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-outlined Mui-required Mui-required"
+                data-shrink="false"
+                for="id"
+                id="id-label"
+              >
+                Active Directory ID
+                <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="id"
+                  maxlength="255"
+                  name="id"
+                  required=""
+                  type="text"
+                  value=""
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-64"
+                  >
+                    <span>
+                      Active Directory ID
+                       *
+                    </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="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-containedPrimary MuiButton-fullWidth"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Submit
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Suppliers/Details/index.js b/src/components/Suppliers/Details/index.js
new file mode 100644
index 0000000..0d32cc4
--- /dev/null
+++ b/src/components/Suppliers/Details/index.js
@@ -0,0 +1,199 @@
+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,
+    id,
+    contact,
+    company,
+    address,
+    phone,
+    program,
+    ecus,
+    getSupplier,
+    setID,
+    setContact,
+    setCompany,
+    setAddress,
+    setPhone,
+    setProgram,
+    setECUs,
+    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);
+    }
+  };
+
+  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="id"
+          name="id"
+          label="Active Directory ID"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          value={id}
+          onChange={(e) => setID(e.target.value)}
+        />
+        <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)}
+        />
+        <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;
diff --git a/src/components/Suppliers/Details/index.test.js b/src/components/Suppliers/Details/index.test.js
new file mode 100644
index 0000000..66d429f
--- /dev/null
+++ 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();
+  });
+});
diff --git a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..6ba1aae
--- /dev/null
+++ 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"
+                  >
+                    ID
+                    <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"
+                  >
+                    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>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root"
+            >
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <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>
+              </tr>
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <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>
+              </tr>
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <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>
+              </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>
+`;
diff --git a/src/components/Suppliers/List/index.jsx b/src/components/Suppliers/List/index.jsx
new file mode 100644
index 0000000..a859357
--- /dev/null
+++ 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;
diff --git a/src/components/Suppliers/List/index.test.jsx b/src/components/Suppliers/List/index.test.jsx
new file mode 100644
index 0000000..eda2fd9
--- /dev/null
+++ 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();
+  });
+});
diff --git a/src/components/Suppliers/Table/index.jsx b/src/components/Suppliers/Table/index.jsx
new file mode 100644
index 0000000..09abf43
--- /dev/null
+++ b/src/components/Suppliers/Table/index.jsx
@@ -0,0 +1,166 @@
+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: "id",
+    label: "ID",
+  },
+  {
+    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",
+  },
+];
+
+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">{row?.id}</TableCell>
+                <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>
+              </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;
diff --git a/src/services/__mocks__/suppliersAPI.js b/src/services/__mocks__/suppliersAPI.js
new file mode 100644
index 0000000..3e39609
--- /dev/null
+++ b/src/services/__mocks__/suppliersAPI.js
@@ -0,0 +1,61 @@
+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;
+  },
+  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;
diff --git a/src/services/suppliersAPI.js b/src/services/suppliersAPI.js
new file mode 100644
index 0000000..ad9059e
--- /dev/null
+++ b/src/services/suppliersAPI.js
@@ -0,0 +1,72 @@
+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),
+
+  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;
diff --git a/src/utils/dates.js b/src/utils/dates.js
index 5d57877..02e70af 100644
--- 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()}`
-}
\ No newline at end of file
+  if (!datestring) return "";
+  const date = new Date(datestring.replace(" ", "T"));
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+};
diff --git a/src/utils/roles.js b/src/utils/roles.js
index 3207034..78546bf 100644
--- 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) => {
diff --git a/src/utils/validationSupplier.js b/src/utils/validationSupplier.js
new file mode 100644
index 0000000..afb2200
--- /dev/null
+++ b/src/utils/validationSupplier.js
@@ -0,0 +1,41 @@
+import validator from "email-validator";
+
+export const validateSupplier = (supplier) => {
+  if (supplier == null) {
+    throw new Error("No supplier data");
+  }
+
+  validateEmail(supplier.email);
+
+  if (!supplier?.id) {
+    throw new Error("id required");
+  }
+
+  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");
+};