do some changes to prepare for org pages

src/app/(pages)/dashboard/layout.tsx

@@ -18,7 +18,7 @@ const DashboardLayout = ({
         <OrganizationProvider>
             <div className="min-h-screen flex">
                 <Sidebar />
-                {children}
+                <div className="w-full mx-7 my-6">{children}</div>
             </div>
         </OrganizationProvider>
     </UserProvider>

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 (
+        <div className="h-full">
+            {selectedOrganization ? children : <NoOrganizationSelected />}
+        </div>
+    );
+};
+export default OrganizationLayout;

src/app/(pages)/dashboard/org/status-pages/page.tsx

@@ -0,0 +1,4 @@
+import { ReactElement } from "react";
+
+const StatusPagesPage = (): ReactElement => <main>BOB?</main>;
+export default StatusPagesPage;

src/app/(pages)/dashboard/page.tsx

@@ -14,10 +14,6 @@ const DashboardPage = (): ReactElement => {
     const user: User | undefined = useUserContext(
         (state: UserState) => state.user
     );
-    return (
-        <main className="p-4">
-            Hi there {user?.username}, welcome to Pulse App!
-        </main>
-    );
+    return <main>Hi there {user?.username}, welcome to Pulse App!</main>;
 };
 export default DashboardPage;

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 => (
-    <main className="w-[47rem] px-10 py-7 flex flex-col gap-5">
+    <main className="w-[47rem] flex flex-col gap-5">
         <UserSettingsHeader title="Billing" />
 
         {/* Content */}

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 => (
-    <main className="w-[47rem] px-10 py-7 flex flex-col gap-5">
+    <main className="w-[47rem] flex flex-col gap-5">
         <UserSettingsHeader title="My Profile" />
 
         {/* Content */}

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 => (
-    <main className="w-[47rem] px-10 py-7 flex flex-col gap-5">
+    <main className="w-[47rem] flex flex-col gap-5">
         <UserSettingsHeader title="Settings" />
 
         {/* Content */}

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<OrganizationStore>();
     if (!storeRef.current) {

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 (
+        <div className="flex flex-col gap-1.5 select-none">
+            <h1 className="text-2xl font-bold">{title}</h1>
+
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/dashboard" draggable={false}>
+                            Dashboard
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    {breadcrumb}
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbPage>{title}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+};
+export default DashboardHeader;

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 => (
+    <div className="h-full flex flex-col gap-2 justify-center text-center items-center">
+        <h1 className="text-2xl font-bold">No Organization ):</h1>
+        <p className="max-w-72 opacity-75">
+            It&apos;s a little empty here. Create an organization to get
+            started!
+        </p>
+    </div>
+);
+export default NoOrganizationSelected;

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 {

src/components/dashboard/sidebar/sidebar-links.tsx

@@ -28,32 +28,32 @@ const links: SidebarLink[] = [
     {
         name: "Status Pages",
         icon: <ClipboardIcon />,
-        href: "/dashboard/status-pages",
+        href: "/dashboard/org/status-pages",
     },
     {
         name: "Automations",
         icon: <WrenchIcon />,
-        href: "/dashboard/automations",
+        href: "/dashboard/org/automations",
     },
     {
         name: "Incidents",
         icon: <FireIcon />,
-        href: "/dashboard/incidents",
+        href: "/dashboard/org/incidents",
     },
     {
         name: "Insights",
         icon: <ChartBarSquareIcon />,
-        href: "/dashboard/insights",
+        href: "/dashboard/org/insights",
     },
     {
         name: "Audit Logs",
         icon: <PencilSquareIcon />,
-        href: "/dashboard/audit",
+        href: "/dashboard/org/audit",
     },
     {
         name: "Settings",
         icon: <Cog6ToothIcon />,
-        href: "/dashboard/settings",
+        href: "/dashboard/org/settings",
     },
 ];
 

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";