diff --git a/src/app/(pages)/dashboard/layout.tsx b/src/app/(pages)/dashboard/layout.tsx
index 330bc52..dc388a5 100644
--- a/src/app/(pages)/dashboard/layout.tsx
+++ b/src/app/(pages)/dashboard/layout.tsx
@@ -18,7 +18,7 @@ const DashboardLayout = ({
- {children}
+
{children}
diff --git a/src/app/(pages)/dashboard/org/layout.tsx b/src/app/(pages)/dashboard/org/layout.tsx
new file mode 100644
index 0000000..e6bd055
--- /dev/null
+++ b/src/app/(pages)/dashboard/org/layout.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { ReactElement, ReactNode } from "react";
+import { useOrganizationContext } from "@/app/provider/organization-provider";
+import { Organization } from "@/app/types/org/organization";
+import { OrganizationState } from "@/app/store/organization-store";
+import NoOrganizationSelected from "@/components/dashboard/no-organization-selected";
+
+/**
+ * The layout for the organization pages.
+ *
+ * @param children the children to render
+ * @returns the layout jsx
+ */
+const OrganizationLayout = ({
+ children,
+}: Readonly<{
+ children: ReactNode;
+}>): ReactElement => {
+ const selectedOrganization: Organization | undefined =
+ useOrganizationContext((state: OrganizationState) => state.selected);
+ return (
+
+ {selectedOrganization ? children : }
+
+ );
+};
+export default OrganizationLayout;
diff --git a/src/app/(pages)/dashboard/org/status-pages/page.tsx b/src/app/(pages)/dashboard/org/status-pages/page.tsx
new file mode 100644
index 0000000..06ddb4a
--- /dev/null
+++ b/src/app/(pages)/dashboard/org/status-pages/page.tsx
@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+
+const StatusPagesPage = (): ReactElement => BOB?;
+export default StatusPagesPage;
diff --git a/src/app/(pages)/dashboard/page.tsx b/src/app/(pages)/dashboard/page.tsx
index 800bda5..6ce53fd 100644
--- a/src/app/(pages)/dashboard/page.tsx
+++ b/src/app/(pages)/dashboard/page.tsx
@@ -14,10 +14,6 @@ const DashboardPage = (): ReactElement => {
const user: User | undefined = useUserContext(
(state: UserState) => state.user
);
- return (
-
- Hi there {user?.username}, welcome to Pulse App!
-
- );
+ return Hi there {user?.username}, welcome to Pulse App!;
};
export default DashboardPage;
diff --git a/src/app/(pages)/dashboard/user/billing/page.tsx b/src/app/(pages)/dashboard/user/billing/page.tsx
index 21c8975..8233f4f 100644
--- a/src/app/(pages)/dashboard/user/billing/page.tsx
+++ b/src/app/(pages)/dashboard/user/billing/page.tsx
@@ -10,7 +10,7 @@ import UserSettingsHeader from "@/components/dashboard/user/user-settings-header
* @return the page jsx
*/
const UserBillingPage = (): ReactElement => (
-
+
{/* Content */}
diff --git a/src/app/(pages)/dashboard/user/profile/page.tsx b/src/app/(pages)/dashboard/user/profile/page.tsx
index d05b889..989307b 100644
--- a/src/app/(pages)/dashboard/user/profile/page.tsx
+++ b/src/app/(pages)/dashboard/user/profile/page.tsx
@@ -14,7 +14,7 @@ import UserSettingsHeader from "@/components/dashboard/user/user-settings-header
* @return the page jsx
*/
const UserProfilePage = (): ReactElement => (
-
+
{/* Content */}
diff --git a/src/app/(pages)/dashboard/user/settings/page.tsx b/src/app/(pages)/dashboard/user/settings/page.tsx
index 7c7f980..966ccdc 100644
--- a/src/app/(pages)/dashboard/user/settings/page.tsx
+++ b/src/app/(pages)/dashboard/user/settings/page.tsx
@@ -12,7 +12,7 @@ import DevicesSetting from "@/components/dashboard/user/settings/device/devices-
* @return the page jsx
*/
const UserSettingsPage = (): ReactElement => (
-
+
{/* Content */}
diff --git a/src/app/provider/organization-provider.tsx b/src/app/provider/organization-provider.tsx
index 018384e..7eca8e3 100644
--- a/src/app/provider/organization-provider.tsx
+++ b/src/app/provider/organization-provider.tsx
@@ -2,7 +2,6 @@
import { ReactNode, useCallback, useContext, useEffect, useRef } from "react";
import { UserState } from "@/app/store/user-store";
-import { User } from "@/app/types/user/user";
import { StoreApi, useStore } from "zustand";
import createOrganizationStore, {
OrganizationContext,
@@ -24,9 +23,6 @@ const OrganizationProvider = ({ children }: { children: ReactNode }) => {
const session: Session | undefined = useUserContext(
(state: UserState) => state.session
);
- const user: User | undefined = useUserContext(
- (state: UserState) => state.user
- );
const storeRef = useRef();
if (!storeRef.current) {
diff --git a/src/components/dashboard/dashboard-header.tsx b/src/components/dashboard/dashboard-header.tsx
new file mode 100644
index 0000000..7c77098
--- /dev/null
+++ b/src/components/dashboard/dashboard-header.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { ReactElement } from "react";
+import { User } from "@/app/types/user/user";
+import { useUserContext } from "@/app/provider/user-provider";
+import { UserState } from "@/app/store/user-store";
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+
+/**
+ * The props for this header.
+ */
+type DashboardHeaderProps = {
+ /**
+ * The title of this header.
+ */
+ title: string;
+
+ /**
+ * The breadcrumb of this header.
+ */
+ breadcrumb: ReactElement;
+};
+
+/**
+ * The header to display
+ * on dashboard pages.
+ *
+ * @param props the header props
+ * @return the header jsx
+ */
+const DashboardHeader = ({
+ title,
+ breadcrumb,
+}: DashboardHeaderProps): ReactElement => {
+ const user: User | undefined = useUserContext(
+ (state: UserState) => state.user
+ );
+ return (
+
+
{title}
+
+
+
+
+
+ Dashboard
+
+
+
+ {breadcrumb}
+
+
+ {title}
+
+
+
+
+ );
+};
+export default DashboardHeader;
diff --git a/src/components/dashboard/no-organization-selected.tsx b/src/components/dashboard/no-organization-selected.tsx
new file mode 100644
index 0000000..213d69d
--- /dev/null
+++ b/src/components/dashboard/no-organization-selected.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+
+/**
+ * No organization selected.
+ *
+ * @return the screen jsx
+ */
+const NoOrganizationSelected = (): ReactElement => (
+
+
No Organization ):
+
+ It's a little empty here. Create an organization to get
+ started!
+
+
+);
+export default NoOrganizationSelected;
diff --git a/src/components/dashboard/sidebar/organization-selector.tsx b/src/components/dashboard/sidebar/organization-selector.tsx
index 1358aa2..abe32d5 100644
--- a/src/components/dashboard/sidebar/organization-selector.tsx
+++ b/src/components/dashboard/sidebar/organization-selector.tsx
@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement, useState } from "react";
import { ChevronsUpDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
diff --git a/src/components/dashboard/sidebar/sidebar-links.tsx b/src/components/dashboard/sidebar/sidebar-links.tsx
index 039d152..7dd34a3 100644
--- a/src/components/dashboard/sidebar/sidebar-links.tsx
+++ b/src/components/dashboard/sidebar/sidebar-links.tsx
@@ -28,32 +28,32 @@ const links: SidebarLink[] = [
{
name: "Status Pages",
icon: ,
- href: "/dashboard/status-pages",
+ href: "/dashboard/org/status-pages",
},
{
name: "Automations",
icon: ,
- href: "/dashboard/automations",
+ href: "/dashboard/org/automations",
},
{
name: "Incidents",
icon: ,
- href: "/dashboard/incidents",
+ href: "/dashboard/org/incidents",
},
{
name: "Insights",
icon: ,
- href: "/dashboard/insights",
+ href: "/dashboard/org/insights",
},
{
name: "Audit Logs",
icon: ,
- href: "/dashboard/audit",
+ href: "/dashboard/org/audit",
},
{
name: "Settings",
icon: ,
- href: "/dashboard/settings",
+ href: "/dashboard/org/settings",
},
];
diff --git a/src/components/dashboard/sidebar/user-menu/user-menu-links.tsx b/src/components/dashboard/sidebar/user-menu/user-menu-links.tsx
index e78baa0..0174c6b 100644
--- a/src/components/dashboard/sidebar/user-menu/user-menu-links.tsx
+++ b/src/components/dashboard/sidebar/user-menu/user-menu-links.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { userMenuLinks } from "@/components/dashboard/sidebar/user-menu/user-menu";
import Link from "next/link";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";