alert level has a complete form

+ alert level now has entry for country and volcano name
+ widget now has a submit button
+ now has a refresh button that only appears when something is submitted
+ adjusted number of columns in grid layout
+ other small sizing adjustments in canvas

client/src/components/Canvas/views/Home.jsx

@@ -9,23 +9,27 @@ import { RemoteSensing } from "./HomeTabs/RemoteSensing";
 import { CancelButton } from "../CanvasComponents/CancelButton";
 import { SaveButton } from "../CanvasComponents/SaveButton";
 import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
+import { v4 as uuid } from 'uuid';
+
 
 export default function Home({...props}) {
   // deconstructing props
   const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
     isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
 
-  const onAddWidget = (ID) => {
+  const onAddWidget = (ID, w, h, minw, minh, maxw, maxh) => {
     setLayout(prev => [
       ...prev,
       {
         i: ID,
         x: (prev.length * 3) % 12,
         y: Infinity,
-        w: 2, 
-        h: 5,
-        minW: 2,
-        minH: 5,
+        w: w, 
+        h: h,
+        minW: minw,
+        minH: minh,
+        maxW: maxw,
+        maxH: maxh,
         static: false,
         resizeHandles: ['se']
       }
@@ -33,6 +37,15 @@ export default function Home({...props}) {
     onEditWidgets();
   };
 
+  function appendWidget(name, w, h, minw, minh, maxw, maxh) {
+    const newID = uuid();      // could be replaced with something else like guid
+    setWidgetArray([           // updating widget array containing info on the types of widgets
+      ...widgetArray,
+      {i: newID, widget: name }
+    ]);
+    onAddWidget(newID, w, h, minw, minh, maxw, maxh);       // updating array containing info on layout of widgets
+  }
+
   const onEditWidgets = () => {
     console.log("widgets are now editable");
     setOriginalLayout(layout); // Backup layout before editing
@@ -87,7 +100,7 @@ export default function Home({...props}) {
 
   // Prop Forwarding
   const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray };
-  const settingsButtonProps = { onAddWidget, onEditWidgets, onDeleteWidgets, setWidgetArray, widgetArray };
+  const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget };
   
   return (
     /* HEADER */
@@ -109,7 +122,7 @@ export default function Home({...props}) {
 				top="0"
         zIndex="dropdown" // zIndex: 1100
 				bg="base200"
-				px={6}
+				px={5}
 				pt={3}
 				align="center"
 				justify="space-between"

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -13,6 +13,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
 
   console.log("widgetArray: ", widgetArray);
   console.log("layout: ", layout);
+
   if (widgetArray.length && layout.length) {
     const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
     merged = layout.map(item => {
@@ -29,17 +30,16 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         useCSSTransforms={false}  // remove the sliding animation of the widgets
         className="layout"
         layout={layout}
-        cols={12} // Total columns in grid
-        rowHeight={30} //Height of a single row in px
+        cols={16} // Total columns in grid
+        rowHeight={30} // Height of a single row in px
         isBounded={true} // Total width of the grid
-        margin={[10, 10]} // [horizontal, vertical] gap
+        margin={[15, 5]} // [horizontal, vertical] gap
         onLayoutChange={onLayoutChange}
         draggableHandle=".widget-handle" // Make only the header draggable
         onDragStart={handleDragStart}
         onDragStop={handleDragStop}
         position="relative"
         resizeHandle={<CustomResizeHandle isVisable={isEditable} />}
-        isResizable={isEditable}
       >
         {merged.map((item) => {
           const Widget = item.widget;