feat(dashboard): add reports

apps/dashboard/src/components/shell/page-header.tsx

@@ -1,16 +1,37 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+} from "@basango/ui/components/breadcrumb";
 import { Separator } from "@basango/ui/components/separator";
 import { SidebarTrigger } from "@basango/ui/components/sidebar";
 
+import { Show } from "#dashboard/components/shell/show";
 import { ThemeToggle } from "#dashboard/components/theme-toggle";
 
-export function PageHeader() {
+type Props = {
+  title?: string | React.ReactNode;
+};
+
+export function PageHeader({ title }: Props) {
   return (
-    <header className="border-b flex h-16 shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-      <div className="flex items-center gap-2 px-4">
+    <header className="flex h-16 shrink-0 items-center justify-between gap-2">
+      <div className="flex items-center gap-2">
         <SidebarTrigger className="-ml-1" />
-        <Separator className="mr-2 data-[orientation=vertical]:h-4" orientation="vertical" />
+
+        <Show when={title !== undefined}>
+          <Separator className="mr-2 data-[orientation=vertical]:h-4" orientation="vertical" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem className="hidden md:block">
+                <BreadcrumbPage>{title}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </Show>
       </div>
-      <div className="flex items-center gap-2 px-4">
+      <div className="flex items-center gap-2">
         <ThemeToggle />
       </div>
     </header>

apps/dashboard/src/components/shell/page-layout.tsx

@@ -1,31 +1,19 @@
 import React from "react";
 
+import { PageHeader } from "#dashboard/components/shell/page-header";
+
 interface PageProps {
   children: React.ReactNode;
   title?: string | React.ReactNode;
-  leading?: string | React.ReactNode;
+  header?: React.ReactNode;
 }
 
 export const PageLayout = (props: React.PropsWithChildren<PageProps>) => {
-  const { title, leading, children } = props;
-
+  const { title, header = <PageHeader title={title} />, children } = props;
   return (
-    <div className="flex flex-1 flex-col gap-4 p-4">
-      <div className="container mx-auto space-y-4">
-        {title && (
-          <div className="mb-8 flex items-center justify-between space-y-4">
-            <div>
-              <h1 className="scroll-m-20 text-2xl font-extrabold tracking-tight text-balance flex items-center gap-2 justify-start">
-                {title}
-              </h1>
-              {leading && (
-                <p className="text-muted-foreground text-lg wrap-break-words">{leading}</p>
-              )}
-            </div>
-          </div>
-        )}
-        {children}
-      </div>
+    <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+      {header}
+      {children}
     </div>
   );
 };

apps/dashboard/src/components/shell/show.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+
+export interface ShowProps<T> {
+  when: T | null | undefined;
+  fallback?: React.ReactNode;
+  children: React.ReactNode | ((props: T) => React.ReactNode);
+}
+
+export function Show<T>(props: ShowProps<T>): React.ReactNode {
+  const { when, fallback, children } = props;
+  let result: React.ReactNode;
+
+  if (!when) {
+    result = fallback;
+  } else {
+    result = typeof children === "function" ? children(when) : children;
+  }
+
+  return result;
+}