Heading

package.json

@@ -32,12 +32,14 @@
     "eslint-config-next": "13.4.3",
     "home-assistant-js-websocket": "8.0.1",
     "materialdesign-js": "1.0.0",
+    "moment": "2.29.4",
     "mui-chips-input": "2.0.1",
     "next": "13.4.3",
     "next-auth": "4.22.1",
     "prisma": "4.14.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-moment": "1.1.3",
     "tss-react": "4.8.4",
     "typescript": "5.0.4",
     "use-long-press": "3.1.3"

prisma/schema.prisma

@@ -28,12 +28,21 @@ model Dashboard {
   description   String?
   userId        String
   user          User            @relation(fields: [userId], references: [id], onDelete: Cascade)
-  sections      Section[]
+  headerItems   HeaderItem[]
   homeAssistant HomeAssistant[]
+  sections      Section[]
 
   @@index([userId, position], name: "userId_position_unique")
 }
 
+model HeaderItem {
+  id          String     @id @default(cuid())
+  position    Int        @default(10)
+  type        String
+  dashboardId String?
+  dashboard   Dashboard? @relation(fields: [dashboardId], references: [id])
+}
+
 model Section {
   id          String    @id @default(cuid())
   position    Int       @default(10)

src/app/dashboards/[dashboardId]/edit/page.tsx

@@ -1,5 +1,6 @@
 import type {
   Dashboard as DashboardModel,
+  HeaderItem as HeaderItemModel,
   HomeAssistant as HomeAssistantModel,
   User as UserModel,
 } from "@prisma/client";
@@ -10,6 +11,7 @@ import { redirect } from "next/navigation";
 import { AccessDenied } from "@/components/AccessDenied";
 import { EditDashboard } from "@/components/dashboard/editors/Dashboard";
 import { prisma } from "@/utils/prisma";
+import { HeaderItemType } from "@/types/dashboard.type";
 
 export const metadata: Metadata = {
   title: "Edit Dashboard | Home Panel",
@@ -87,9 +89,59 @@ export default async function Page({
       },
     });
 
+  const headerItemsConfig: Array<HeaderItemModel> =
+    await prisma.headerItem.findMany({
+      where: {
+        dashboardId: params.dashboardId,
+      },
+    });
+
+  if (headerItemsConfig.length === 0) {
+    headerItemsConfig.push(
+      await prisma.headerItem.create({
+        data: {
+          dashboard: {
+            connect: {
+              id: params.dashboardId,
+            },
+          },
+          type: HeaderItemType.Spacer,
+          position: 0,
+        },
+      })
+    );
+    headerItemsConfig.push(
+      await prisma.headerItem.create({
+        data: {
+          dashboard: {
+            connect: {
+              id: params.dashboardId,
+            },
+          },
+          type: HeaderItemType.DateTime,
+          position: 10,
+        },
+      })
+    );
+    headerItemsConfig.push(
+      await prisma.headerItem.create({
+        data: {
+          dashboard: {
+            connect: {
+              id: params.dashboardId,
+            },
+          },
+          type: HeaderItemType.Spacer,
+          position: 20,
+        },
+      })
+    );
+  }
+
   return (
     <EditDashboard
       dashboardConfig={dashboardConfig}
+      headerItemsConfig={headerItemsConfig}
       homeAssistantConfig={homeAssistantConfig}
     />
   );

src/app/dashboards/[dashboardId]/page.tsx

@@ -28,6 +28,9 @@ export default async function Page({
       id: params.dashboardId,
     },
     include: {
+      headerItems: {
+        orderBy: { position: "asc" },
+      },
       sections: {
         include: {
           widgets: {

src/app/error.tsx

@@ -17,7 +17,14 @@ export default function Error({
 
   return (
     <main className={styles.main}>
-      <Stack direction="column" spacing={2}>
+      <Stack
+        direction="column"
+        spacing={2}
+        sx={{
+          margin: "2.5rem 2.5rem 0",
+          width: "100%",
+        }}
+      >
         <Typography component="h5" variant="h2">
           Something went wrong!
         </Typography>

src/app/layout.tsx

@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
 
 import { AccessDenied } from "@/components/AccessDenied";
 import { AuthProvider } from "@/providers/AuthProvider";
-import { Container } from "@/components/Container";
 import { DrawerComponent as Drawer } from "@/components/Drawer";
 import { MUIProvider } from "@/providers/MUIProvider";
 
@@ -38,7 +37,7 @@ export default async function RootLayout({
         <AuthProvider session={session}>
           <MUIProvider>
             <Drawer />
-            <Container>{session ? children : <AccessDenied />}</Container>
+            {session ? children : <AccessDenied />}
           </MUIProvider>
         </AuthProvider>
       </body>

src/components/dashboard/editors/Dashboard.tsx

@@ -1,36 +1,51 @@
 "use client";
 import type {
   Dashboard as DashboardModel,
+  HeaderItem as HeaderItemModel,
   HomeAssistant as HomeAssistantModel,
 } from "@prisma/client";
 import {
-  Typography,
   Card,
   CardContent,
-  Unstable_Grid2 as Grid2,
+  Divider,
   TextField,
+  Typography,
+  Unstable_Grid2 as Grid2,
 } from "@mui/material";
+import { MuiChipsInput } from "mui-chips-input";
 
-import { dashboardUpdate } from "@/utils/serverActions/dashboard";
+import {
+  dashboardHeaderUpdate,
+  dashboardUpdate,
+} from "@/utils/serverActions/dashboard";
 import { homeAssistantUpdateConfig } from "@/utils/serverActions/homeAssistant";
+import { useMemo } from "react";
 
 export function EditDashboard({
   dashboardConfig,
+  headerItemsConfig,
   homeAssistantConfig,
 }: {
   dashboardConfig: DashboardModel;
+  headerItemsConfig: Array<HeaderItemModel>;
   homeAssistantConfig: HomeAssistantModel;
 }): JSX.Element {
+  const headerItems = useMemo<Array<string>>(
+    () => headerItemsConfig.map((item) => item.type),
+    [headerItemsConfig]
+  );
+
   return (
     <Card
       sx={{
         display: "flex",
         flexDirection: "column",
-        height: "100%",
+        height: "fit-content",
         width: "100%",
+        margin: "2.5rem 2.5rem 0",
       }}
     >
-      <CardContent sx={{ flexGrow: 1 }}>
+      <CardContent>
         <Typography variant="h5">Edit Dashboard</Typography>
         <Grid2 container direction="column" sx={{ marginTop: "1rem" }}>
           <TextField
@@ -59,6 +74,7 @@ export function EditDashboard({
               )
             }
           />
+          <Divider sx={{ marginTop: "1rem", marginBottom: "1rem" }} />
           <Typography variant="h6" gutterBottom>
             Home Assistant
           </Typography>
@@ -73,6 +89,22 @@ export function EditDashboard({
               })
             }
           />
+          <Divider sx={{ marginTop: "1rem", marginBottom: "1rem" }} />
+          <Typography variant="h6" gutterBottom>
+            Header Items
+          </Typography>
+          <MuiChipsInput
+            name="headerItems"
+            label="Header Items"
+            margin="dense"
+            value={headerItems}
+            helperText={
+              headerItems.length > 0 ? "Double click to edit an item" : ""
+            }
+            onChange={async (data: Array<string>) => {
+              await dashboardHeaderUpdate(dashboardConfig.id, data);
+            }}
+          />
         </Grid2>
       </CardContent>
     </Card>

src/components/dashboard/editors/Section.tsx

@@ -23,8 +23,10 @@ export function EditSection({
       container
       direction="row"
       alignItems="center"
-      spacing={2}
-      sx={{ width: "100%" }}
+      sx={{
+        margin: "2.5rem 2.5rem 0",
+        width: "100%",
+      }}
       xs
     >
       <Grid2 xs sx={{ height: "100%" }}>

src/components/dashboard/editors/Widget.tsx

@@ -79,8 +79,10 @@ export function EditWidget({
       container
       direction="row"
       alignItems="center"
-      spacing={2}
-      sx={{ width: "100%" }}
+      sx={{
+        margin: "2.5rem 2.5rem 0",
+        width: "100%",
+      }}
       xs
     >
       <Grid2 xs sx={{ height: "100%" }}>

src/components/dashboard/views/Dashboard.tsx

@@ -1,6 +1,9 @@
 "use client";
+import { Unstable_Grid2 as Grid2, Stack } from "@mui/material";
+
 import type { DashboardModel } from "@/types/dashboard.type";
 import type { SectionModel } from "@/types/section.type";
+import { Heading } from "@/components/dashboard/views/Heading";
 import { HomeAssistantProvider } from "@/providers/HomeAssistantProvider";
 import { Section } from "@/components/dashboard/views/Section";
 
@@ -11,11 +14,22 @@ export function Dashboard({
 }): JSX.Element {
   return (
     <HomeAssistantProvider dashboardId={dashboard.id}>
-      <>
-        {dashboard.sections.map((section: SectionModel) => (
-          <Section key={section.id} data={section} />
-        ))}
-      </>
+      <Stack sx={{ width: "100%" }}>
+        <Heading dashboard={dashboard} />
+        <Grid2
+          container
+          direction="column"
+          alignContent="flex-start"
+          sx={{
+            overflowY: "auto",
+            width: "100%",
+          }}
+        >
+          {dashboard.sections.map((section: SectionModel) => (
+            <Section key={section.id} data={section} />
+          ))}
+        </Grid2>
+      </Stack>
     </HomeAssistantProvider>
   );
 }