Setup/obs

app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { ChartAreaInteractive } from "@/components/chart-area-interactive";
+import { DataTable } from "@/components/data-table";
+import { SectionCards } from "@/components/section-cards";
+
+import data from "./data.json";
+import { useState } from "react";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { User2Icon } from "lucide-react";
+
+export default function Page() {
+  const [user, setUser] = useState(null);
+
+  if (!user) {
+    return (
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia>
+            <User2Icon />
+          </EmptyMedia>
+          <EmptyTitle>No User Data</EmptyTitle>
+          <EmptyDescription>
+            Please add a user to see the data.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          You can add a user by clicking the "Add User" button.
+        </EmptyContent>
+      </Empty>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="@container/main flex flex-col gap-2">
+        <div className="flex flex-col gap-4">
+          <SectionCards />
+          <div>
+            <ChartAreaInteractive />
+          </div>
+          <DataTable data={data} />
+        </div>
+      </div>
+    </div>
+  );
+}

app/(dashboard)/layout.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/app-sidebar";
+import { SiteHeader } from "@/components/site-header";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const DashboardLayout = (props: Props) => {
+  return (
+    <SidebarProvider>
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <main className="p-6">{props.children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+};
+
+export default DashboardLayout;

app/(dashboard)/projects/page.tsx

@@ -0,0 +1,33 @@
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { FolderIcon } from "lucide-react";
+
+const Project = () => {
+  return (
+    <Empty className="bg-border h-120">
+      <EmptyHeader>
+        <EmptyMedia
+          variant="icon"
+          className="p-1 border-2 border-current/50 rounded-md"
+        >
+          <FolderIcon className="h-12 w-12 text-muted-foreground" />
+        </EmptyMedia>
+        <EmptyTitle>No Projects Found</EmptyTitle>
+        <EmptyDescription>
+          There are currently no projects to display.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent className="text-secondary">
+        Get started by creating a new project.
+      </EmptyContent>
+    </Empty>
+  );
+};
+
+export default Project;