BOD-16 BOD-17 Added Contract detail pages + custom form components for courtesy cars.

client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx

@@ -0,0 +1,46 @@
+import { Slider } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const CourtesyCarFuelComponent = ({ value = 100, onChange }) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  const marks = {
+    0: {
+      style: {
+        color: "#f50"
+      },
+      label: t("courtesycars.labels.fuel.empty")
+    },
+    13: t("courtesycars.labels.fuel.18"),
+    25: t("courtesycars.labels.fuel.14"),
+    38: t("courtesycars.labels.fuel.38"),
+    50: t("courtesycars.labels.fuel.12"),
+    63: t("courtesycars.labels.fuel.58"),
+    75: t("courtesycars.labels.fuel.34"),
+    88: t("courtesycars.labels.fuel.78"),
+    100: {
+      style: {
+        color: "#008000"
+      },
+      label: <strong>{t("courtesycars.labels.fuel.full")}</strong>
+    }
+  };
+
+  return (
+    <Slider
+      marks={marks}
+      defaultValue={value}
+      onChange={setOption}
+      step={null}
+    />
+  );
+};
+export default CourtesyCarFuelComponent;