From 618cc68196b9836ecf206ce5ad2926c4a509f29b Mon Sep 17 00:00:00 2001
From: Alexander Andrews
 <45926661+alexander-e-andrews@users.noreply.github.com>
Date: Tue, 20 Sep 2022 09:40:28 -0400
Subject: [PATCH] CEC-425 Added Delete Verification Prompt (#198)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
---
 package-lock.json                             | 658 +++++++++++-------
 .../App/__snapshots__/App.test.js.snap        |  36 +-
 .../Details/__snapshots__/index.test.jsx.snap |  12 +-
 src/components/Cars/Status/Details/index.jsx  |   5 +-
 .../Cars/Status/Details/index.test.jsx        |   8 +-
 .../__snapshots__/DetailsTab.test.jsx.snap    |   1 +
 .../Status/__snapshots__/index.test.jsx.snap  |  12 +-
 src/components/Cars/Status/index.test.jsx     |   6 +
 src/components/Controls/TabPanel/index.jsx    |   2 +-
 .../__snapshots__/index.test.jsx.snap         |   9 +
 src/components/DeleteConfirmation/index.jsx   |  36 +
 .../DeleteConfirmation/index.test.jsx         |  20 +
 .../Details/__snapshots__/index.test.jsx.snap |  12 +-
 .../Fleets/Status/Details/index.jsx           |   5 +-
 .../Fleets/Status/Details/index.test.jsx      |   8 +-
 .../Table/__snapshots__/index.test.jsx.snap   | 105 +--
 .../Fleets/Status/Vehicles/Table/index.jsx    |  20 +-
 .../__snapshots__/DetailsTab.test.jsx.snap    |   1 +
 .../__snapshots__/VehiclesTab.test.jsx.snap   | 105 +--
 .../Status/__snapshots__/index.test.jsx.snap  |  12 +-
 src/components/Fleets/Status/index.test.jsx   |   6 +
 src/components/Manifest/List/index.jsx        |   5 +
 22 files changed, 692 insertions(+), 392 deletions(-)
 create mode 100644 src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
 create mode 100644 src/components/DeleteConfirmation/index.jsx
 create mode 100644 src/components/DeleteConfirmation/index.test.jsx

diff --git a/package-lock.json b/package-lock.json
index 8b3fc11..55c27be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,19 +9,24 @@
       "version": "0.1.1",
       "dependencies": {
         "@datadog/browser-logs": "^3.11.0",
+        "@date-io/date-fns": "1.x",
+        "@date-io/moment": "1.x",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.11.3",
+        "@material-ui/pickers": "^3.3.10",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^0.26.1",
         "clsx": "^1.1.1",
+        "date-fns": "^2.29.2",
         "email-validator": "^2.0.4",
         "env-cmd": "^10.1.0",
         "leaflet": "^1.8.0",
         "material-ui-dropzone": "^3.5.0",
+        "moment": "^2.29.4",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-leaflet": "^3.2.5",
@@ -3396,6 +3401,33 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "dependencies": {
+        "@date-io/core": "^1.3.13"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
+      "integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
+      "dependencies": {
+        "@date-io/core": "^1.3.13"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -3591,6 +3623,21 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3629,6 +3676,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -4148,6 +4200,26 @@
         }
       }
     },
+    "node_modules/@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      },
+      "peerDependencies": {
+        "@date-io/core": "^1.3.6",
+        "@material-ui/core": "^4.0.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
@@ -5103,6 +5175,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.3",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
@@ -5629,13 +5709,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -5659,34 +5739,6 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -5996,6 +6048,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/babel-loader/node_modules/json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -7118,21 +7198,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -7144,11 +7209,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -7403,6 +7463,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -8602,6 +8674,21 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -8658,6 +8745,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/espree": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
@@ -9149,6 +9241,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -9193,6 +9308,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -11420,9 +11540,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -11937,21 +12057,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -11963,11 +12068,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -12018,6 +12118,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14911,6 +15019,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -15090,6 +15209,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16173,6 +16320,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -16479,21 +16639,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16505,11 +16650,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -16579,21 +16719,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16616,11 +16741,6 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -16881,21 +17001,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -16910,11 +17015,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/workbox-build/node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -19686,6 +19786,27 @@
         }
       }
     },
+    "@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
+    "@date-io/moment": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
+      "integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -19847,6 +19968,17 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -19872,6 +20004,11 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         }
       }
     },
@@ -20257,6 +20394,19 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
@@ -20952,6 +21102,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.3",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
@@ -21339,13 +21497,13 @@
       }
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
     },
@@ -21355,32 +21513,8 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "requires": {
         "ajv": "^8.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        }
       }
     },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
-    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -21593,6 +21727,28 @@
         "schema-utils": "^2.6.5"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -22430,17 +22586,6 @@
         "source-map": "^0.6.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -22449,11 +22594,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -22653,6 +22793,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -23222,6 +23367,17 @@
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -23256,6 +23412,11 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         }
       }
     },
@@ -23950,6 +24111,23 @@
         "tapable": "^1.0.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -23982,6 +24160,11 @@
             "universalify": "^2.0.0"
           }
         },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -25591,9 +25774,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -25988,17 +26171,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -26007,11 +26179,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -26051,6 +26218,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -28041,6 +28213,14 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1"
+      }
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -28150,6 +28330,30 @@
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
         "ajv-keywords": "^3.5.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        }
       }
     },
     "select-hose": {
@@ -28989,6 +29193,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "peer": true
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -29233,17 +29443,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -29252,11 +29451,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -29307,17 +29501,6 @@
         "ws": "^8.4.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -29331,11 +29514,6 @@
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
           "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -29517,17 +29695,6 @@
         "workbox-window": "6.5.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "fs-extra": {
           "version": "9.1.0",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -29539,11 +29706,6 @@
             "universalify": "^2.0.0"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "source-map": {
           "version": "0.8.0-beta.0",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index e2a4fa3..4b962b9 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -3287,23 +3287,26 @@ exports[`App Route /packages authenticated 1`] = `
                           />
                         </svg>
                       </a>
-                      <a
-                        class=""
-                        href="/packages"
-                        title="Delete \\"Test Manifest 1.0\\""
-                      >
-                        <svg
-                          aria-hidden="true"
-                          aria-label="Delete Test Manifest 1.0"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                      <div>
+                        <a
+                          class=""
+                          href="/packages"
+                          title="Delete \\"Test Manifest 1.0\\""
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </a>
+                          <svg
+                            aria-hidden="true"
+                            aria-label="Delete Test Manifest 1.0"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </a>
+                        <div />
+                      </div>
                     </td>
                   </tr>
                 </tbody>
@@ -7024,6 +7027,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                           </a>
                         </div>
                       </div>
+                      <div />
                     </div>
                   </div>
                 </div>
diff --git a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
index 3dcc0a7..d38148b 100644
--- a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                     VIN
                   </b>
                   : 
+                  TESTVIN1234567890
                 </p>
                 <p>
                   <b>
@@ -84,13 +85,13 @@ exports[`VehicleDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/vehicle-update?vin=undefined"
+                  href="/vehicle-update?vin=TESTVIN1234567890"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -103,11 +104,11 @@ exports[`VehicleDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -119,6 +120,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>
diff --git a/src/components/Cars/Status/Details/index.jsx b/src/components/Cars/Status/Details/index.jsx
index 243151f..7692078 100644
--- a/src/components/Cars/Status/Details/index.jsx
+++ b/src/components/Cars/Status/Details/index.jsx
@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
 import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ vin }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -76,12 +78,13 @@ const MainForm = ({ vin }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${vin}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={vin} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };
diff --git a/src/components/Cars/Status/Details/index.test.jsx b/src/components/Cars/Status/Details/index.test.jsx
index 2334a9e..708c415 100644
--- a/src/components/Cars/Status/Details/index.test.jsx
+++ b/src/components/Cars/Status/Details/index.test.jsx
@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { VehicleProvider } from "../../../Contexts/VehicleContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderVehicleDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm vin="TESTVIN1234567890"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("VehicleDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleDetailsTab();
diff --git a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
index 3c50755..c2a24b3 100644
--- a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
@@ -128,6 +128,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index d6855a8..02f5063 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -175,6 +175,7 @@ exports[`CarStatus Render 1`] = `
                           VIN
                         </b>
                         : 
+                        TESTVIN1234567890
                       </p>
                     </div>
                     <div
@@ -182,13 +183,13 @@ exports[`CarStatus Render 1`] = `
                     >
                       <a
                         class=""
-                        href="/vehicle-update?vin=undefined"
+                        href="/vehicle-update?vin=TESTVIN1234567890"
                         style="margin: 5px;"
-                        title="Update \\"undefined\\""
+                        title="Update \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Update \\"undefined\\""
+                          aria-label="Update \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -201,11 +202,11 @@ exports[`CarStatus Render 1`] = `
                       <a
                         class=""
                         href="/"
-                        title="Delete \\"undefined\\""
+                        title="Delete \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Delete \\"undefined\\""
+                          aria-label="Delete \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -217,6 +218,7 @@ exports[`CarStatus Render 1`] = `
                       </a>
                     </div>
                   </div>
+                  <div />
                 </div>
               </div>
             </div>
diff --git a/src/components/Cars/Status/index.test.jsx b/src/components/Cars/Status/index.test.jsx
index 9eaed1a..8083078 100644
--- a/src/components/Cars/Status/index.test.jsx
+++ b/src/components/Cars/Status/index.test.jsx
@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("CarStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();
diff --git a/src/components/Controls/TabPanel/index.jsx b/src/components/Controls/TabPanel/index.jsx
index d97a74f..a63ff80 100644
--- a/src/components/Controls/TabPanel/index.jsx
+++ b/src/components/Controls/TabPanel/index.jsx
@@ -3,7 +3,7 @@ import { Box } from "@material-ui/core";
 
 function TabPanel(props) {
     const { children, value, index, ...other } = props;
-
+  
     return (
         <div
             role="tabpanel"
diff --git a/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap b/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..1d827d7
--- /dev/null
+++ b/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete Confirmation Modal Should render 1`] = `
+<div
+  aria-hidden="true"
+>
+  <div />
+</div>
+`;
diff --git a/src/components/DeleteConfirmation/index.jsx b/src/components/DeleteConfirmation/index.jsx
new file mode 100644
index 0000000..877a622
--- /dev/null
+++ b/src/components/DeleteConfirmation/index.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {Dialog, DialogTitle, DialogContentText, Button, DialogActions, DialogContent} from '@material-ui/core';
+
+const DeleteConfirmation = (props) => {
+    return (
+      <div>
+      <Dialog open={props.open}
+      onClose={props.close}>
+        <DialogTitle id="alert-dialog-title">
+          {"Delete Resource?"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {"Are you sure you want to delete: " + props.message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.close}>Cancel</Button>
+          <Button variant="contained" color="secondary" onClick={() => { props.close(); props.deleteFunction()}} autoFocus>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+      </div>
+    )
+}
+
+DeleteConfirmation.propTypes={
+  open: PropTypes.bool.isRequired, // Boolean that determines if the modal should be open
+  close: PropTypes.func.isRequired, // Function that sets the open state to false i.e. () => setOpen(false)
+  message: PropTypes.any.isRequired, // What the user will see if being confirmed to be deleted
+  deleteFunction: PropTypes.func.isRequired, // Function that runs when user clicks delete
+}
+
+export default DeleteConfirmation;
\ No newline at end of file
diff --git a/src/components/DeleteConfirmation/index.test.jsx b/src/components/DeleteConfirmation/index.test.jsx
new file mode 100644
index 0000000..33da9de
--- /dev/null
+++ b/src/components/DeleteConfirmation/index.test.jsx
@@ -0,0 +1,20 @@
+jest.mock("../Contexts/UserContext");
+
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import DeleteConfirmation from "./index";
+import addSnapshotSerializer from "../../utils/snapshot";
+
+describe("Delete Confirmation Modal", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Should render", () => {
+    const { container } = render(
+      <DeleteConfirmation open={true} close={()=>{}} message="Test Message" deleteFunction={()=>{}}/>
+    );
+    expect(container).toMatchSnapshot();
+    cleanup();
+  });
+});
diff --git a/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
index f49c5ea..1019037 100644
--- a/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`FleetDetailsTab Render 1`] = `
                     Name
                   </b>
                   : 
+                  Test Fleet
                 </p>
                 <p>
                   <b>
@@ -91,13 +92,13 @@ exports[`FleetDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/fleet-update?name=undefined"
+                  href="/fleet-update?name=Test Fleet"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -110,11 +111,11 @@ exports[`FleetDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -126,6 +127,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>
diff --git a/src/components/Fleets/Status/Details/index.jsx b/src/components/Fleets/Status/Details/index.jsx
index 9b5b31f..3cf7c95 100644
--- a/src/components/Fleets/Status/Details/index.jsx
+++ b/src/components/Fleets/Status/Details/index.jsx
@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ name }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleet, getFleet, deleteFleet } = useFleetContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -77,12 +79,13 @@ const MainForm = ({ name }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${name}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={name} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };
diff --git a/src/components/Fleets/Status/Details/index.test.jsx b/src/components/Fleets/Status/Details/index.test.jsx
index 8ba6fbf..6cd7f4b 100644
--- a/src/components/Fleets/Status/Details/index.test.jsx
+++ b/src/components/Fleets/Status/Details/index.test.jsx
@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderFleetDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm name="Test Fleet"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("FleetDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Test Fleet" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetDetailsTab();
diff --git a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
index 8fc325e..34f3767 100644
--- a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
@@ -153,23 +153,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345678\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345678"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345678\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345678"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -187,23 +190,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345679\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345679"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345679\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345679"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -221,23 +227,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345670\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345670"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345670\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345670"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
               </tbody>
diff --git a/src/components/Fleets/Status/Vehicles/Table/index.jsx b/src/components/Fleets/Status/Vehicles/Table/index.jsx
index fa061e6..0fdbdfe 100644
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -22,7 +22,8 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
-import {useLocalStorage} from "../../../../useLocalStorage";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import DeleteConfirmation from "../../../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -43,6 +44,7 @@ const MainForm = ({ name }) => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
@@ -132,11 +134,15 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
+          <div>
+            <Tooltip key={`delete-${action.id}`} title={action.tip}>
+              <Link to="#" onClick={() => onDelete(action.id)}>
+                {action.icon}
+              </Link>
+            </Tooltip>
+            <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+          </div>
+
         );
       }
     });
@@ -151,7 +157,7 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch}/>
+          <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
       </Grid>
       <Table>
diff --git a/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
index 5b8cd0e..fd28656 100644
--- a/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
@@ -135,6 +135,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>
diff --git a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
index ea291f7..905f4f2 100644
--- a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
@@ -152,23 +152,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345678\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345678"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345678\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345678"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -186,23 +189,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345679\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345679"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345679\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345679"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -220,23 +226,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345670\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345670"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345670\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345670"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
           </tbody>
diff --git a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
index 2ccf0d6..7eee5c3 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -124,6 +124,7 @@ exports[`FleetStatus Render 1`] = `
                             Name
                           </b>
                           : 
+                          Fleet Name
                         </p>
                         <p>
                           <b>
@@ -187,13 +188,13 @@ exports[`FleetStatus Render 1`] = `
                       >
                         <a
                           class=""
-                          href="/fleet-update?name=undefined"
+                          href="/fleet-update?name=Fleet Name"
                           style="margin: 5px;"
-                          title="Update \\"undefined\\""
+                          title="Update \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Update \\"undefined\\""
+                            aria-label="Update \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -206,11 +207,11 @@ exports[`FleetStatus Render 1`] = `
                         <a
                           class=""
                           href="/"
-                          title="Delete \\"undefined\\""
+                          title="Delete \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Delete \\"undefined\\""
+                            aria-label="Delete \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -222,6 +223,7 @@ exports[`FleetStatus Render 1`] = `
                         </a>
                       </div>
                     </div>
+                    <div />
                   </div>
                 </div>
               </div>
diff --git a/src/components/Fleets/Status/index.test.jsx b/src/components/Fleets/Status/index.test.jsx
index 8ecfca1..bc5cb8c 100644
--- a/src/components/Fleets/Status/index.test.jsx
+++ b/src/components/Fleets/Status/index.test.jsx
@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("FleetStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Fleet Name" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index 07bfe2f..d47f838 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -30,6 +30,7 @@ import ECUList from "../../Controls/ECUList";
 import { Roles, hasRole } from "../../../utils/roles";
 import { useLocalStorage } from "../../useLocalStorage";
 import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import DeleteConfirmation from "../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -67,6 +68,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -178,11 +180,14 @@ const MainForm = () => {
         );
       } else {
         return (
+          <div>
           <Tooltip key={`delete-${action.id}`} title={action.tip}>
             <Link to="#" onClick={() => onDelete(action.id)}>
               {action.icon}
             </Link>
           </Tooltip>
+          <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+          </div>
         );
       }
     });