Empty dashboard message

client/src/pages/dashboard/components/DashboardGrid/DashboardGrid.tsx

@@ -1,3 +1,4 @@
+import { GRID_WIDTH, GRID_H_SNAP } from '../../constants'
 import { useDashboardContext } from '../../contexts/DashboardContext'
 import { normalizeBoxes } from '../../utils/normalizeBoxes'
 import { NoDashboard } from '../NoDashboard'
@@ -6,9 +7,29 @@ import { GeneralBox } from './components/GeneralBox'
 export const DashboardGrid = () => {
 	const { isDashboardSelected, boxes, setBoxes } = useDashboardContext()
 
+	const addNewBox = () => {
+		const box = {
+			id: new Date().getTime().toString(),
+			x: 0,
+			y: 0,
+			w: GRID_WIDTH / 2,
+			h: GRID_H_SNAP * 20,
+		}
+
+		setBoxes((previous) => [box, ...previous])
+	}
+
 	return isDashboardSelected ? (
 		<div className="grid-sensors-container">
 			<div className="grid-sensors">
+				{boxes.length === 0 && (
+					<div className="empty">
+						<div>Empty dashboard</div>
+						<div>
+							<button onClick={() => addNewBox()}>Add box</button>
+						</div>
+					</div>
+				)}
 				{boxes.map((b) => (
 					<GeneralBox
 						box={b}

client/src/pages/dashboard/components/DashboardGrid/components/GeneralBox.tsx

@@ -1,6 +1,6 @@
 import { BoxDialContent } from './BoxDialContent'
 import { BoxGraphContent } from './BoxGraphContent'
-import { EditableBoxProps } from './EditableBox'
+import { EditableBox, EditableBoxProps } from './EditableBox'
 
 export const GeneralBox = (props: EditableBoxProps) => {
 	switch (props.box.data?.type) {
@@ -9,6 +9,10 @@ export const GeneralBox = (props: EditableBoxProps) => {
 		case 'graph':
 			return <BoxGraphContent {...props} data={props.box.data} />
 		default:
-			return <div>Unknown box type</div>
+			return (
+				<EditableBox {...props} onRefresh={() => null}>
+					<></>
+				</EditableBox>
+			)
 	}
 }