added tons of files for component functionality; manual component adding added temporarily

src/pages/Device.tsx

@@ -1,5 +1,5 @@
-import { Grid2 } from "@mui/material";
-import { Device, User } from "models";
+import { Button, Grid2 } from "@mui/material";
+import { Component, Device, User } from "models";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { useDeviceAPI, useGlobalState, useSnackbar } from "providers";
 import { useEffect, useState } from "react";
@@ -12,6 +12,8 @@ import DeviceActions from "device/DeviceActions";
 import { pond } from "protobuf-ts/pond";
 import { cloneDeep } from "lodash";
 import DeviceOverview from "device/DeviceOverview";
+import { DeviceAvailabilityMap, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
+import AddComponentManualDialog from "component/AddComponentManualDialog";
 
 export default function DevicePage() {
   const deviceAPI = useDeviceAPI()
@@ -29,6 +31,13 @@ export default function DevicePage() {
   const [cellularUsage, _setCellularUsage] = useState<number>(0);
   const [cellularStatus, _setCellularStatus] = useState<string>("");
 
+  const [availablePositions, setAvailablePositions] = useState<DeviceAvailabilityMap>(new Map());
+  const [availableOffsets, setAvailableOffsets] = useState<OffsetAvailabilityMap>(new Map());
+
+  const [components, setComponents] = useState<Map<string, Component>>(new Map());
+
+  const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
+
   const loadDevice = () => {
     if (loading) return
     // if (state?.device && parseInt(state.device.settings.deviceId) === device.id()) return
@@ -44,6 +53,7 @@ export default function DevicePage() {
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
       setDevice(Device.any(resp.data.device))
+      
       let newPermissions: pond.Permission[] = []
       resp.data.permissions.forEach(perm => {
         if (typeof(perm) === "string" ) {
@@ -61,7 +71,7 @@ export default function DevicePage() {
       setDevice(Device.create());
       // setComponents(new Map());
       // setInteractions([]);
-      // setAvailablePositions(new Map());
+      setAvailablePositions(new Map());
       setPermissions([]);
       setPreferences(pond.UserPreferences.create());
       // setInvalidDevice(true);
@@ -119,15 +129,25 @@ export default function DevicePage() {
           <SmartBreadcrumb />
         </Grid2>
         <Grid2>
-        <DeviceActions
-          device={device}
-          isPaused={false}
-          isLoading={loading}
-          permissions={permissions}
-          preferences={preferences}
-          toggleNotificationPreference={toggleNotificationPreference}
-          refreshCallback={loadDevice}
-        />
+          <AddComponentManualDialog 
+            device={device.id()}
+            open={addComponentManualDialogOpen}
+            onClose={() => setAddComponentManualDialogOpen(false)}
+          />
+          <Button onClick={() => setAddComponentManualDialogOpen(true)}>
+            Manual Comp
+          </Button>
+          <DeviceActions
+            device={device}
+            isPaused={false}
+            isLoading={loading}
+            permissions={permissions}
+            preferences={preferences}
+            toggleNotificationPreference={toggleNotificationPreference}
+            refreshCallback={loadDevice} 
+            availablePositions={availablePositions} 
+            availableOffsets={availableOffsets}
+          />
         </Grid2>
       </Grid2>
       <DeviceOverview