diff --git a/client/src/assets/unfolded_car-orig.svg b/client/src/assets/unfolded_car-orig.svg
new file mode 100644
index 000000000..0e6ca5c2e
--- /dev/null
+++ b/client/src/assets/unfolded_car-orig.svg
@@ -0,0 +1,787 @@
+
+
+
+
diff --git a/client/src/assets/unfolded_car.svg b/client/src/assets/unfolded_car.svg
index 326293fd1..db3a4d87f 100644
--- a/client/src/assets/unfolded_car.svg
+++ b/client/src/assets/unfolded_car.svg
@@ -1,6 +1,4 @@
-
-
diff --git a/client/src/assets/unfolded_car_clean.svg b/client/src/assets/unfolded_car_clean.svg
new file mode 100644
index 000000000..3eb1c2892
--- /dev/null
+++ b/client/src/assets/unfolded_car_clean.svg
@@ -0,0 +1,144 @@
+
diff --git a/client/src/components/job-damage-visual/job-damage-visual.component.jsx b/client/src/components/job-damage-visual/job-damage-visual.component.jsx
new file mode 100644
index 000000000..3af1910ab
--- /dev/null
+++ b/client/src/components/job-damage-visual/job-damage-visual.component.jsx
@@ -0,0 +1,735 @@
+import React from "react";
+export default ({ dmg1, dmg2 }) => (
+
+);
diff --git a/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx
index ac4ed2a59..0535cc9e3 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.damage.component.jsx
@@ -1,7 +1,7 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
-import UnfoldedCar from "../../assets/unfolded_car.svg";
+import Car from "../job-damage-visual/job-damage-visual.component";
export default function JobDetailCardsDamageComponent({ loading, data }) {
const { t } = useTranslation();
@@ -10,11 +10,7 @@ export default function JobDetailCardsDamageComponent({ loading, data }) {
console.log("area_of_damage", area_of_damage);
return (
- {data ? (
-
- 
-
- ) : null}
+
);
}
diff --git a/client/yarn.lock b/client/yarn.lock
index df377fa34..b48b372f0 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -8221,7 +8221,7 @@ node-notifier@^5.4.2:
shellwords "^0.1.1"
which "^1.3.0"
-node-pre-gyp@*, node-pre-gyp@^0.14.0:
+node-pre-gyp@^0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
@@ -10471,7 +10471,7 @@ react-chartjs-2@^2.9.0:
lodash "^4.17.4"
prop-types "^15.5.8"
-"react-click-outside@github:tj/react-click-outside":
+react-click-outside@tj/react-click-outside:
version "1.1.1"
resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"
@@ -11276,8 +11276,6 @@ rxjs@^6.5.3:
version "6.5.4"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
integrity sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==
- dependencies:
- tslib "^1.9.0"
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
@@ -11606,9 +11604,9 @@ slice-ansi@^2.1.0:
astral-regex "^1.0.0"
is-fullwidth-code-point "^2.0.0"
-"smooth-dnd@git+https://github.com/rcdexta/smooth-dnd.git":
+"smooth-dnd@https://github.com/rcdexta/smooth-dnd":
version "0.6.3"
- resolved "git+https://github.com/rcdexta/smooth-dnd.git#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
+ resolved "https://github.com/rcdexta/smooth-dnd#f13924c67bf6ffe4613d97bb1ee83f11d364eb1e"
snapdragon-node@^2.0.1:
version "2.1.1"