teams list now renders

src/products/AgIcons/AddField.tsx

@@ -0,0 +1,24 @@
+import AddFieldWhite from "assets/products/Ag/addFieldWhite.png";
+import AddFieldBlack from "assets/products/Ag/addFieldBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function AddFieldIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? AddFieldWhite : AddFieldBlack;
+    }
+
+    return themeType === "light" ? AddFieldBlack : AddFieldWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/AddMarker.tsx

@@ -0,0 +1,24 @@
+import AddMarkerWhite from "assets/products/Ag/addMarkerWhite.png";
+import AddMarkerBlack from "assets/products/Ag/addMarkerBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function AddMarkerIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? AddMarkerWhite : AddMarkerBlack;
+    }
+
+    return themeType === "light" ? AddMarkerBlack : AddMarkerWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/AerationFanIcon.tsx

@@ -0,0 +1,29 @@
+import AerationFanDarkIcon from "assets/components/aerationFanDark.png";
+import AerationFanLightIcon from "assets/components/aerationFanLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function AerationFanIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? AerationFanLightIcon : AerationFanDarkIcon;
+    }
+
+    return themeType === "light" ? AerationFanDarkIcon : AerationFanLightIcon;
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="fan" src={src()} />;
+  }
+
+  return <ImgIcon alt="fan" src={src()} />;
+}

src/products/AgIcons/Delete.tsx

@@ -0,0 +1,24 @@
+import DeleteWhite from "assets/products/Ag/deleteWhite.png";
+import DeleteBlack from "assets/products/Ag/deleteBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function DeleteIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? DeleteWhite : DeleteBlack;
+    }
+
+    return themeType === "light" ? DeleteBlack : DeleteWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/DiseaseIcon.tsx

@@ -0,0 +1,25 @@
+import DiseaseLight from "assets/products/Ag/diseaseLight.png";
+import DiseaseDark from "assets/products/Ag/diseaseDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function DiseaseIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? DiseaseLight : DiseaseDark;
+    }
+
+    return themeType === "light" ? DiseaseDark : DiseaseLight;
+  };
+
+  return <img width={width} height={height} alt="diseaseIcon" src={src()} />;
+}

src/products/AgIcons/Edit.tsx

@@ -0,0 +1,24 @@
+import EditWhite from "assets/products/Ag/editWhite.png";
+import EditBlack from "assets/products/Ag/editBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function EditIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? EditWhite : EditBlack;
+    }
+
+    return themeType === "light" ? EditBlack : EditWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldList.tsx

@@ -0,0 +1,24 @@
+import FieldListWhite from "assets/products/Ag/fieldListWhite.png";
+import FieldListBlack from "assets/products/Ag/fieldListBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function FieldListIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldListWhite : FieldListBlack;
+    }
+
+    return themeType === "light" ? FieldListBlack : FieldListWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldMap.tsx

@@ -0,0 +1,24 @@
+import FieldMapWhite from "assets/products/Ag/fieldMapWhite.png";
+import FieldMapBlack from "assets/products/Ag/fieldMapBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function FieldMapIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldMapWhite : FieldMapBlack;
+    }
+
+    return themeType === "light" ? FieldMapBlack : FieldMapWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldNames.tsx

@@ -0,0 +1,24 @@
+import FieldNamesWhite from "assets/products/Ag/fieldNamesWhite.png";
+import FieldNamesBlack from "assets/products/Ag/fieldNamesBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function FieldNamesIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldNamesWhite : FieldNamesBlack;
+    }
+
+    return themeType === "light" ? FieldNamesBlack : FieldNamesWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldsIcon.tsx

@@ -0,0 +1,29 @@
+import FieldsIconLight from "assets/products/Ag/FieldsIconLight.png";
+import FieldsIconDark from "assets/products/Ag/FieldsIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function FieldsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldsIconLight : FieldsIconDark;
+    }
+
+    return themeType === "light" ? FieldsIconDark : FieldsIconLight;
+  };
+
+  return size ? (
+    <img alt="fields" height={size} width={size} src={src()} />
+  ) : (
+    <ImgIcon alt="fields" src={src()} />
+  );
+}

src/products/AgIcons/GearMarker.tsx

@@ -0,0 +1,24 @@
+import GearMarkerLight from "assets/products/Ag/gearMarkerLight.png";
+import GearMarkerDark from "assets/products/Ag/gearMarkerDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function GearMarkerIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? GearMarkerLight : GearMarkerDark;
+    }
+
+    return themeType === "light" ? GearMarkerDark : GearMarkerLight;
+  };
+
+  return <ImgIcon alt="markerSettings" src={src()} />;
+}

src/products/AgIcons/HomeIcon.tsx

@@ -0,0 +1,24 @@
+import HomeIconLight from "assets/products/Ag/HomeIconLight.png";
+import HomeIconDark from "assets/products/Ag/HomeIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function HomeIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? HomeIconLight : HomeIconDark;
+    }
+
+    return themeType === "light" ? HomeIconDark : HomeIconLight;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/MarkerMove.tsx

@@ -0,0 +1,24 @@
+import MarkerMoveLight from "assets/products/Ag/markerMoveLight.png";
+import MarkerMoveDark from "assets/products/Ag/markerMoveDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function MarkerMoveIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? MarkerMoveLight : MarkerMoveDark;
+    }
+
+    return themeType === "light" ? MarkerMoveDark : MarkerMoveLight;
+  };
+
+  return <ImgIcon alt="markerMoveToggle" src={src()} />;
+}

src/products/AgIcons/PestsIcon.tsx

@@ -0,0 +1,25 @@
+import PestsLight from "assets/products/Ag/pestsLight.png";
+import PestsDark from "assets/products/Ag/pestsDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function PestsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? PestsLight : PestsDark;
+    }
+
+    return themeType === "light" ? PestsDark : PestsLight;
+  };
+
+  return <img width={width} height={height} alt="pestsIcon" src={src()} />;
+}

src/products/AgIcons/PressureIcon.tsx

@@ -0,0 +1,37 @@
+import PressureDarkIcon from "assets/components/pressureDark.png";
+import PressureLightIcon from "assets/components/pressureLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  heightWidth?: number;
+}
+
+export default function TemperatureIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, heightWidth } = props;
+
+  const lightIcon = () => {
+    return PressureLightIcon;
+  };
+
+  const darkIcon = () => {
+    return PressureDarkIcon;
+  };
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? lightIcon() : darkIcon();
+    }
+
+    return themeType === "light" ? darkIcon() : lightIcon();
+  };
+
+  if (heightWidth) {
+    return <img alt="pressure" src={src()} height={heightWidth} width={heightWidth} />;
+  }
+
+  return <ImgIcon alt="pressure" src={src()} />;
+}

src/products/AgIcons/RocksIcon.tsx

@@ -0,0 +1,25 @@
+import RocksLight from "assets/products/Ag/rocksLight.png";
+import RocksDark from "assets/products/Ag/rocksDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function RocksIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? RocksLight : RocksDark;
+    }
+
+    return themeType === "light" ? RocksDark : RocksLight;
+  };
+
+  return <img width={width} height={height} alt="rocksIcon" src={src()} />;
+}

src/products/AgIcons/ScoutIcon.tsx

@@ -0,0 +1,24 @@
+import ScoutLight from "assets/products/Ag/scoutLight.png";
+import ScoutDark from "assets/products/Ag/scoutDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function ScoutIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? ScoutLight : ScoutDark;
+    }
+
+    return themeType === "light" ? ScoutDark : ScoutLight;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/WeedsIcon.tsx

@@ -0,0 +1,25 @@
+import WeedsLight from "assets/products/Ag/weedsLight.png";
+import WeedsDark from "assets/products/Ag/weedsDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function WeedsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? WeedsLight : WeedsDark;
+    }
+
+    return themeType === "light" ? WeedsDark : WeedsLight;
+  };
+
+  return <img width={width} height={height} alt="weedsIcon" src={src()} />;
+}

src/products/AviationIcons/AddPlaneIcon.tsx

@@ -0,0 +1,25 @@
+import White from "assets/products/Aviation/AddPlaneIconWhite.png";
+import Black from "assets/products/Aviation/AddPlaneIconBlack.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width?: number;
+  height?: number;
+  type?: "light" | "dark";
+}
+
+export default function AddPlaneIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, width, height } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? White : Black;
+    }
+
+    return themeType === "light" ? Black : White;
+  };
+
+  return <img alt="addPlane" src={src()} width={width ?? 25} height={height ?? 25} />;
+}

src/products/AviationIcons/AirportMapIcon.tsx

@@ -0,0 +1,25 @@
+import White from "assets/products/Aviation/AirportMapWhite.png";
+import Black from "assets/products/Aviation/AirportMapBlack.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width?: number;
+  height?: number;
+  type?: "light" | "dark";
+}
+
+export default function AirportMapIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, width, height } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? White : Black;
+    }
+
+    return themeType === "light" ? Black : White;
+  };
+
+  return <img alt="airportMap" src={src()} width={width ?? 25} height={height ?? 25} />;
+}

src/products/AviationIcons/OmniAirDeviceIcon.tsx

@@ -0,0 +1,24 @@
+import White from "assets/products/Aviation/OmniAirDeviceIconWhite.png";
+import Black from "assets/products/Aviation/OmniAirDeviceIconBlack.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  size?: number;
+  type?: "light" | "dark";
+}
+
+export default function OmniAirDeviceIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? White : Black;
+    }
+
+    return themeType === "light" ? Black : White;
+  };
+
+  return <img alt="OmniAirDevice" src={src()} width={size ?? 25} height={size ?? 25} />;
+}

src/products/AviationIcons/PlaneIcon.tsx

@@ -0,0 +1,25 @@
+import White from "assets/products/Aviation/PlaneWhite.png";
+import Black from "assets/products/Aviation/PlaneBlack.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width?: number;
+  height?: number;
+  type?: "light" | "dark";
+}
+
+export default function PlaneIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, width, height } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? White : Black;
+    }
+
+    return themeType === "light" ? Black : White;
+  };
+
+  return <img alt="plane" src={src()} width={width ?? 25} height={height ?? 25} />;
+}

src/products/Bindapt/AddBinIcon.tsx

@@ -0,0 +1,24 @@
+import AddBinDark from "assets/products/bindapt/addBin.png";
+import AddBinLight from "assets/products/bindapt/addBinLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function AddBinIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? AddBinLight : AddBinDark;
+    }
+
+    return themeType === "light" ? AddBinDark : AddBinLight;
+  };
+
+  return <ImgIcon alt="newBin" src={src()} />;
+}

src/products/Bindapt/BindaptAvailability.ts

@@ -0,0 +1,292 @@
+import { ConfigurablePin } from "pbHelpers/AddressTypes";
+import { DeviceAvailabilityMap, DevicePositions } from "pbHelpers/DeviceAvailability";
+import { quack } from "protobuf-ts/pond";
+
+const BindaptPlusPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 512, label: "C1" }
+];
+
+export const BindaptPlusAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptPlusPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BindaptPlusModPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 16, label: "3" },
+  { address: 512, label: "C1" }
+];
+
+export const BindaptPlusModAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptPlusModPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      //[quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BindaptPlusProPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 16, label: "3" },
+  { address: 512, label: "C1" },
+  { address: 1024, label: "C2" }
+];
+
+export const BindaptPlusProAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptPlusProPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BindaptPlusProModPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 16, label: "3" },
+  { address: 32, label: "4" },
+  { address: 512, label: "C1" },
+  { address: 1024, label: "C2" }
+];
+
+export const BindaptPlusProModAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptPlusProModPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      //[quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BindaptPlusLitePins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" }
+];
+
+export const BindaptPlusLiteAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptPlusLitePins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BindaptMiniPins: ConfigurablePin[] = [
+  { address: 256, label: "1" },
+  { address: 512, label: "2" }
+];
+
+export const BindaptMiniAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptMiniPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([[quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]]])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BindaptUltimatePins: ConfigurablePin[] = [
+  { address: 1, label: "P1" },
+  { address: 4, label: "P2" },
+  { address: 8, label: "P3" },
+  { address: 8192, label: "P4" },
+  { address: 16, label: "P5" },
+  //{ address: 32, label: "P6"}, //for possible expansion if we want a sixth input port on the box
+  { address: 128, label: "C1" },
+  { address: 256, label: "C2" },
+  { address: 512, label: "C3" },
+  { address: 1024, label: "C4" }
+  //{ address: 2048, label: "C5"} //for possible expansion if we want a fifth control port on the box
+];
+
+export const BindaptUltimateAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptUltimatePins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BinMonitorPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" }
+];
+
+export const BinMonitorAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BinMonitorPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+/** V2 product availability maps */
+
+//TODO: change these pins to match the V2 pin map
+const BindaptV2MonitorPins: ConfigurablePin[] = [
+  { address: 1, label: "1" },
+  { address: 2, label: "2" }
+];
+
+export const BindaptV2MonitorAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptV2MonitorPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      //[quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+const BindaptV2AutomatePins: ConfigurablePin[] = [
+  { address: 1, label: "1" },
+  { address: 2, label: "2" },
+  { address: 4, label: "3" },
+  { address: 8, label: "4" },
+  { address: 256, label: "C1" },
+  { address: 512, label: "C2" },
+  { address: 1024, label: "C3" }
+];
+
+export const BindaptV2AutomateAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, BindaptV2AutomatePins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      //[quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_CO2, [0x61]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);

src/products/Bindapt/BindaptDescriber.ts

@@ -0,0 +1,210 @@
+import BindaptCellularDarkIcon from "assets/products/bindapt/bindaptCellularDark.png";
+import BindaptCellularLightIcon from "assets/products/bindapt/bindaptCellularLight.png";
+import BindaptPlusDarkIcon from "assets/products/bindapt/bindaptPlusDark.png";
+import BindaptPlusLightIcon from "assets/products/bindapt/bindaptPlusLight.png";
+import BindaptPlusProDarkIcon from "assets/products/bindapt/bindaptPlusProDark.png";
+import BindaptPlusProLightIcon from "assets/products/bindapt/bindaptPlusProLight.png";
+import BindaptWifiDarkIcon from "assets/products/bindapt/bindaptWifiDark.png";
+import BindaptWifiLightIcon from "assets/products/bindapt/bindaptWifiLight.png";
+import { DeviceProductDescriber, ProductTab } from "products/DeviceProduct";
+import { pond } from "protobuf-ts/pond";
+import {
+  BindaptPlusAvailability,
+  BindaptPlusProAvailability,
+  BindaptPlusLiteAvailability,
+  BindaptMiniAvailability,
+  BindaptUltimateAvailability,
+  BinMonitorAvailability,
+  BindaptPlusModAvailability,
+  BindaptPlusProModAvailability,
+  BindaptV2MonitorAvailability,
+  BindaptV2AutomateAvailability
+} from "./BindaptAvailability";
+
+const getBindaptPlatformIcon = (
+  platform: pond.DevicePlatform,
+  theme?: "light" | "dark"
+): string | undefined => {
+  switch (platform) {
+    case pond.DevicePlatform.DEVICE_PLATFORM_PHOTON:
+      return theme === "light" ? BindaptWifiDarkIcon : BindaptWifiLightIcon;
+    case pond.DevicePlatform.DEVICE_PLATFORM_ELECTRON:
+      return theme === "light" ? BindaptCellularDarkIcon : BindaptCellularLightIcon;
+    default:
+      return undefined;
+  }
+};
+
+const getBindaptTabs = (): ProductTab[] => {
+  return ["presets", "components"];
+};
+
+export const BindaptPlus: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS,
+  label: "Bindapt+",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusDarkIcon : BindaptPlusLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptPlusAvailability,
+  defaultAddressMap: new Map<string, string[]>([
+    ["plenum", ["9-2-64"]],
+    ["pressure", ["6-2-24"]],
+    ["heatersFans", ["3-1-512"]] //refers to heaters and fans
+  ])
+};
+
+export const BindaptPlusMod: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_MOD,
+  label: "Bindapt+ V1.5",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusDarkIcon : BindaptPlusLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptPlusModAvailability
+  //TODO not sure what the default address map for the modded products should be yet
+  // defaultAddressMap: new Map<string, string[]>([
+  //   ["plenum", ["9-2-64"]],
+  //   ["heatersFans", ["3-1-512"]] //refers to heaters and fans
+  // ])
+};
+
+export const BindaptPlusPro: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO,
+  label: "Bindapt+ Pro",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusProDarkIcon : BindaptPlusProLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptPlusProAvailability,
+  defaultAddressMap: new Map<string, string[]>([
+    ["plenum", ["9-2-64"]],
+    ["pressure", ["6-2-24"]],
+    ["heatersFans", ["3-1-512", "3-1-1024"]] //refers to heaters and fans
+  ])
+};
+
+export const BindaptPlusProMod: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO_MOD,
+  label: "Bindapt+ Pro V1.5",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusProDarkIcon : BindaptPlusProLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptPlusProModAvailability
+  //TODO not sure what the default address map should be yet
+  // defaultAddressMap: new Map<string, string[]>([
+  //   ["plenum", ["9-2-64"]],
+  //   ["heatersFans", ["3-1-512", "3-1-1024"]] //refers to heaters and fans
+  // ])
+};
+
+export const BindaptPlusLite: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_LITE,
+  label: "Bindapt+ Lite",
+  icon: getBindaptPlatformIcon,
+  tabs: getBindaptTabs(),
+  availability: BindaptPlusLiteAvailability
+};
+
+export const BindaptMini: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_MINI,
+  label: "Bindapt Mini",
+  icon: getBindaptPlatformIcon,
+  tabs: getBindaptTabs(),
+  availability: BindaptMiniAvailability
+};
+
+export const BinUltimate: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BIN_ULTIMATE,
+  label: "Bindapt Ultimate",
+  icon: getBindaptPlatformIcon,
+  tabs: getBindaptTabs(),
+  view: "controller",
+  availability: BindaptUltimateAvailability,
+  defaultAddressMap: new Map<string, string[]>([
+    ["headspace", ["9-2-64", "28-2-98"]], //is both the dht and lidar components in the halo
+    ["pressure", ["6-2-24"]],
+    ["heatersFans", ["3-1-512", "3-1-1024", "3-1-128", "3-1-256"]] //refers to heaters and fans
+  ])
+};
+
+export const BinMonitor: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BIN_MONITOR,
+  label: "Bin Monitor",
+  icon: getBindaptPlatformIcon,
+  tabs: getBindaptTabs(),
+  availability: BinMonitorAvailability,
+  defaultAddressMap: new Map<string, string[]>([
+    ["headspace", ["9-2-64", "28-2-98"]], //is both the dht and lidar components in the halo
+    ["pressure", ["6-2-24"]]
+  ])
+};
+
+export const BinHalo: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BIN_HALO,
+  label: "Bin Halo",
+  icon: getBindaptPlatformIcon,
+  tabs: getBindaptTabs(),
+  view: "controller",
+  availability: BindaptPlusAvailability,
+  defaultAddressMap: new Map<string, string[]>([
+    ["headspace", ["9-2-64", "28-2-98"]], //is both the dht and lidar components in the halo
+    ["pressure", ["6-2-24"]],
+    ["heatersFans", ["3-1-512"]] //refers to heaters and fans
+  ])
+};
+
+export const BindaptV2Monitor: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_MONITOR,
+  label: "Bindapt+ V2 Monitor",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusDarkIcon : BindaptPlusLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptV2MonitorAvailability
+  //TODO not sure what the default address map for these should be yet
+  // defaultAddressMap: new Map<string, string[]>([
+  //   ["plenum", ["9-2-64"]],
+  //   ["heatersFans", ["3-1-512"]] //refers to heaters and fans
+  // ])
+};
+
+export const BindaptV2Automate: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_AUTOMATE,
+  label: "Bindapt+ V2 Automate",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? BindaptPlusDarkIcon : BindaptPlusLightIcon;
+  },
+  view: "controller",
+  tabs: getBindaptTabs(),
+  availability: BindaptV2AutomateAvailability
+  //TODO not sure what the default address map for these should be yet
+  // defaultAddressMap: new Map<string, string[]>([
+  //   ["plenum", ["9-2-64"]],
+  //   ["heatersFans", ["3-1-512"]] //refers to heaters and fans
+  // ])
+};
+
+export function IsBindaptDevice(product?: pond.DeviceProduct): boolean {
+  const bindaptProducts: pond.DeviceProduct[] = [
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_MINI,
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS,
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO,
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_LITE,
+    pond.DeviceProduct.DEVICE_PRODUCT_BIN_ULTIMATE,
+    pond.DeviceProduct.DEVICE_PRODUCT_BIN_MONITOR,
+    pond.DeviceProduct.DEVICE_PRODUCT_BIN_HALO,
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_MOD,
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO_MOD,
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_MONITOR,
+    pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_AUTOMATE
+  ];
+
+  return product ? bindaptProducts.includes(product) : false;
+}

src/products/Bindapt/BinsIcon.tsx

@@ -0,0 +1,39 @@
+import BinDarkIcon from "../../assets/products/bindapt/binDark.png";
+import BinLightIcon from "../../assets/products/bindapt/binLight.png";
+import BinsDarkIcon from "assets/products/bindapt/binsDark.png";
+import BinsLightIcon from "assets/products/bindapt/binsLight.png";
+import { ImgIcon } from "../../common/ImgIcon";
+import { useThemeType } from "../../hooks/useThemeType";
+
+interface Props {
+  singleBin?: boolean;
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function BinsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, singleBin, size } = props;
+
+  const lightIcon = () => {
+    return singleBin ? BinLightIcon : BinsLightIcon;
+  };
+
+  const darkIcon = () => {
+    return singleBin ? BinDarkIcon : BinsDarkIcon;
+  };
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? lightIcon() : darkIcon();
+    }
+
+    return themeType === "light" ? darkIcon() : lightIcon();
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="bins" src={src()} />;
+  }
+
+  return <ImgIcon alt="bins" src={src()} />;
+}

src/products/Bindapt/CableIcon.tsx

@@ -0,0 +1,24 @@
+import GrainCableDarkIcon from "assets/components/grainCableDark.png";
+import GrainCableLightIcon from "assets/components/grainCableLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function CableIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? GrainCableLightIcon : GrainCableDarkIcon;
+    }
+
+    return themeType === "light" ? GrainCableDarkIcon : GrainCableLightIcon;
+  };
+
+  return <ImgIcon alt="bins" src={src()} />;
+}

src/products/Bindapt/DataDuckIcon.tsx

@@ -0,0 +1,24 @@
+import DataDuckDark from "assets/common/dataDuckDark.png";
+import DataDuckLight from "assets/common/dataDuckLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function DataDuckIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? DataDuckLight : DataDuckDark;
+    }
+
+    return themeType === "light" ? DataDuckDark : DataDuckLight;
+  };
+
+  return <ImgIcon alt="dataDuck" src={src()} />;
+}

src/products/Bindapt/constructionIcon.tsx

@@ -0,0 +1,11 @@
+import ConstructionIconGold from "assets/products/bindapt/constructionIcon.png";
+import { ImgIcon } from "common/ImgIcon";
+import React from "react";
+
+export default function ConstIcon() {
+  const src = () => {
+    return ConstructionIconGold;
+  };
+
+  return <ImgIcon alt="construction" src={src()} />;
+}

src/products/Bindapt/index.ts

@@ -0,0 +1,4 @@
+export * from "./BindaptAvailability";
+export * from "./BindaptDescriber";
+export * from "./BindaptIcon";
+export * from "./BinsIcon";

src/products/CommonIcons/cnhiIcon.tsx

@@ -0,0 +1,24 @@
+import CNHiLogoWhite from "assets/marketplaceImages/CNHiWhite.png";
+import CNHiLogoBlack from "assets/marketplaceImages/CNHiBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function CNHiIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? CNHiLogoWhite : CNHiLogoBlack;
+    }
+
+    return themeType === "light" ? CNHiLogoBlack : CNHiLogoWhite;
+  };
+
+  return <ImgIcon alt="case-new-holland" src={src()} />;
+}

src/products/CommonIcons/contractIcon.tsx

@@ -0,0 +1,29 @@
+import ContractIconLight from "assets/common/contractWhite.png";
+import ContractIconDark from "assets/common/contractBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function ContractsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? ContractIconLight : ContractIconDark;
+    }
+
+    return themeType === "light" ? ContractIconDark : ContractIconLight;
+  };
+
+  return size ? (
+    <img alt="fields" height={size} width={size} src={src()} />
+  ) : (
+    <ImgIcon alt="fields" src={src()} />
+  );
+}

src/products/CommonIcons/fuelIcon.tsx

@@ -0,0 +1,24 @@
+import FuelDark from "assets/components/fuelDark.png";
+import FuelLight from "assets/components/fuelLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function FuelIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FuelLight : FuelDark;
+    }
+
+    return themeType === "light" ? FuelDark : FuelLight;
+  };
+
+  return <ImgIcon alt="marketplace" src={src()} />;
+}

src/products/CommonIcons/graphIcon.tsx

@@ -0,0 +1,24 @@
+import graphDark from "assets/common/graphDark.png";
+import graphLight from "assets/common/graphLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function GraphIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? graphLight : graphDark;
+    }
+
+    return themeType === "light" ? graphDark : graphLight;
+  };
+
+  return <ImgIcon alt="graph" src={src()} />;
+}

src/products/CommonIcons/johnDeereIcon.tsx

@@ -0,0 +1,24 @@
+import JohnDeereLogoWhite from "assets/marketplaceImages/JDWhite.png";
+import JohnDeereLogoBlack from "assets/marketplaceImages/JDBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function JohnDeereIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? JohnDeereLogoWhite : JohnDeereLogoBlack;
+    }
+
+    return themeType === "light" ? JohnDeereLogoBlack : JohnDeereLogoWhite;
+  };
+
+  return <ImgIcon alt="john-deere" src={src()} />;
+}

src/products/CommonIcons/marketplaceIcon.tsx

@@ -0,0 +1,24 @@
+import MarketWhite from "assets/marketplaceImages/marketplaceIconLight.png";
+import MarketBlack from "assets/marketplaceImages/marketplaceIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function MarketplaceIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? MarketWhite : MarketBlack;
+    }
+
+    return themeType === "light" ? MarketBlack : MarketWhite;
+  };
+
+  return <ImgIcon alt="marketplace" src={src()} />;
+}

src/products/Construction/ACHomeIcon.tsx

@@ -0,0 +1,24 @@
+import ACHomeLightIcon from "assets/products/Construction/acHomeIconLight.png";
+import ACHomeDarkIcon from "assets/products/Construction/acHomeIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function ACHomeIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? ACHomeLightIcon : ACHomeDarkIcon;
+    }
+
+    return themeType === "light" ? ACHomeDarkIcon : ACHomeLightIcon;
+  };
+
+  return <ImgIcon alt="home" src={src()} />;
+}

src/products/Construction/DeviceGroupIcon.tsx

@@ -0,0 +1,29 @@
+import DeviceGroupLightIcon from "assets/products/Construction/deviceGroupIconLight.png";
+import DeviceGroupDarkIcon from "assets/products/Construction/deviceGroupIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  size?: number;
+  type?: "light" | "dark";
+}
+
+export default function DeviceGroupIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? DeviceGroupLightIcon : DeviceGroupDarkIcon;
+    }
+
+    return themeType === "light" ? DeviceGroupDarkIcon : DeviceGroupLightIcon;
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="bins" src={src()} />;
+  }
+
+  return <ImgIcon alt="group" src={src()} />;
+}

src/products/Construction/JobSiteIcon.tsx

@@ -0,0 +1,28 @@
+import JobSiteLightIcon from "assets/products/Construction/jobSiteIconLight.png";
+import JobSiteDarkIcon from "assets/products/Construction/jobSiteIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function JobsiteIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? JobSiteLightIcon : JobSiteDarkIcon;
+    }
+
+    return themeType === "light" ? JobSiteDarkIcon : JobSiteLightIcon;
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="jobsite" src={src()}></img>;
+  }
+  return <ImgIcon alt="jobsite" src={src()} />;
+}

src/products/Construction/NexusSTIcon.tsx

@@ -0,0 +1,29 @@
+import NexusLightIcon from "assets/products/Construction/nexusIconLight.png";
+import NexusDarkIcon from "assets/products/Construction/nexusIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  size?: number;
+  type?: "light" | "dark";
+}
+
+export default function NexusSTIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? NexusLightIcon : NexusDarkIcon;
+    }
+
+    return themeType === "light" ? NexusDarkIcon : NexusLightIcon;
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="bins" src={src()} />;
+  }
+
+  return <ImgIcon alt="nexus" src={src()} />;
+}

src/products/Construction/ObjectHeaterIcon.tsx

@@ -0,0 +1,24 @@
+import HeaterDarkIcon from "assets/components/heaterDark.png";
+import HeaterLightIcon from "assets/components/heaterLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function ObjectHeaterIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? HeaterLightIcon : HeaterDarkIcon;
+    }
+
+    return themeType === "light" ? HeaterDarkIcon : HeaterLightIcon;
+  };
+
+  return <ImgIcon alt="group" src={src()} />;
+}

src/products/Construction/SitesIcon.tsx

@@ -0,0 +1,29 @@
+import SitesDarkIcon from "assets/products/Construction/sitesIconDark.png";
+import SitesLightIcon from "assets/products/Construction/sitesIconLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  size?: number;
+  type?: "light" | "dark";
+}
+
+export default function SitesIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? SitesLightIcon : SitesDarkIcon;
+    }
+
+    return themeType === "light" ? SitesDarkIcon : SitesLightIcon;
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="bins" src={src()} />;
+  }
+
+  return <ImgIcon alt="sites" src={src()} />;
+}

src/products/Construction/TasksIcon.tsx

@@ -0,0 +1,29 @@
+import TasksDarkIcon from "assets/products/Construction/tasksIconDark.png";
+import TasksLightIcon from "assets/products/Construction/tasksIconLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function TasksIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? TasksLightIcon : TasksDarkIcon;
+    }
+
+    return themeType === "light" ? TasksDarkIcon : TasksLightIcon;
+  };
+
+  return size ? (
+    <img alt="tasks" height={size} width={size} src={src()} />
+  ) : (
+    <ImgIcon alt="tasks" src={src()} />
+  );
+}

src/products/DeviceProduct.ts

@@ -0,0 +1,140 @@
+import { DeviceAvailabilityMap, DevicePositions } from "pbHelpers/DeviceAvailability";
+import { pond, quack } from "protobuf-ts/pond";
+import {
+  BindaptMini,
+  BindaptPlus,
+  BindaptPlusLite,
+  BindaptPlusMod,
+  BindaptPlusPro,
+  BindaptPlusProMod,
+  BindaptV2Monitor,
+  BindaptV2Automate,
+  BinHalo,
+  BinMonitor,
+  BinUltimate
+} from "./Bindapt/BindaptDescriber";
+import { NexusST } from "./Nexus/NexusDescriber";
+import { MiPCAV2, OmniAir } from "./OmniAir/OmniAirDescriber";
+import { ConfigurablePin } from "pbHelpers/AddressTypes";
+
+export type ProductTab = "components" | "presets";
+
+export interface DeviceProductDescriber {
+  product: pond.DeviceProduct;
+  label: string;
+  icon: (platform: pond.DevicePlatform, theme?: "light" | "dark") => string | undefined;
+  tabs: ProductTab[];
+  view?: "default" | "controller";
+  availability?: DeviceAvailabilityMap;
+  componentExtension?: Boolean;
+  defaultAddressMap?: Map<string, string[]>;
+}
+
+const None: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_NONE,
+  label: "None",
+  icon: () => undefined,
+  tabs: ["components"]
+};
+
+//think about making weather describer
+const weatherStationPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 16, label: "3" },
+  { address: 32, label: "4" }
+];
+
+const Weather: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_WEATHER_STATION,
+  label: "Weather Station",
+  icon: () => undefined,
+  tabs: ["components"],
+  availability: new Map<quack.AddressType, DevicePositions>([
+    [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+    [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, weatherStationPins],
+    [
+      quack.AddressType.ADDRESS_TYPE_I2C,
+      new Map<quack.ComponentType, number[]>([
+        [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+        [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+        [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+        [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]]
+      ])
+    ],
+    [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+    [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+    [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+  ])
+};
+
+const DEVICE_PRODUCT_MAP = new Map<pond.DeviceProduct, DeviceProductDescriber>([
+  [pond.DeviceProduct.DEVICE_PRODUCT_NONE, None],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS, BindaptPlus],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO, BindaptPlusPro],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_LITE, BindaptPlusLite],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_MINI, BindaptMini],
+  [pond.DeviceProduct.DEVICE_PRODUCT_WEATHER_STATION, Weather],
+  [pond.DeviceProduct.DEVICE_PRODUCT_NEXUS_ST, NexusST],
+  [pond.DeviceProduct.DEVICE_PRODUCT_OMNIAIR, OmniAir],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BIN_HALO, BinHalo],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BIN_ULTIMATE, BinUltimate],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BIN_MONITOR, BinMonitor],
+  [pond.DeviceProduct.DEVICE_PRODUCT_MIPCA_V2, MiPCAV2],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_MOD, BindaptPlusMod],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_PLUS_PRO_MOD, BindaptPlusProMod],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_MONITOR, BindaptV2Monitor],
+  [pond.DeviceProduct.DEVICE_PRODUCT_BINDAPT_V2_AUTOMATE, BindaptV2Automate]
+]);
+
+export function ListDeviceProductDescribers(): DeviceProductDescriber[] {
+  return [...DEVICE_PRODUCT_MAP.values()];
+}
+
+function getDescriber(product: pond.DeviceProduct): DeviceProductDescriber {
+  let describer = DEVICE_PRODUCT_MAP.get(product);
+  return describer ? describer : None;
+}
+
+export function GetDeviceProductLabel(product: pond.DeviceProduct): string {
+  return getDescriber(product).label;
+}
+
+export function GetDeviceProductIcon(
+  product: pond.DeviceProduct,
+  platform: pond.DevicePlatform,
+  theme?: "dark" | "light"
+): string | undefined {
+  return getDescriber(product).icon(platform, theme);
+}
+
+export function IsCardController(product?: pond.DeviceProduct): boolean {
+  return product ? getDescriber(product).view === "controller" : false;
+}
+
+export function GetDeviceProductViews(product?: pond.DeviceProduct): boolean {
+  return product ? getDescriber(product).view === "controller" : false;
+}
+
+export function GetDeviceProductTabs(product?: pond.DeviceProduct): ProductTab[] {
+  return product ? getDescriber(product).tabs : ["components"];
+}
+
+export function GetProductAvailability(
+  product?: pond.DeviceProduct
+): DeviceAvailabilityMap | undefined {
+  return product ? getDescriber(product).availability : undefined;
+}
+
+export function IsExtended(product: pond.DeviceProduct): boolean {
+  let isExtended = getDescriber(product).componentExtension;
+  if (isExtended) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function GetProductDefaults(product: pond.DeviceProduct): Map<string, string[]> | undefined {
+  return getDescriber(product).defaultAddressMap;
+}

src/products/Nexus/NexusAvailability.ts

@@ -0,0 +1,31 @@
+import { ConfigurablePin } from "pbHelpers/AddressTypes";
+import { DeviceAvailabilityMap, DevicePositions } from "pbHelpers/DeviceAvailability";
+import { quack } from "protobuf-ts/pond";
+
+const NexusSTPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 16, label: "3" },
+  { address: 512, label: "C1" }
+];
+
+export const NexusSTAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, NexusSTPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_VAPOUR_PRESSURE_DEFICIT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_LIDAR, [0x62]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);

src/products/Nexus/NexusDescriber.ts

@@ -0,0 +1,17 @@
+import { DeviceProductDescriber } from "products/DeviceProduct";
+import { pond } from "protobuf-ts/pond";
+import { NexusSTAvailability } from "./NexusAvailability";
+import NexusLightIcon from "assets/products/Construction/nexusIconLight.png";
+import NexusDarkIcon from "assets/products/Construction/nexusIconDark.png";
+
+export const NexusST: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_NEXUS_ST,
+  label: "Nexus ST",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? NexusDarkIcon : NexusLightIcon;
+  },
+  view: "controller",
+  tabs: ["components"],
+  availability: NexusSTAvailability,
+  componentExtension: true
+};

src/products/OmniAir/OmniAirAvailability.ts

@@ -0,0 +1,59 @@
+import { ConfigurablePin } from "pbHelpers/AddressTypes";
+import { DeviceAvailabilityMap, DevicePositions } from "pbHelpers/DeviceAvailability";
+import { quack } from "protobuf-ts/pond";
+
+const OmniAirPins: ConfigurablePin[] = [
+  { address: 4, label: "1" },
+  { address: 8, label: "2" },
+  { address: 16, label: "3" },
+  { address: 512, label: "C1" },
+  { address: 1024, label: "C2" }
+];
+
+export const OmniAirAvailability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, OmniAirPins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);
+
+/*---V2 Stuff starts here---*/
+
+const MiPCAV2Pins: ConfigurablePin[] = [
+  { address: 1, label: "1" },
+  { address: 2, label: "2" },
+  { address: 4, label: "3" },
+  { address: 256, label: "L1" },
+  { address: 512, label: "L2" }
+];
+
+export const MiPCAV2Availability: DeviceAvailabilityMap = new Map<
+  quack.AddressType,
+  DevicePositions
+>([
+  [quack.AddressType.ADDRESS_TYPE_INVALID, []],
+  [quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY, MiPCAV2Pins],
+  [
+    quack.AddressType.ADDRESS_TYPE_I2C,
+    new Map<quack.ComponentType, number[]>([
+      [quack.ComponentType.COMPONENT_TYPE_PRESSURE, [0x18]],
+      [quack.ComponentType.COMPONENT_TYPE_DHT, [0x40]],
+      [quack.ComponentType.COMPONENT_TYPE_SEN5X, [0x69]]
+    ])
+  ],
+  [quack.AddressType.ADDRESS_TYPE_POWER, [0]],
+  [quack.AddressType.ADDRESS_TYPE_GPS, [0]],
+  [quack.AddressType.ADDRESS_TYPE_MODEM, [0]]
+]);

src/products/OmniAir/OmniAirDescriber.ts

@@ -0,0 +1,31 @@
+import { DeviceProductDescriber } from "products/DeviceProduct";
+import { pond } from "protobuf-ts/pond";
+import { MiPCAV2Availability, OmniAirAvailability } from "./OmniAirAvailability";
+import OmniAirLightIcon from "assets/products/Aviation/OmniAirDeviceIconWhite.png";
+import OmniAirDarkIcon from "assets/products/Aviation/OmniAirDeviceIconBlack.png";
+
+export const OmniAir: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_OMNIAIR,
+  label: "MiPCA V1",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? OmniAirDarkIcon : OmniAirLightIcon;
+  },
+  view: "controller",
+  tabs: ["components"],
+  availability: OmniAirAvailability,
+  componentExtension: true
+};
+
+/*---V2 Stuff starts here---*/
+
+export const MiPCAV2: DeviceProductDescriber = {
+  product: pond.DeviceProduct.DEVICE_PRODUCT_MIPCA_V2,
+  label: "MiPCA V2",
+  icon: (_, theme?: "light" | "dark") => {
+    return theme === "light" ? OmniAirDarkIcon : OmniAirLightIcon;
+  },
+  view: "controller",
+  tabs: ["components"],
+  availability: MiPCAV2Availability,
+  componentExtension: true
+};

src/products/ProductTabChip.tsx

@@ -0,0 +1,86 @@
+import { Avatar, ButtonBase, createStyles, makeStyles, Theme, Tooltip } from "@material-ui/core";
+import { Tune as PresetsIcon, ViewList as ComponentsIcon } from "@material-ui/icons";
+import classnames from "classnames";
+import { capitalize } from "lodash";
+import React from "react";
+import { ProductTab } from "./DeviceProduct";
+
+const useStyles = makeStyles((theme: Theme) => {
+  const themeType = theme.palette.type;
+  const activeBG = theme.palette.secondary.main;
+  return createStyles({
+    avatar: {
+      color: themeType === "light" ? theme.palette.common.black : theme.palette.common.white,
+      backgroundColor: "transparent",
+      width: theme.spacing(5),
+      height: theme.spacing(5),
+      border: "1px solid",
+      borderColor: theme.palette.divider
+    },
+    active: {
+      color: theme.palette.getContrastText(activeBG),
+      backgroundColor: activeBG,
+      border: 0
+    },
+    customIcon: {
+      padding: theme.spacing(0.5)
+    }
+  });
+});
+
+interface Props {
+  tab: ProductTab;
+  onClick: (selected: ProductTab) => void;
+  active?: boolean;
+}
+
+export default function ProductTabChip(props: Props) {
+  const classes = useStyles();
+  const { tab, active, onClick } = props;
+
+  const name = () => {
+    return capitalize(tab);
+  };
+
+  const hasCustomIcon = () => {
+    switch (tab) {
+      default:
+        return false;
+    }
+  };
+
+  const customIconSrc = () => {
+    switch (tab) {
+      default:
+        return undefined;
+    }
+  };
+
+  const icon = () => {
+    switch (tab) {
+      case "presets":
+        return <PresetsIcon fontSize="small" />;
+      case "components":
+        return <ComponentsIcon fontSize="small" />;
+      default:
+        return <React.Fragment />;
+    }
+  };
+
+  return (
+    <Tooltip title={name()}>
+      <Avatar
+        alt={name()}
+        src={hasCustomIcon() ? customIconSrc() : undefined}
+        className={classnames(
+          classes.avatar,
+          active && classes.active,
+          hasCustomIcon() && classes.customIcon
+        )}
+        component={ButtonBase}
+        onClick={() => onClick(tab)}>
+        {!hasCustomIcon() && icon()}
+      </Avatar>
+    </Tooltip>
+  );
+}

src/products/ventilation/MiningIcon.tsx

@@ -0,0 +1,24 @@
+import MineDarkIcon from "assets/components/mineIconDark.png";
+import MineLightIcon from "assets/components/mineIconLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function VentilationIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? MineLightIcon : MineDarkIcon;
+    }
+
+    return themeType === "light" ? MineDarkIcon : MineLightIcon;
+  };
+
+  return <ImgIcon alt="mine" src={src()} />;
+}

src/products/ventilation/VentilationIcon.tsx

@@ -0,0 +1,24 @@
+import VentilationDarkIcon from "assets/products/ventilation/ventIconDark.png";
+import VentilationLightIcon from "assets/products/ventilation/ventIconLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function VentilationIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? VentilationLightIcon : VentilationDarkIcon;
+    }
+
+    return themeType === "light" ? VentilationDarkIcon : VentilationLightIcon;
+  };
+
+  return <ImgIcon alt="ventilation" src={src()} />;
+}