From f3b56c0e55494ce68ba1257689241c05612eca1c Mon Sep 17 00:00:00 2001
From: padamsen_fisker <padamsen@fiskerinc.com>
Date: Fri, 1 Mar 2024 14:44:57 -0500
Subject: [PATCH 1/2] CEC-5751 - Flashpack UI: Make a picklist for the ECU
 names

---
 src/components/Controls/ECUDropDown/index.jsx |  44 +-
 .../Add/__snapshots__/index.test.jsx.snap     | 495 +++++++++++++++++-
 src/components/Flashpack/Add/index.jsx        |  13 +-
 3 files changed, 517 insertions(+), 35 deletions(-)

diff --git a/src/components/Controls/ECUDropDown/index.jsx b/src/components/Controls/ECUDropDown/index.jsx
index 0ed9188..d54e106 100644
--- a/src/components/Controls/ECUDropDown/index.jsx
+++ b/src/components/Controls/ECUDropDown/index.jsx
@@ -1,32 +1,52 @@
 import React from "react";
-import { Select } from "@material-ui/core";
+import { FormControl, InputLabel, Select } from "@material-ui/core";
+import useStyles from "../../useStyles";
 
 const ECUDropDown = (props) => {
   const changeHandler = (e) => {
     if (!props.changeHandler) return;
     props.changeHandler(e);
   };
+  const classes = useStyles();
 
   return (
-    <Select
-      id={props.id}
-      native
+    <FormControl
       variant="outlined"
-      value={props.value}
-      onChange={changeHandler}
+      margin="normal"
+      fullWidth={false}
     >
-      {ECUs.map((item, index) => (
-        <option key={index} value={item[0]}>
-          {item[1]}
-        </option>
-      ))}
-    </Select>
+      <InputLabel
+        className={classes.whiteBackground}
+        required={props.required}
+        disabled={props.disabled}
+      >
+        {props.label}
+      </InputLabel>
+      <Select
+        id={props.id}
+        name={props.name}
+        variant={"outlined"}
+        native
+        value={props.value}
+        onChange={changeHandler}
+        disabled={props.disabled}
+      >
+        {
+          ECUs.map((item, index) => (
+            <option key={index} value={item && item[0] ? item[0] : null}>
+              {item && item[0] ? item[0] : null}
+            </option>
+          ))
+        }
+      </Select >
+    </FormControl>
   );
 };
 
 export default ECUDropDown;
 
 const ECUs = [
+  null,
   ["AGS", "Active Grille Shutter"],
   ["ADB", "Adaptive Driving Beam"],
   ["ADAS", "Advanced Driver Assist System"],
diff --git a/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap b/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap
index 9487d26..36e887b 100644
--- a/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap
@@ -214,13 +214,11 @@ exports[`FlashpackAdd Render 1`] = `
                     class="input_container"
                   >
                     <div
-                      class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
+                      class="MuiFormControl-root MuiFormControl-marginNormal"
                     >
                       <label
-                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                        class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                         data-shrink="false"
-                        for="ecuName"
-                        id="ecuName-label"
                       >
                         ECU Name
                         <span
@@ -234,26 +232,495 @@ exports[`FlashpackAdd Render 1`] = `
                       <div
                         class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
                       >
-                        <input
+                        <select
                           aria-invalid="false"
-                          class="MuiInputBase-input MuiOutlinedInput-input"
+                          class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
                           id="ecuName"
-                          maxlength="255"
                           name="ecuName"
-                          required=""
-                          type="text"
-                          value=""
-                        />
+                        >
+                          <option />
+                          <option
+                            value="AGS"
+                          >
+                            AGS
+                          </option>
+                          <option
+                            value="ADB"
+                          >
+                            ADB
+                          </option>
+                          <option
+                            value="ADAS"
+                          >
+                            ADAS
+                          </option>
+                          <option
+                            value="ACU"
+                          >
+                            ACU
+                          </option>
+                          <option
+                            value="ACP"
+                          >
+                            ACP
+                          </option>
+                          <option
+                            value="AMP"
+                          >
+                            AMP
+                          </option>
+                          <option
+                            value="AP_FL"
+                          >
+                            AP_FL
+                          </option>
+                          <option
+                            value="AP_FR"
+                          >
+                            AP_FR
+                          </option>
+                          <option
+                            value="AP_RL"
+                          >
+                            AP_RL
+                          </option>
+                          <option
+                            value="AP_RR"
+                          >
+                            AP_RR
+                          </option>
+                          <option
+                            value="AL"
+                          >
+                            AL
+                          </option>
+                          <option
+                            value="BCS"
+                          >
+                            BCS
+                          </option>
+                          <option
+                            value="BMS"
+                          >
+                            BMS
+                          </option>
+                          <option
+                            value="BMU"
+                          >
+                            BMU
+                          </option>
+                          <option
+                            value="BCM"
+                          >
+                            BCM
+                          </option>
+                          <option
+                            value="CDS"
+                          >
+                            CDS
+                          </option>
+                          <option
+                            value="CCU"
+                          >
+                            CCU
+                          </option>
+                          <option
+                            value="CIM"
+                          >
+                            CIM
+                          </option>
+                          <option
+                            value="CVM"
+                          >
+                            CVM
+                          </option>
+                          <option
+                            value="CFM"
+                          >
+                            CFM
+                          </option>
+                          <option
+                            value="CMRR_FL"
+                          >
+                            CMRR_FL
+                          </option>
+                          <option
+                            value="CMRR_FR"
+                          >
+                            CMRR_FR
+                          </option>
+                          <option
+                            value="CMRR_RL"
+                          >
+                            CMRR_RL
+                          </option>
+                          <option
+                            value="CMRR_RR"
+                          >
+                            CMRR_RR
+                          </option>
+                          <option
+                            value="DVRC"
+                          >
+                            DVRC
+                          </option>
+                          <option
+                            value="DC-CHM"
+                          >
+                            DC-CHM
+                          </option>
+                          <option
+                            value="DMC"
+                          >
+                            DMC
+                          </option>
+                          <option
+                            value="DSMC"
+                          >
+                            DSMC
+                          </option>
+                          <option
+                            value="DWSG"
+                          >
+                            DWSG
+                          </option>
+                          <option
+                            value="EKS"
+                          >
+                            EKS
+                          </option>
+                          <option
+                            value="EPS"
+                          >
+                            EPS
+                          </option>
+                          <option
+                            value="EAS"
+                          >
+                            EAS
+                          </option>
+                          <option
+                            value="ECC"
+                          >
+                            ECC
+                          </option>
+                          <option
+                            value="EWP_B"
+                          >
+                            EWP_B
+                          </option>
+                          <option
+                            value="EWP_FD"
+                          >
+                            EWP_FD
+                          </option>
+                          <option
+                            value="EWP_H"
+                          >
+                            EWP_H
+                          </option>
+                          <option
+                            value="EWP_RD"
+                          >
+                            EWP_RD
+                          </option>
+                          <option
+                            value="EWM"
+                          >
+                            EWM
+                          </option>
+                          <option
+                            value="EXV_B"
+                          >
+                            EXV_B
+                          </option>
+                          <option
+                            value="EXV_HP"
+                          >
+                            EXV_HP
+                          </option>
+                          <option
+                            value="ESP"
+                          >
+                            ESP
+                          </option>
+                          <option
+                            value="FDHA_FL"
+                          >
+                            FDHA_FL
+                          </option>
+                          <option
+                            value="FDHA_FR"
+                          >
+                            FDHA_FR
+                          </option>
+                          <option
+                            value="FDHA_RL"
+                          >
+                            FDHA_RL
+                          </option>
+                          <option
+                            value="FDHA_RR"
+                          >
+                            FDHA_RR
+                          </option>
+                          <option
+                            value="Lumber"
+                          >
+                            Lumber
+                          </option>
+                          <option
+                            value="FBM_L"
+                          >
+                            FBM_L
+                          </option>
+                          <option
+                            value="FBM_R"
+                          >
+                            FBM_R
+                          </option>
+                          <option
+                            value="FVC"
+                          >
+                            FVC
+                          </option>
+                          <option
+                            value="GW"
+                          >
+                            GW
+                          </option>
+                          <option
+                            value="HUD"
+                          >
+                            HUD
+                          </option>
+                          <option
+                            value="IDS"
+                          >
+                            IDS
+                          </option>
+                          <option
+                            value="ICC"
+                          >
+                            ICC
+                          </option>
+                          <option
+                            value="IBS"
+                          >
+                            IBS
+                          </option>
+                          <option
+                            value="iBooster"
+                          >
+                            iBooster
+                          </option>
+                          <option
+                            value="KS"
+                          >
+                            KS
+                          </option>
+                          <option
+                            value="LSC"
+                          >
+                            LSC
+                          </option>
+                          <option
+                            value="MRR"
+                          >
+                            MRR
+                          </option>
+                          <option
+                            value="MCU_F"
+                          >
+                            MCU_F
+                          </option>
+                          <option
+                            value="MCU_R"
+                          >
+                            MCU_R
+                          </option>
+                          <option
+                            value="MDV"
+                          >
+                            MDV
+                          </option>
+                          <option
+                            value="MFS"
+                          >
+                            MFS
+                          </option>
+                          <option
+                            value="MIS"
+                          >
+                            MIS
+                          </option>
+                          <option
+                            value="MPC"
+                          >
+                            MPC
+                          </option>
+                          <option
+                            value="OMC"
+                          >
+                            OMC
+                          </option>
+                          <option
+                            value="OHC"
+                          >
+                            OHC
+                          </option>
+                          <option
+                            value="PAS"
+                          >
+                            PAS
+                          </option>
+                          <option
+                            value="PCU"
+                          >
+                            PCU
+                          </option>
+                          <option
+                            value="PMS"
+                          >
+                            PMS
+                          </option>
+                          <option
+                            value="PSM"
+                          >
+                            PSM
+                          </option>
+                          <option
+                            value="PEPS"
+                          >
+                            PEPS
+                          </option>
+                          <option
+                            value="PKC"
+                          >
+                            PKC
+                          </option>
+                          <option
+                            value="PKC_ANT_L"
+                          >
+                            PKC_ANT_L
+                          </option>
+                          <option
+                            value="PKC_ANT_R"
+                          >
+                            PKC_ANT_R
+                          </option>
+                          <option
+                            value="PWC"
+                          >
+                            PWC
+                          </option>
+                          <option
+                            value="PASC"
+                          >
+                            PASC
+                          </option>
+                          <option
+                            value="PDU"
+                          >
+                            PDU
+                          </option>
+                          <option
+                            value="PLGM"
+                          >
+                            PLGM
+                          </option>
+                          <option
+                            value="RLS"
+                          >
+                            RLS
+                          </option>
+                          <option
+                            value="RAC"
+                          >
+                            RAC
+                          </option>
+                          <option
+                            value="RVC"
+                          >
+                            RVC
+                          </option>
+                          <option
+                            value="RSC"
+                          >
+                            RSC
+                          </option>
+                          <option
+                            value="RCM"
+                          >
+                            RCM
+                          </option>
+                          <option
+                            value="RSM"
+                          >
+                            RSM
+                          </option>
+                          <option
+                            value="TBOX"
+                          >
+                            TBOX
+                          </option>
+                          <option
+                            value="TPMS"
+                          >
+                            TPMS
+                          </option>
+                          <option
+                            value="TDS"
+                          >
+                            TDS
+                          </option>
+                          <option
+                            value="USB Box"
+                          >
+                            USB Box
+                          </option>
+                          <option
+                            value="VCU"
+                          >
+                            VCU
+                          </option>
+                          <option
+                            value="VSP"
+                          >
+                            VSP
+                          </option>
+                          <option
+                            value="WTC_B"
+                          >
+                            WTC_B
+                          </option>
+                          <option
+                            value="WTC_H"
+                          >
+                            WTC_H
+                          </option>
+                        </select>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
                         <fieldset
                           aria-hidden="true"
                           class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                          style="padding-left: 8px;"
                         >
                           <legend
-                            class="PrivateNotchedOutline-legendLabelled-0"
+                            class="PrivateNotchedOutline-legend-0"
+                            style="width: 0.01px;"
                           >
                             <span>
-                              ECU Name
-                               *
+                              ​
                             </span>
                           </legend>
                         </fieldset>
diff --git a/src/components/Flashpack/Add/index.jsx b/src/components/Flashpack/Add/index.jsx
index 9eb0380..62effa6 100644
--- a/src/components/Flashpack/Add/index.jsx
+++ b/src/components/Flashpack/Add/index.jsx
@@ -3,6 +3,7 @@ import {
   IconButton,
   TextField
 } from "@material-ui/core";
+import ECUDropDown from "../../Controls/ECUDropDown";
 import React, { useEffect, useState } from "react";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
@@ -181,19 +182,13 @@ const MainForm = () => {
           <div className="container">
             {mappingInputs.map((item, index) => (
               <div className="input_container" key={index}>
-                <TextField
+                <ECUDropDown
                   id="ecuName"
                   name="ecuName"
                   label="ECU Name"
-                  variant="outlined"
-                  margin="normal"
-                  inputProps={{
-                    maxLength: "255",
-                  }}
-                  required
                   value={item.ecuName}
-                  onChange={(event) => handleChange(event, index)}
-                  type="text"
+                  changeHandler={(event) => handleChange(event, index)}
+                  required
                 />
                 <TextField
                   id="ecuVersion"

From 8f011d11f2231da624998093cfdd3ef9f8787b9d Mon Sep 17 00:00:00 2001
From: padamsen_fisker <padamsen@fiskerinc.com>
Date: Tue, 5 Mar 2024 16:31:08 -0500
Subject: [PATCH 2/2] More picklists

---
 src/components/Contexts/VehicleContext.jsx    |   4 +-
 .../Add/__snapshots__/index.test.jsx.snap     | 181 +++++++++++-------
 src/components/Flashpack/Add/index.jsx        |  80 +++-----
 .../__snapshots__/index.test.jsx.snap         | 169 ++++++++++++++++
 src/components/Flashpack/index.jsx            |  58 +++++-
 .../Flashpack/modelsTrimsYears.json           |  40 ++++
 src/services/vehiclesAPI.js                   |   4 +-
 7 files changed, 406 insertions(+), 130 deletions(-)
 create mode 100644 src/components/Flashpack/modelsTrimsYears.json

diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index 96dc6df..eb09f0e 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -291,11 +291,11 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const getAllFlashpacks = async (options, token) => {
+  const getAllFlashpacks = async (model, trim, year, options, token) => {
     try {
       setBusy(true);
 
-      const result = await api.getAllFlashpacks(options, token);
+      const result = await api.getAllFlashpacks(model, trim, year, options, token);
       if (result.error) {
         throw new Error(`Get all flashpacks error. ${result.message}`);
       }
diff --git a/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap b/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap
index 36e887b..6e5fcba 100644
--- a/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Flashpack/Add/__snapshots__/index.test.jsx.snap
@@ -24,138 +24,175 @@ exports[`FlashpackAdd Render 1`] = `
             >
               <div>
                 <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="carModel"
-                    id="carModel-label"
+                    class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                    data-shrink="true"
                   >
                     Model
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
                   </label>
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                    required=""
                   >
-                    <input
+                    <select
                       aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="carModel"
-                      maxlength="255"
-                      name="carModel"
+                      class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
                       required=""
-                      type="text"
-                      value=""
-                    />
+                    >
+                      <option
+                        value="Ocean"
+                      >
+                        Ocean
+                      </option>
+                    </select>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
                     <fieldset
                       aria-hidden="true"
                       class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                      style="padding-left: 8px;"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
+                        class="PrivateNotchedOutline-legend-0"
+                        style="width: 0.01px;"
                       >
                         <span>
-                          Model
-                           *
+                          ​
                         </span>
                       </legend>
                     </fieldset>
                   </div>
                 </div>
                 <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="carTrim"
-                    id="carTrim-label"
+                    class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                    data-shrink="true"
                   >
                     Trim
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
                   </label>
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                    required=""
                   >
-                    <input
+                    <select
                       aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="carTrim"
-                      maxlength="255"
-                      name="carTrim"
+                      class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
                       required=""
-                      type="text"
-                      value=""
-                    />
+                    >
+                      <option
+                        value="Base"
+                      >
+                        Base
+                      </option>
+                      <option
+                        value="Sport"
+                      >
+                        Sport
+                      </option>
+                      <option
+                        value="Ocean One"
+                      >
+                        Ocean One
+                      </option>
+                      <option
+                        value="Ultra"
+                      >
+                        Ultra
+                      </option>
+                      <option
+                        value="Extreme"
+                      >
+                        Extreme
+                      </option>
+                    </select>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
                     <fieldset
                       aria-hidden="true"
                       class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                      style="padding-left: 8px;"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
+                        class="PrivateNotchedOutline-legend-0"
+                        style="width: 0.01px;"
                       >
                         <span>
-                          Trim
-                           *
+                          ​
                         </span>
                       </legend>
                     </fieldset>
                   </div>
                 </div>
                 <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  class="MuiFormControl-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
-                    data-shrink="false"
-                    for="carYear"
-                    id="carYear-label"
+                    class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                    data-shrink="true"
                   >
                     Year
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
                   </label>
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                    required=""
                   >
-                    <input
+                    <select
                       aria-invalid="false"
-                      class="MuiInputBase-input MuiOutlinedInput-input"
-                      id="carYear"
-                      maxlength="255"
-                      name="carYear"
+                      class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
                       required=""
-                      type="number"
-                      value=""
-                    />
+                    >
+                      <option
+                        value="2023"
+                      >
+                        2023
+                      </option>
+                      <option
+                        value="2024"
+                      >
+                        2024
+                      </option>
+                    </select>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
                     <fieldset
                       aria-hidden="true"
                       class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                      style="padding-left: 8px;"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
+                        class="PrivateNotchedOutline-legend-0"
+                        style="width: 0.01px;"
                       >
                         <span>
-                          Year
-                           *
+                          ​
                         </span>
                       </legend>
                     </fieldset>
diff --git a/src/components/Flashpack/Add/index.jsx b/src/components/Flashpack/Add/index.jsx
index 62effa6..829d267 100644
--- a/src/components/Flashpack/Add/index.jsx
+++ b/src/components/Flashpack/Add/index.jsx
@@ -12,7 +12,10 @@ import { logger } from "../../../services/monitoring";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useVehicleContext, VehicleProvider } from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
+import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
+import { DropDownList } from "../../Controls/DropDownList";
+import modelsTrimsYears from '.././modelsTrimsYears.json';
 
 const MainForm = () => {
   const {
@@ -23,9 +26,11 @@ const MainForm = () => {
   const classes = useStyles();
   const [redirect, setRedirect] = useState(null);
   const { setMessage, setTitle, setSitePath } = useStatusContext();
-  const [carModel, setCarModel] = useState("");
-  const [carTrim, setCarTrim] = useState("");
-  const [carYear, setCarYear] = useState();
+  const [carModel, setCarModel] = useLocalStorage("FLASHPACK_ADD_MODEL", "Ocean");
+  const [carTrim, setCarTrim] = useLocalStorage("FLASHPACK_ADD_TRIM", "Base");
+  const [carYear, setCarYear] = useLocalStorage("FLASHPACK_ADD_YEAR", 2024);
+  const [trims, setTrims] = useLocalStorage("FLASHPACK_ADD_TRIMS", modelsTrimsYears.oceanTrims);
+  const [years, setYears] = useLocalStorage("FLASHPACK_ADD_YEARS", modelsTrimsYears.oceanYears);
   const [flashpack, setFlashpack] = useState();
   const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
   const {
@@ -52,15 +57,30 @@ const MainForm = () => {
   }, []);
 
   const onCarModelChange = (event) => {
-    setCarModel(event.target.value);
+    let newModel = event.target.value
+
+    setCarModel(newModel)
+
+    switch (newModel) {
+      case "Ocean":
+        setTrims(modelsTrimsYears.oceanTrims);
+        setYears(modelsTrimsYears.oceanYears);
+        break;
+      default:
+        break;
+    }
   }
 
   const onCarTrimChange = (event) => {
-    setCarTrim(event.target.value);
+    let newTrim = event.target.value
+
+    setCarTrim(newTrim)
   }
 
   const onCarYearChange = (event) => {
-    setCarYear(event.target.value);
+    let newYear = event.target.value
+
+    setCarYear(newYear)
   }
 
   const onFlashpackChange = (event) => {
@@ -119,51 +139,9 @@ const MainForm = () => {
     <div className={classes.paper}>
       <form className={classes.form} noValidate action="{onSubmit}">
         <div>
-          <TextField
-            id="carModel"
-            name="carModel"
-            label="Model"
-            variant="outlined"
-            margin="normal"
-            inputProps={{
-              maxLength: "255",
-            }}
-            required
-            fullWidth
-            value={carModel}
-            onChange={onCarModelChange}
-            type="text"
-          />
-          <TextField
-            id="carTrim"
-            name="carTrim"
-            label="Trim"
-            variant="outlined"
-            margin="normal"
-            inputProps={{
-              maxLength: "255",
-            }}
-            required
-            fullWidth
-            value={carTrim}
-            onChange={onCarTrimChange}
-            type="text"
-          />
-          <TextField
-            id="carYear"
-            name="carYear"
-            label="Year"
-            variant="outlined"
-            margin="normal"
-            inputProps={{
-              maxLength: "255",
-            }}
-            required
-            fullWidth
-            value={carYear}
-            onChange={onCarYearChange}
-            type="number"
-          />
+          <DropDownList fullWidth required label="Model" data={modelsTrimsYears.models} classes={classes} onChange={onCarModelChange} value={carModel} />
+          <DropDownList fullWidth required label="Trim" data={trims} disabled={!carModel || !trims} classes={classes} onChange={onCarTrimChange} value={carTrim} />
+          <DropDownList fullWidth required label="Year" data={years} disabled={!carModel || !years} classes={classes} onChange={onCarYearChange} value={carYear} />
           <TextField
             id="flashpack"
             name="flashpack"
diff --git a/src/components/Flashpack/__snapshots__/index.test.jsx.snap b/src/components/Flashpack/__snapshots__/index.test.jsx.snap
index 50e5114..06f9a5e 100644
--- a/src/components/Flashpack/__snapshots__/index.test.jsx.snap
+++ b/src/components/Flashpack/__snapshots__/index.test.jsx.snap
@@ -15,6 +15,175 @@ exports[`Flashpack Render 1`] = `
           data-testid="mocked-vehicleprovider"
         >
           <div>
+            <div
+              class="MuiFormControl-root MuiFormControl-marginNormal"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                data-shrink="true"
+              >
+                Model
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+              >
+                <select
+                  aria-invalid="false"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                >
+                  <option
+                    value="Ocean"
+                  >
+                    Ocean
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  style="padding-left: 8px;"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-0"
+                    style="width: 0.01px;"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="MuiFormControl-root MuiFormControl-marginNormal"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                data-shrink="true"
+              >
+                Trim
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+              >
+                <select
+                  aria-invalid="false"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                >
+                  <option
+                    value="Base"
+                  >
+                    Base
+                  </option>
+                  <option
+                    value="Sport"
+                  >
+                    Sport
+                  </option>
+                  <option
+                    value="Ocean One"
+                  >
+                    Ocean One
+                  </option>
+                  <option
+                    value="Ultra"
+                  >
+                    Ultra
+                  </option>
+                  <option
+                    value="Extreme"
+                  >
+                    Extreme
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  style="padding-left: 8px;"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-0"
+                    style="width: 0.01px;"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <div
+              class="MuiFormControl-root MuiFormControl-marginNormal"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                data-shrink="true"
+              >
+                Year
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+              >
+                <select
+                  aria-invalid="false"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                >
+                  <option
+                    value="2023"
+                  >
+                    2023
+                  </option>
+                  <option
+                    value="2024"
+                  >
+                    2024
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  style="padding-left: 8px;"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-0"
+                    style="width: 0.01px;"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
             <div
               class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
             >
diff --git a/src/components/Flashpack/index.jsx b/src/components/Flashpack/index.jsx
index 094d69d..899728c 100644
--- a/src/components/Flashpack/index.jsx
+++ b/src/components/Flashpack/index.jsx
@@ -21,7 +21,9 @@ import TableHeaderSortable from "../Table/HeaderSortable";
 import { useLocalStorage } from "../useLocalStorage";
 import DeleteConfirmation from "../DeleteConfirmation";
 import { RoleWrap } from "../Controls/RoleWrap";
+import { DropDownList } from "../Controls/DropDownList";
 import useStyles from "../useStyles";
+import modelsTrimsYears from './modelsTrimsYears.json';
 
 const tableColumns = [
   {
@@ -55,6 +57,11 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [rowToDelete, setRowToDelete] = useState({});
+  const [model, setModel] = useLocalStorage("FLASHPACKS_MODEL", "Ocean");
+  const [trim, setTrim] = useLocalStorage("FLASHPACKS_TRIM", "Base");
+  const [year, setYear] = useLocalStorage("FLASHPACKS_YEAR", 2024);
+  const [trims, setTrims] = useLocalStorage("FLASHPACKS_TRIMS", modelsTrimsYears.oceanTrims);
+  const [years, setYears] = useLocalStorage("FLASHPACKS_YEARS", modelsTrimsYears.oceanYears);
   const {
     getAllFlashpacks,
     flashpacks,
@@ -84,14 +91,17 @@ const MainForm = () => {
   }, []);
 
   useEffect(() => {
-    loadFlashpacks();
+    loadFlashpacks(model, trim, year);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token, pageIndex, pageSize]);
 
-  const loadFlashpacks = async () => {
+  const loadFlashpacks = async (model, trim, year) => {
     try {
       if (!token) return;
       await getAllFlashpacks(
+        model,
+        trim,
+        year,
         {
           limit: pageSize,
           offset: pageSize * pageIndex,
@@ -104,6 +114,45 @@ const MainForm = () => {
     }
   };
 
+  const onModelChange = (event) => {
+    let newModel = event.target.value
+
+    setModel(newModel)
+
+    switch (newModel) {
+      case "Ocean":
+        setTrims(modelsTrimsYears.oceanTrims);
+        setYears(modelsTrimsYears.oceanYears);
+        break;
+      default:
+        break;
+    }
+
+    if (trim && year) {
+      loadFlashpacks(newModel, trim, year)
+    }
+  };
+
+  const onTrimChange = (event) => {
+    let newTrim = event.target.value
+
+    setTrim(newTrim)
+
+    if (model && year) {
+      loadFlashpacks(model, newTrim, year)
+    }
+  };
+
+  const onYearChange = (event) => {
+    let newYear = event.target.value
+
+    setYear(newYear)
+
+    if (model && trim) {
+      loadFlashpacks(model, trim, newYear)
+    }
+  };
+
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
   };
@@ -125,7 +174,7 @@ const MainForm = () => {
         if (!result || result.error) return;
 
         setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.car_trim} ${rowToDelete.flashpack}`);
-        loadFlashpacks();
+        loadFlashpacks(model, trim, year);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -135,6 +184,9 @@ const MainForm = () => {
 
   return (
     <div>
+      <DropDownList label="Model" data={modelsTrimsYears.models} classes={classes} onChange={onModelChange} value={model} />
+      <DropDownList label="Trim" data={trims} disabled={!model || !trims} classes={classes} onChange={onTrimChange} value={trim} />
+      <DropDownList label="Year" data={years} disabled={!model || !years} classes={classes} onChange={onYearChange} value={year} />
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
           <Link to={`/tools/flashpack/add`} className={classes.labelInline}>
diff --git a/src/components/Flashpack/modelsTrimsYears.json b/src/components/Flashpack/modelsTrimsYears.json
new file mode 100644
index 0000000..9da0e3d
--- /dev/null
+++ b/src/components/Flashpack/modelsTrimsYears.json
@@ -0,0 +1,40 @@
+{
+  "models": [
+    {
+      "value": "Ocean",
+      "label": "Ocean"
+    }
+  ],
+  "oceanTrims": [
+    {
+      "value": "Base",
+      "label": "Base"
+    },
+    {
+      "value": "Sport",
+      "label": "Sport"
+    },
+    {
+      "value": "Ocean One",
+      "label": "Ocean One"
+    },
+    {
+      "value": "Ultra",
+      "label": "Ultra"
+    },
+    {
+      "value": "Extreme",
+      "label": "Extreme"
+    }
+  ],
+  "oceanYears": [
+    {
+      "value": 2023,
+      "label": "2023"
+    },
+    {
+      "value": 2024,
+      "label": "2024"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index 4a86259..2f4ea17 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -261,8 +261,8 @@ const vehiclesAPI = {
       .catch(errorHandler)
   },
 
-  getAllFlashpacks: async (options, token) => {
-    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_versions`, options), {
+  getAllFlashpacks: async (model, trim, year, options, token) => {
+    return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_versions/${model}/${trim}/${year}`, options), {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },