CEC-1183/CEC-1201 fleet vehicles forms (#130)

* working fleet vehicles forms

* snapshots and api tests

src/components/CANFilter/Table/index.jsx

@@ -121,7 +121,7 @@ const MainForm = ({ vin }) => {
     }
     if (hasRole([Roles.DELETE], groups)) {
       actions.push({
-        tip: `Delete ""${row.can_id}""`,
+        tip: `Delete "${row.can_id}"`,
         id: row.can_id,
         icon: <DeleteIcon aria-label={`Delete ${row.can_id}`} />
       })

src/components/Cars/Status/CANFiltersTab.jsx

@@ -7,15 +7,15 @@ import CANFiltersTable from "../../CANFilter/Table";
 import useStyles from "../../useStyles";
 
 const CANFiltersTab = () => {
-    const { vin } = useParams();
+  const { vin } = useParams();
-    const classes = useStyles();
+  const classes = useStyles();
 
-    return (
+  return (
-        <div className={clsx(classes.paper, classes.tableSize)}>
+    <div className={clsx(classes.paper, classes.tableSize)}>
-            <Typography variant="h6">CAN Filters</Typography>
+      <Typography variant="h6">CAN Filters</Typography>
-            <CANFiltersTable vin={vin} classes={classes} />
+      <CANFiltersTable vin={vin} classes={classes} />
-        </div >
+    </div >
-    );
+  );
 };
 
 export default CANFiltersTab;

src/components/Contexts/FleetContext.jsx

@@ -5,9 +5,13 @@ const FleetContext = React.createContext();
 
 export const FleetProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
+
   const [fleets, setFleets] = useState([]);
   const [totalFleets, setTotalFleets] = useState(0);
 
+  const [fleetVehicles, setFleetVehicles] = useState([]);
+  const [totalFleetVehicles, setTotalFleetVehicles] = useState(0);
+
   const addFleet = async (fleet, token) => {
     try {
       setBusy(true);
@@ -31,7 +35,6 @@ export const FleetProvider = ({ children }) => {
         setFleets([])
         throw new Error(`Get fleets error. ${result.message}`);
       }
-
       setFleets(result.data)
       if (result.total) {
         setTotalFleets(result.total);
@@ -78,16 +81,80 @@ export const FleetProvider = ({ children }) => {
     }
   }
 
+  const getFleetVehicles = async (name, search, token) => {
+    try {
+      setBusy(true);
+
+      const result = await api.getFleetVehicles(name, search, token);
+      if (result.error) {
+        setFleetVehicles([])
+        throw new Error(`Get fleet vehicles error. ${result.message}`);
+      }
+
+      setFleetVehicles(result.data)
+      if (result.total) {
+        setTotalFleetVehicles(result.total);
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const addFleetVehicle = async (name, vehicle, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+      validateVIN(vehicle.vin);
+
+      const result = await api.addFleetVehicle(name, vehicle, token);
+      if (result.error) {
+        throw new Error(`Add fleet vehicle error. ${result.message}`);
+      }
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const deleteFleetVehicle = async (name, vehicle, token) => {
+    try {
+      setBusy(true);
+
+      validateFleetName(name);
+      validateVIN(vehicle.vin);
+
+      const result = await api.deleteFleetVehicle(name, vehicle, token);
+      if (result.error) {
+        throw new Error(`Delete fleet vehicle error. ${result.message}`);
+      }
+
+      const index = fleetVehicles.findIndex(element => element === vehicle.vin);
+      if (index >= 0) fleetVehicles.splice(index, 1);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  }
+
   return (
     <FleetContext.Provider
       value={{
         busy,
+
         fleets,
         totalFleets,
         addFleet,
         getFleets,
         updateFleet,
-        deleteFleet
+        deleteFleet,
+
+        fleetVehicles,
+        totalFleetVehicles,
+        getFleetVehicles,
+        addFleetVehicle,
+        deleteFleetVehicle
       }}
     >
       {children}
@@ -104,9 +171,15 @@ const validateFleet = (fleet) => {
 }
 
 const validateFleetName = (name) => {
-  if (name == null || !/^[A-Za-z-]+$/.test(name)) {
+  if (name == null || !/^[0-9A-Za-z-]+$/.test(name)) {
     throw new Error("Invalid name");
   }
 }
 
+const validateVIN = (vin) => {
+  if (vin == null || vin.length !== 17) {
+    throw new Error("Invalid VIN");
+  }
+}
+
 export const useFleetContext = () => useContext(FleetContext);

src/components/Contexts/FleetContext.test.jsx

@@ -15,6 +15,11 @@ const checkFleetResults = (error, busy, fleets) => {
   expect(screen.getByTestId("fleets").innerHTML).toEqual(fleets);
 };
 
+const checkFleetVehicleResults = (error, busy, vehicles) => {
+  checkBaseResults(error, busy);
+  expect(screen.getByTestId("fleet-vehicles").innerHTML).toEqual(vehicles);
+}
+
 const checkBaseResults = (error, busy) => {
   expect(screen.getByTestId("error").innerHTML).toEqual(error);
   expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
@@ -271,10 +276,208 @@ describe("FleetContext", () => {
       checkBaseResults("", "false");
     });
   });
+
+  describe("getFleetVehicles", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { busy, error, fleetVehicles, getFleetVehicles } = useFleetContext();
+
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <div data-testid="fleet-vehicles">{JSON.stringify(fleetVehicles)}</div>
+            <button
+              data-testid="getFleetVehicles"
+              onClick={() => getFleetVehicles("US-WEST")}
+            />
+          </>
+        );
+      };
+      render(
+        <FleetProvider>
+          <TestComp />
+        </FleetProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkFleetVehicleResults("", "false", "[]");
+    });
+
+    it("getFleetVehicles", async () => {
+      fireEvent.click(screen.getByTestId("getFleetVehicles"));
+      await waitFor(() =>
+        expect(screen.getByTestId("fleet-vehicles").innerHTML).not.toBe("[]")
+      );
+      checkFleetVehicleResults("", "false", JSON.stringify(expectedFleetVehiclesData));
+    });
+  });
+
+  describe("addFleetVehicle", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { busy, addFleetVehicle } = useFleetContext();
+        const { message, setMessage } = useStatusContext();
+        const add = async (name, vehicle) => {
+          try {
+            await addFleetVehicle(name, vehicle);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="addFleetVehicleNull" onClick={() => add(null)} />
+            <button data-testid="addFleetVehicleNoName" onClick={() => add({})} />
+            <button
+              data-testid="addFleetVehicle"
+              onClick={() =>
+                add("US-TEST", { vin: "TESTVIN1234567890" })
+              }
+            />
+          </>
+        );
+      };
+      render(
+        <StatusProvider>
+          <FleetProvider>
+            <TestComp />
+          </FleetProvider>
+        </StatusProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+    it("addFleetVehicleNull", async () => {
+      fireEvent.click(screen.getByTestId("addFleetVehicleNull"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid name", "false");
+    });
+
+    it("addFleetVehicleNoName", async () => {
+      fireEvent.click(screen.getByTestId("addFleetVehicleNoName"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid name", "false");
+    });
+
+    it("addFleetVehicle", async () => {
+      fireEvent.click(screen.getByTestId("addFleetVehicle"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("", "false");
+    });
+  });
+
+  describe("deleteFleetVehicle", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { busy, deleteFleetVehicle } = useFleetContext();
+        const { message, setMessage } = useStatusContext();
+        const deleteFV = async (name, vehicle) => {
+          try {
+            await deleteFleetVehicle(name, vehicle);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="deleteFleetVehicleNull" onClick={() => deleteFV("US-WEST", null)} />
+            <button data-testid="deleteFleetVehicleInvalid" onClick={() => deleteFV("US-WEST", "INVALID")} />
+            <button
+              data-testid="deleteFleetVehicle"
+              onClick={() =>
+                deleteFV("US-WEST", { vin: "USWESTVIN12345678" })
+              }
+            />
+          </>
+        );
+      };
+      render(
+        <StatusProvider>
+          <FleetProvider>
+            <TestComp />
+          </FleetProvider>
+        </StatusProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+    it("deleteFleetVehicleNull", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetVehicleNull"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Cannot read property 'vin' of null", "false");
+    });
+
+    it("deleteFleetVehicleNonexistent", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetVehicleInvalid"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("Invalid VIN", "false");
+    });
+
+    it("deleteFleetVehicle", async () => {
+      fireEvent.click(screen.getByTestId("deleteFleetVehicle"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("", "false");
+    });
+  });
 });
 
 const expectedFleetsData = [
-  { name: "US-WEST", log_level: "info", canbus: { enabled: true } },
+  {
-  { name: "US-CENTRAL", log_level: "warn", canbus: { enabled: false } },
+    name: "US-WEST",
-  { name: "US-EAST", log_level: "error", canbus: { enabled: true } },
+    log_level: "info",
+    canbus: { enabled: true },
+    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+  },
+  {
+    name: "US-CENTRAL",
+    log_level: "warn",
+    canbus: { enabled: false },
+    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
+  },
+  {
+    name: "US-EAST",
+    log_level: "error",
+    canbus: { enabled: true },
+    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"]
+  },
 ];
+
+const expectedFleetVehiclesData = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]

src/components/Contexts/__mocks__/FleetContext.jsx

@@ -1,10 +1,27 @@
 let busy = false;
 let fleets = [
-  { name: "US-WEST", log_level: "info", canbus: { enabled: true } },
+  {
-  { name: "US-CENTRAL", log_level: "warn", canbus: { enabled: false } },
+    name: "US-WEST",
-  { name: "US-EAST", log_level: "error", canbus: { enabled: true } },
+    log_level: "info",
+    canbus: { enabled: true },
+    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+  },
+  {
+    name: "US-CENTRAL",
+    log_level: "warn",
+    canbus: { enabled: false },
+    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
+  },
+  {
+    name: "US-EAST",
+    log_level: "error",
+    canbus: { enabled: true },
+    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"]
+  },
 ];
 let totalFleets = 3;
+let fleetVehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
+let totalFleetVehicles = 3;
 
 export const FleetProvider = ({ children }) => {
   return <div data-testid="mocked-fleetprovider">{children}</div>;
@@ -12,10 +29,17 @@ export const FleetProvider = ({ children }) => {
 
 export const useFleetContext = () => ({
   busy,
+
   fleets,
   totalFleets,
   addFleet: jest.fn(),
   getFleets: jest.fn(),
   updateFleet: jest.fn(),
   deleteFleet: jest.fn(),
+
+  fleetVehicles,
+  totalFleetVehicles,
+  getFleetVehicles: jest.fn(),
+  addFleetVehicle: jest.fn(),
+  deleteFleetVehicle: jest.fn()
 });

src/components/Fleets/Add/__snapshots__/index.test.jsx.snap

@@ -123,7 +123,7 @@ exports[`FleetAddForm Render 1`] = `
                   for="log-level"
                   id="log-level-label"
                 >
-                  Log Level (e.g. "debug", "info", "warn", "error", etc.)
+                  Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")
                   <span
                     aria-hidden="true"
                     class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
@@ -153,7 +153,7 @@ exports[`FleetAddForm Render 1`] = `
                       class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
-                        Log Level (e.g. "debug", "info", "warn", "error", etc.)
+                        Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")
                          *
                       </span>
                     </legend>

src/components/Fleets/Add/index.jsx

@@ -48,7 +48,6 @@ const MainForm = () => {
         canbus: { enabled: canbusEnabledEl.current.value === "true" },
         log_level: logLevelEl.current.value,
       };
-
       const result = await addFleet(formData, token);
 
       setMessage(`Added ${result.name}`);
@@ -96,7 +95,7 @@ const MainForm = () => {
         <TextField
           id="log-level"
           name="log-level"
-          label='Log Level (e.g. "debug", "info", "warn", "error", etc.)'
+          label='Log Level (e.g. "trace", "debug", "info", "warn", "error", "critical")'
           defaultValue="error"
           variant="outlined"
           margin="normal"

src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetVehicleAdd Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-canfiltersprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          class="makeStyles-paper-3"
+        >
+          <form
+            action="{onSubmit}"
+            class="makeStyles-form-5"
+            novalidate=""
+          >
+            <div
+              class="MuiFormControl-root MuiTextField-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="vin"
+                id="vin-label"
+              >
+                VIN
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="vin"
+                  maxlength="17"
+                  name="vin"
+                  required=""
+                  type="text"
+                  value=""
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-66"
+                  >
+                    <span>
+                      VIN
+                       *
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Submit
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+    f
+  </div>
+</div>
+`;

src/components/Fleets/Status/Vehicles/Add/index.jsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Redirect, useParams } from "react-router";
+import { Button, TextField } from "@material-ui/core";
+
+import useStyles from "../../../../useStyles";
+import {
+  useFleetContext,
+  FleetProvider
+} from "../../../../Contexts/FleetContext";
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { useUserContext } from "../../../../Contexts/UserContext";
+import { logger } from "../../../../../services/monitoring";
+
+const MainForm = () => {
+  const { name } = useParams();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const { addFleetVehicle, busy } = useFleetContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const classes = useStyles();
+  const vinEl = useRef(null);
+  const [redirect, setRedirect] = useState(null);
+
+  useEffect(() => {
+    const title = "Add Vehicle";
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Fleets",
+        link: "/fleets",
+      },
+      {
+        label: `${name}`,
+        link: `/fleet/${name}`
+      },
+      {
+        label: title
+      }
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+
+      const formData = { vin: vinEl.current.value };
+      const result = await addFleetVehicle(name, formData, token);
+
+      setMessage(`Added ${result.vin}`);
+      setRedirect(`/fleet/${name}#vehicles`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  if (redirect && redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="vin"
+          name="vin"
+          label="VIN"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "17",
+          }}
+          required
+          fullWidth
+          inputRef={vinEl}
+        />
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+const FleetAddVehicleForm = () => (
+  <FleetProvider>
+    <MainForm />
+  </FleetProvider>
+);
+
+export default FleetAddVehicleForm;

src/components/Fleets/Status/Vehicles/Add/index.test.jsx

@@ -0,0 +1,36 @@
+jest.mock("../../../../Contexts/CANFiltersContext");
+jest.mock("../../../../Contexts/StatusContext");
+jest.mock("../../../../Contexts/UserContext");
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import { CANFiltersProvider } from "../../../../Contexts/CANFiltersContext";
+import { StatusProvider } from "../../../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
+import MainForm from "./index"
+
+const renderCANFiltersAdd = async () => {
+  const { container } = render(
+    <CANFiltersProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>f
+    </CANFiltersProvider>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("FleetVehicleAdd", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderCANFiltersAdd();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,326 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetVehiclesTable Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-fleetprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          data-testid="mocked-fleetprovider"
+        >
+          <div
+            class="makeStyles-paper-3 makeStyles-tableSize-55"
+          >
+            <div
+              class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+            >
+              <div
+                class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+              >
+                <a
+                  class="makeStyles-labelInline-9"
+                  href="/fleet/undefined/vehicle-add"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                    />
+                  </svg>
+                </a>
+              </div>
+              <div
+                align="right"
+                class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
+              >
+                <div
+                  class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                    data-shrink="false"
+                    for="search"
+                  >
+                    Search
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                      id="search"
+                      type="text"
+                      value=""
+                    />
+                    <div
+                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    >
+                      <button
+                        aria-label="search"
+                        class="MuiButtonBase-root MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <table
+              class="MuiTable-root"
+            >
+              <thead
+                class="MuiTableHead-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-head"
+                >
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      VIN
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                class="MuiTableBody-root"
+              >
+                <tr
+                  class="MuiTableRow-root"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/vehicle-status/USWESTVIN12345678"
+                    >
+                      USWESTVIN12345678
+                    </a>
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    No actions
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/vehicle-status/USWESTVIN12345679"
+                    >
+                      USWESTVIN12345679
+                    </a>
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    No actions
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/vehicle-status/USWESTVIN12345670"
+                    >
+                      USWESTVIN12345670
+                    </a>
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    No actions
+                  </td>
+                </tr>
+              </tbody>
+              <tfoot
+                class="MuiTableFooter-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-footer"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                    colspan="8"
+                  >
+                    <div
+                      class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                    >
+                      <div
+                        class="MuiTablePagination-spacer"
+                      />
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      >
+                        Rows per page:
+                      </p>
+                      <div
+                        class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                      >
+                        <select
+                          aria-label="rows per page"
+                          class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                        >
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="5"
+                          >
+                            5
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="10"
+                          >
+                            10
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="25"
+                          >
+                            25
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="100"
+                          >
+                            100
+                          </option>
+                        </select>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      >
+                        1-3 of 3
+                      </p>
+                      <div
+                        class="MuiTablePagination-actions"
+                      >
+                        <button
+                          aria-label="Previous page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Previous page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          aria-label="Next page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Next page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -0,0 +1,194 @@
+import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
+import {
+  Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow,
+  Tooltip,
+} from "@material-ui/core";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import DeleteIcon from "@material-ui/icons/Delete";
+import clsx from "clsx";
+
+import TableHeaderSortable from "../../../../Table/HeaderSortable";
+import { useUserContext } from "../../../../Contexts/UserContext"
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { FleetProvider, useFleetContext } from "../../../../Contexts/FleetContext"
+import useStyles from "../../../../useStyles";
+import SearchField from "../../../../Controls/SearchField";
+import { logger } from "../../../../../services/monitoring";
+import { Roles, hasRole } from "../../../../../utils/roles";
+
+const tableColumns = [
+  {
+    id: "vin",
+    label: "VIN"
+  },
+  {
+    id: "",
+    label: "Actions"
+  }
+];
+
+const MainForm = ({ name }) => {
+  const [pageSize, setPageSize] = useState(10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("id");
+  const [order, setOrder] = useState("desc");
+  const classes = useStyles();
+  const { setMessage } = useStatusContext();
+  const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
+  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        await getFleetVehicles(
+          name,
+          {
+            limit: pageSize,
+            offset: pageSize * pageIndex,
+            order: `${orderBy} ${order}`,
+          },
+          token
+        );
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token, pageIndex, pageSize, orderBy, order]);
+
+  const handleChangePageIndex = (event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSort = (event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onDelete = async (vin) => {
+    try {
+      await deleteFleetVehicle(name, { vin: vin }, token);
+      setMessage(`Deleted ${vin}`)
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const Actions = (vin) => {
+    let actions = [];
+    if (hasRole([Roles.DELETE], groups)) {
+      actions.push({
+        tip: `Delete "${vin}"`,
+        id: vin,
+        icon: <DeleteIcon aria-label={`Delete ${vin}`} />
+      })
+    }
+    if (actions.length === 0) return ["No actions"];
+
+    return actions.map((action) => {
+      if (action.link != null) {
+        return (
+          <Tooltip key={action.link} title={action.tip}>
+            <Link to={action.link} style={{ margin: 5 }}>
+              {action.icon}
+            </Link>
+          </Tooltip>
+        );
+      } else {
+        return (
+          <Tooltip key={`delete-${action.id}`} title={action.tip}>
+            <Link to="#" onClick={() => onDelete(action.id)}>
+              {action.icon}
+            </Link>
+          </Tooltip>
+        );
+      }
+    });
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={4} className={classes.textJustifyAlign}>
+          <Link to={`/fleet/${name}/vehicle-add`} className={classes.labelInline}>
+            <AddCircleIcon fontSize="large" />
+          </Link>
+        </Grid>
+        <Grid item md={8} align="right" className={classes.textCenterAlign}>
+          <SearchField classes={classes} />
+        </Grid>
+      </Grid>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+        />
+        <TableBody>
+          {fleetVehicles.map(vin => (
+            <TableRow key={vin}>
+              <TableCell align="center">
+                <Link to={`/vehicle-status/${vin}`}>{vin}</Link>
+              </TableCell>
+              <TableCell align="center">{Actions(vin)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={8}
+              count={totalFleetVehicles}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div >
+  );
+};
+
+const FleetVehiclesTable = (props) => (
+  <FleetProvider>
+    <MainForm {...props} />
+  </FleetProvider>
+);
+
+export default FleetVehiclesTable;

src/components/Fleets/Status/Vehicles/Table/index.test.jsx

@@ -0,0 +1,39 @@
+jest.mock("../../../../Contexts/FleetContext");
+jest.mock("../../../../Contexts/StatusContext");
+jest.mock("../../../../Contexts/UserContext");
+jest.mock('@material-ui/core/utils/unstable_useId', () =>
+  jest.fn().mockReturnValue('mui-test-id'),
+);
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import { FleetProvider } from "../../../../Contexts/FleetContext";
+import { StatusProvider } from "../../../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
+import MainForm from "./index"
+
+const renderFleetTable = async () => {
+  const { container } = render(
+    <FleetProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <MainForm />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </FleetProvider>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("FleetVehiclesTable", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderFleetTable();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Fleets/Status/VehiclesTab.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { useParams } from "react-router";
+import clsx from "clsx";
+import { Typography } from "@material-ui/core";
+
+import FleetVehiclesTable from "./Vehicles/Table";
+import useStyles from "../../useStyles";
+
+const FleetVehiclesTab = () => {
+  const { name } = useParams();
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Vehicles</Typography>
+      <FleetVehiclesTable name={name} classes={classes} />
+    </div >
+  );
+};
+
+export default FleetVehiclesTab;

src/components/Fleets/Status/VehiclesTab.test.jsx

@@ -0,0 +1,31 @@
+jest.mock("../../Contexts/FleetContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock('@material-ui/core/utils/unstable_useId', () =>
+  jest.fn().mockReturnValue('mui-test-id'),
+);
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import { setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import VehiclesTab from "./VehiclesTab"
+
+const renderVehiclesTab = async () => {
+  const { container } = render(
+    <BrowserRouter>
+      <VehiclesTab name="US-TEST" />
+    </BrowserRouter>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("VehiclesTab", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderVehiclesTab();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap

@@ -0,0 +1,323 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VehiclesTab Render 1`] = `
+<div>
+  <div
+    class="makeStyles-paper-3 makeStyles-tableSize-55"
+  >
+    <h6
+      class="MuiTypography-root MuiTypography-h6"
+    >
+      Vehicles
+    </h6>
+    <div
+      data-testid="mocked-fleetprovider"
+    >
+      <div
+        class="makeStyles-paper-3 makeStyles-tableSize-55"
+      >
+        <div
+          class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+        >
+          <div
+            class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+          >
+            <a
+              class="makeStyles-labelInline-9"
+              href="/fleet/undefined/vehicle-add"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                />
+              </svg>
+            </a>
+          </div>
+          <div
+            align="right"
+            class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
+          >
+            <div
+              class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                data-shrink="false"
+                for="search"
+              >
+                Search
+              </label>
+              <div
+                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                  id="search"
+                  type="text"
+                  value=""
+                />
+                <div
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                >
+                  <button
+                    aria-label="search"
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <table
+          class="MuiTable-root"
+        >
+          <thead
+            class="MuiTableHead-root"
+          >
+            <tr
+              class="MuiTableRow-root MuiTableRow-head"
+            >
+              <th
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                scope="col"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiTableSortLabel-root"
+                  role="button"
+                  tabindex="0"
+                >
+                  VIN
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                    />
+                  </svg>
+                </span>
+              </th>
+              <th
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                scope="col"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="MuiTableBody-root"
+          >
+            <tr
+              class="MuiTableRow-root"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/vehicle-status/USWESTVIN12345678"
+                >
+                  USWESTVIN12345678
+                </a>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                No actions
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/vehicle-status/USWESTVIN12345679"
+                >
+                  USWESTVIN12345679
+                </a>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                No actions
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/vehicle-status/USWESTVIN12345670"
+                >
+                  USWESTVIN12345670
+                </a>
+              </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                No actions
+              </td>
+            </tr>
+          </tbody>
+          <tfoot
+            class="MuiTableFooter-root"
+          >
+            <tr
+              class="MuiTableRow-root MuiTableRow-footer"
+            >
+              <td
+                class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                colspan="8"
+              >
+                <div
+                  class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                >
+                  <div
+                    class="MuiTablePagination-spacer"
+                  />
+                  <p
+                    class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                  >
+                    Rows per page:
+                  </p>
+                  <div
+                    class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                  >
+                    <select
+                      aria-label="rows per page"
+                      class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                    >
+                      <option
+                        class="MuiTablePagination-menuItem"
+                        value="5"
+                      >
+                        5
+                      </option>
+                      <option
+                        class="MuiTablePagination-menuItem"
+                        value="10"
+                      >
+                        10
+                      </option>
+                      <option
+                        class="MuiTablePagination-menuItem"
+                        value="25"
+                      >
+                        25
+                      </option>
+                      <option
+                        class="MuiTablePagination-menuItem"
+                        value="100"
+                      >
+                        100
+                      </option>
+                    </select>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M7 10l5 5 5-5z"
+                      />
+                    </svg>
+                  </div>
+                  <p
+                    class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                  >
+                    1-3 of 3
+                  </p>
+                  <div
+                    class="MuiTablePagination-actions"
+                  >
+                    <button
+                      aria-label="Previous page"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                      disabled=""
+                      tabindex="-1"
+                      title="Previous page"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                    <button
+                      aria-label="Next page"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                      disabled=""
+                      tabindex="-1"
+                      title="Next page"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                          />
+                        </svg>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Fleets/Status/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,414 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FleetStatus Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-fleetprovider"
+  >
+    <div
+      data-testid="mocked-statusprovider"
+    >
+      <div
+        data-testid="mocked-userprovider"
+      >
+        <div
+          class="makeStyles-paper-3 makeStyles-tableSize-55"
+        >
+          <div
+            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-30"
+          >
+            <div
+              class="MuiTabs-root"
+            >
+              <div
+                class="MuiTabs-scroller MuiTabs-fixed"
+                style="overflow: hidden;"
+              >
+                <div
+                  aria-label="car tabs"
+                  class="MuiTabs-flexContainer"
+                  role="tablist"
+                >
+                  <button
+                    aria-controls="tabpanel-0"
+                    aria-selected="true"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected"
+                    id="tab-0"
+                    role="tab"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Vehicles
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                  <button
+                    aria-controls="tabpanel-1"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-1"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      CAN Filters
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+                <span
+                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
+                  style="left: 0px; width: 0px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            aria-labelledby="tab-0"
+            id="tabpanel-0"
+            role="tabpanel"
+          >
+            <div
+              class="MuiBox-root MuiBox-root-69"
+            >
+              <div
+                class="makeStyles-paper-3 makeStyles-tableSize-55"
+              >
+                <h6
+                  class="MuiTypography-root MuiTypography-h6"
+                >
+                  Vehicles
+                </h6>
+                <div
+                  data-testid="mocked-fleetprovider"
+                >
+                  <div
+                    class="makeStyles-paper-3 makeStyles-tableSize-55"
+                  >
+                    <div
+                      class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
+                    >
+                      <div
+                        class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
+                      >
+                        <a
+                          class="makeStyles-labelInline-9"
+                          href="/fleet/undefined/vehicle-add"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
+                            />
+                          </svg>
+                        </a>
+                      </div>
+                      <div
+                        align="right"
+                        class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
+                      >
+                        <div
+                          class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
+                        >
+                          <label
+                            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                            data-shrink="false"
+                            for="search"
+                          >
+                            Search
+                          </label>
+                          <div
+                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                          >
+                            <input
+                              aria-invalid="false"
+                              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                              id="search"
+                              type="text"
+                              value=""
+                            />
+                            <div
+                              class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                            >
+                              <button
+                                aria-label="search"
+                                class="MuiButtonBase-root MuiIconButton-root"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <span
+                                  class="MuiIconButton-label"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="MuiSvgIcon-root"
+                                    focusable="false"
+                                    viewBox="0 0 24 24"
+                                  >
+                                    <path
+                                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                                    />
+                                  </svg>
+                                </span>
+                                <span
+                                  class="MuiTouchRipple-root"
+                                />
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <table
+                      class="MuiTable-root"
+                    >
+                      <thead
+                        class="MuiTableHead-root"
+                      >
+                        <tr
+                          class="MuiTableRow-root MuiTableRow-head"
+                        >
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                            scope="col"
+                          >
+                            <span
+                              aria-disabled="false"
+                              class="MuiButtonBase-root MuiTableSortLabel-root"
+                              role="button"
+                              tabindex="0"
+                            >
+                              VIN
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                                />
+                              </svg>
+                            </span>
+                          </th>
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                            scope="col"
+                          >
+                            Actions
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody
+                        class="MuiTableBody-root"
+                      >
+                        <tr
+                          class="MuiTableRow-root"
+                        >
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                          >
+                            <a
+                              href="/vehicle-status/USWESTVIN12345678"
+                            >
+                              USWESTVIN12345678
+                            </a>
+                          </td>
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                          >
+                            No actions
+                          </td>
+                        </tr>
+                        <tr
+                          class="MuiTableRow-root"
+                        >
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                          >
+                            <a
+                              href="/vehicle-status/USWESTVIN12345679"
+                            >
+                              USWESTVIN12345679
+                            </a>
+                          </td>
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                          >
+                            No actions
+                          </td>
+                        </tr>
+                        <tr
+                          class="MuiTableRow-root"
+                        >
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                          >
+                            <a
+                              href="/vehicle-status/USWESTVIN12345670"
+                            >
+                              USWESTVIN12345670
+                            </a>
+                          </td>
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                          >
+                            No actions
+                          </td>
+                        </tr>
+                      </tbody>
+                      <tfoot
+                        class="MuiTableFooter-root"
+                      >
+                        <tr
+                          class="MuiTableRow-root MuiTableRow-footer"
+                        >
+                          <td
+                            class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                            colspan="8"
+                          >
+                            <div
+                              class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                            >
+                              <div
+                                class="MuiTablePagination-spacer"
+                              />
+                              <p
+                                class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                              >
+                                Rows per page:
+                              </p>
+                              <div
+                                class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                              >
+                                <select
+                                  aria-label="rows per page"
+                                  class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                                >
+                                  <option
+                                    class="MuiTablePagination-menuItem"
+                                    value="5"
+                                  >
+                                    5
+                                  </option>
+                                  <option
+                                    class="MuiTablePagination-menuItem"
+                                    value="10"
+                                  >
+                                    10
+                                  </option>
+                                  <option
+                                    class="MuiTablePagination-menuItem"
+                                    value="25"
+                                  >
+                                    25
+                                  </option>
+                                  <option
+                                    class="MuiTablePagination-menuItem"
+                                    value="100"
+                                  >
+                                    100
+                                  </option>
+                                </select>
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="M7 10l5 5 5-5z"
+                                  />
+                                </svg>
+                              </div>
+                              <p
+                                class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                              >
+                                1-3 of 3
+                              </p>
+                              <div
+                                class="MuiTablePagination-actions"
+                              >
+                                <button
+                                  aria-label="Previous page"
+                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                                  disabled=""
+                                  tabindex="-1"
+                                  title="Previous page"
+                                  type="button"
+                                >
+                                  <span
+                                    class="MuiIconButton-label"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </button>
+                                <button
+                                  aria-label="Next page"
+                                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                                  disabled=""
+                                  tabindex="-1"
+                                  title="Next page"
+                                  type="button"
+                                >
+                                  <span
+                                    class="MuiIconButton-label"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </button>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      </tfoot>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            aria-labelledby="tab-1"
+            hidden=""
+            id="tabpanel-1"
+            role="tabpanel"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/Fleets/Status/index.jsx

@@ -0,0 +1,76 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router";
+import { useLocation } from "react-router-dom";
+import clsx from "clsx";
+import { Box, Tab, Tabs } from "@material-ui/core";
+
+import FleetVehiclesTab from "./VehiclesTab";
+import TabPanel from "../../Controls/TabPanel";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+
+const tabHashes = [
+  "updates",
+  "filters"
+]
+
+const FleetStatus = () => {
+  const { name } = useParams();
+  const classes = useStyles();
+  const { setTitle, setSitePath } = useStatusContext();
+  const { hash } = useLocation();
+  const [tabIndex, setTabIndex] = React.useState(0);
+
+  useEffect(() => {
+    const key = hash.replace("#", "")
+    const index = tabHashes.findIndex(element => element === key);
+    if (index >= 0) setTabIndex(index);
+  }, [hash]);
+
+  useEffect(() => {
+    const title = `Fleet ${name} Details`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Fleets",
+        link: "/fleets",
+      },
+      {
+        label: title,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [name]);
+
+  const handleTabChange = (event, newIndex) => {
+    setTabIndex(newIndex);
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
+          <Tab label="Vehicles" {...tabProps(0)} />
+          <Tab label="CAN Filters" {...tabProps(1)} />
+        </Tabs>
+      </Box>
+
+      <TabPanel value={tabIndex} index={0}>
+        <FleetVehiclesTab />
+      </TabPanel>
+
+      <TabPanel value={tabIndex} index={1}>
+        {/* <CANFiltersTab /> */}
+      </TabPanel>
+    </div >
+  );
+};
+
+function tabProps(index) {
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`
+  };
+}
+
+export default FleetStatus;

src/components/Fleets/Status/index.test.jsx

@@ -0,0 +1,39 @@
+jest.mock("../../Contexts/FleetContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock('@material-ui/core/utils/unstable_useId', () =>
+  jest.fn().mockReturnValue('mui-test-id'),
+);
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import { FleetProvider } from "../../Contexts/FleetContext";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { UserProvider, setToken } from "../../Contexts/UserContext";
+import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import FleetStatus from "./index"
+
+const renderCarStatus = async () => {
+  const { container } = render(
+    <FleetProvider>
+      <StatusProvider>
+        <UserProvider>
+          <BrowserRouter>
+            <FleetStatus />
+          </BrowserRouter>
+        </UserProvider>
+      </StatusProvider>
+    </FleetProvider>
+  );
+  await waitFor(() => { });
+  return container;
+};
+
+describe("FleetStatus", () => {
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderCarStatus();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/Fleets/Table/__snapshots__/index.test.jsx.snap

@@ -240,7 +240,7 @@ exports[`FleetTable Render 1`] = `
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
                     <a
-                      href="/fleet-details/US-WEST"
+                      href="/fleet/US-WEST"
                     >
                       US-WEST
                     </a>
@@ -258,7 +258,7 @@ exports[`FleetTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    0
+                    3
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -295,7 +295,7 @@ exports[`FleetTable Render 1`] = `
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
                     <a
-                      href="/fleet-details/US-CENTRAL"
+                      href="/fleet/US-CENTRAL"
                     >
                       US-CENTRAL
                     </a>
@@ -313,7 +313,7 @@ exports[`FleetTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    0
+                    3
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -350,7 +350,7 @@ exports[`FleetTable Render 1`] = `
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
                     <a
-                      href="/fleet-details/US-EAST"
+                      href="/fleet/US-EAST"
                     >
                       US-EAST
                     </a>
@@ -368,7 +368,7 @@ exports[`FleetTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    0
+                    3
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"

src/components/Fleets/Table/index.jsx

@@ -59,12 +59,17 @@ const MainForm = ({ vin }) => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const classes = useStyles();
-  const { setMessage, setTitle } = useStatusContext();
+  const { setMessage, setSitePath, setTitle } = useStatusContext();
   const { fleets, totalFleets, getFleets, deleteFleet } = useFleetContext();
   const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
 
   useEffect(() => {
     setTitle("Fleets");
+    setSitePath([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
     (async () => {
       try {
         if (!token) return;
@@ -131,7 +136,7 @@ const MainForm = ({ vin }) => {
     }
     if (hasRole([Roles.DELETE], groups)) {
       actions.push({
-        tip: `Delete ""${row.name}""`,
+        tip: `Delete "${row.name}"`,
         id: row.name,
         icon: <DeleteIcon aria-label={`Delete ${row.name}`} />
       })
@@ -184,7 +189,7 @@ const MainForm = ({ vin }) => {
           {fleets.map((row) => (
             <TableRow key={row.name}>
               <TableCell align="center">
-                <Link to={`/fleet-details/${row.name}`}>{row.name}</Link>
+                <Link to={`/fleet/${row.name}`}>{row.name}</Link>
               </TableCell>
               <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
               <TableCell align="center">{row.log_level}</TableCell>

src/components/Routes/SiteRoutes.jsx

@@ -14,8 +14,10 @@ const CarStatus = React.lazy(() => import("../Cars/Status"));
 const CarUpdateStatus = React.lazy(() => import("../Cars/UpdateStatus"));
 const Datascope = React.lazy(() => import("../Datascope/Home"));
 const FleetsList = React.lazy(() => import("../Fleets/Table"));
+const FleetStatus = React.lazy(() => import("../Fleets/Status"));
 const FleetAddForm = React.lazy(() => import("../Fleets/Add"));
 const FleetUpdateForm = React.lazy(() => import("../Fleets/Update"))
+const FleetAddVehicleForm = React.lazy(() => import("../Fleets/Status/Vehicles/Add"))
 const Home = React.lazy(() => import("../Home"));
 const Manifests = React.lazy(() => import("../Manifest/List"));
 const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
@@ -78,6 +80,22 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.READ, Roles.CREATE]}
         />
+        <AuthRoute
+          path="/fleet/:name/vehicle-add"
+          render={() => <FleetAddVehicleForm />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
+        <AuthRoute
+          path="/fleet/:name"
+          render={() => <FleetStatus />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          roles={[Roles.READ, Roles.CREATE]}
+        />
         <AuthRoute
           path="/fleet-add"
           render={() => <FleetAddForm />}

src/services/__mocks__/fleetsAPI.js

@@ -1,27 +1,57 @@
-const data = [
+const fleets = [
-  { name: "US-WEST", log_level: "info", canbus: { enabled: true } },
+  {
-  { name: "US-CENTRAL", log_level: "warn", canbus: { enabled: false } },
+    name: "US-WEST",
-  { name: "US-EAST", log_level: "error", canbus: { enabled: true } },
+    log_level: "info",
+    canbus: { enabled: true },
+    vehicles: ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
+  },
+  {
+    name: "US-CENTRAL",
+    log_level: "warn",
+    canbus: { enabled: false },
+    vehicles: ["USCENTVIN12345678", "USCENTVIN12345679", "USCENTVIN12345670"]
+  },
+  {
+    name: "US-EAST",
+    log_level: "error",
+    canbus: { enabled: true },
+    vehicles: ["USEASTVIN12345678", "USEASTVIN12345679", "USEASTVIN12345670"]
+  },
 ];
 
+const vehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
+
 const fleetsAPI = {
   addFleet: async (fleet, token) => {
-    data.push(fleet);
+    fleets.push(fleet);
     return fleet;
   },
   getFleets: async (search, token) => {
-    return { data };
+    return {data: fleets};
   },
   updateFleet: async (name, fleet, token) => {
-    const index = data.findIndex(element => element.name === name);
+    const index = fleets.findIndex(element => element.name === name);
-    if (index >= 0) data[index] = fleet;
+    if (index >= 0) fleets[index] = fleet;
     return fleet;
   },
   deleteFleet: async (name, token) => {
-    const index = data.findIndex(element => element.name === name);
+    const index = fleets.findIndex(element => element.name === name);
-    if (index >= 0) data.splice(index, 1);
+    if (index >= 0) fleets.splice(index, 1);
     return name;
   },
+
+  getFleetVehicles: async (name, search, token) => {
+    return {data: vehicles};
+  },
+  addFleetVehicle: async (name, vehicle, token) => {
+    vehicles.push(vehicle.vin);
+    return vehicle;
+  },
+  deleteFleetVehicle: async (name, vehicle, token) => {
+    const index = vehicles.findIndex(element => element === vehicle.vin);
+    if (index >= 0) vehicles.splice(index, 1);
+    return vehicle;
+  }
 };
 
 export default fleetsAPI;

src/services/fleetsAPI.js

@@ -44,6 +44,34 @@ const fleetsAPI = {
         getAuthHeaderOptions(token)
       )
     }).then(fetchRespHandler),
+
+  getFleetVehicles: async (name, search, token) =>
+    fetch(addQueryParams(`${API_ENDPOINT}/fleet/${name}/vehicles`, search), {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      )
+    }).then(fetchRespHandler),
+
+  addFleetVehicle: async (name, vehicle, token) =>
+    fetch(`${API_ENDPOINT}/fleet/${name}/vehicle`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(vehicle)
+    }).then(fetchRespHandler),
+
+  deleteFleetVehicle: async (name, vehicle, token) =>
+    fetch(`${API_ENDPOINT}/fleet/${name}/vehicle/${vehicle.vin}`, {
+      method: "DELETE",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      )
+    }).then(fetchRespHandler),
 };
 
 export default fleetsAPI;