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