dashboard

src/app/dashboard/page.tsx

@@ -1,8 +1,72 @@
-import getSession from "@/hooks/getSession";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { CircleCheckBig, Cpu, MemoryStick, TriangleAlert } from "lucide-react";
+import { ChartAreaGradient } from "./chart";
+import { Progress } from "@/components/ui/progress";
 
-export default async function Dashboard() {
-  const session = await getSession();
+export function generateHourlyData() {
+  const result = [];
+  for (let hour = 24; hour >= 0; hour--) {
+    result.push({
+      hour: hour,
+      cpu: Math.floor(Math.random() * 100), // random CPU usage between 0-99
+      ram: Math.floor(Math.random() * 100), // random RAM usage between 0-99
+    });
+  }
+  return result;
+}
+
+
+export function SummaryCard({children, value, icon, className}: {children: React.ReactNode, value: string, icon: React.ElementType, className?: string}) {
+  const Icon = icon;
   return (
-    <h1>test</h1>
+    <Card className="h-24 flex flex-row items-center">
+      <div className="mx-6">
+        <Label className="text-md font-bold text-foreground">{children}</Label>
+        <Label className={cn("text-2xl font-bold", className)}>{value}</Label>
+      </div>
+      <Icon className={cn("ml-auto mr-6", className)} size={32} />
+    </Card>
+  )
+}
+
+export function Summary({value, children}: {value: number, children: React.ReactNode}) {
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <div className="justify-between flex">
+        <Label className="text-md">{children}</Label>
+        <Label className="text-md">{value}%</Label>
+      </div>
+      <Progress value={value} />
+    </div>
+  );
+}
+
+export default async function Dashboard() {
+  // const session = await getSession();
+  const d = generateHourlyData();
+  return (
+    <div className="w-full flex flex-col gap-10">
+      <div className="grid gap-4 w-full grid-cols-2 xl:grid-cols-4">
+        <SummaryCard className="text-chart-3" value="69" icon={CircleCheckBig}>Online</SummaryCard>
+        <SummaryCard className="text-chart-4" value="2" icon={TriangleAlert}>Issues</SummaryCard>
+        <SummaryCard className="text-chart-2" value="52%" icon={Cpu}>Avg CPU Usage</SummaryCard>
+        <SummaryCard className="text-chart-1" value="37%" icon={MemoryStick}>Avg Memory Usage</SummaryCard>
+      </div>
+
+      <div className="w-full h-96 flex gap-5 flex-col md:flex-row">
+        <ChartAreaGradient chartData={d} />
+        <Card>
+          <CardHeader>
+            <CardTitle>System Overview</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-6 w-full md:w-96">
+            <Summary value={20}>Average CPU Usage</Summary>
+            <Summary value={69}>Average Memory Usage</Summary>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
   )
 }

src/app/globals.css

@@ -190,8 +190,8 @@
   --border: oklch(0.2197 0.0466 261.6537);
   --input: oklch(0.3923 0.0613 254.3914);
   --ring: oklch(0.7182 0.1105 239.7840);
-  --chart-1: oklch(0.5854 0.2041 277.1173);
-  --chart-2: oklch(0.6231 0.1880 259.8145);
+  --chart-1: oklch(55.013% 0.25888 284.728);
+  --chart-2: oklch(56.989% 0.2195 266.301);
   --chart-3: oklch(0.6271 0.1699 149.2138);
   --chart-4: oklch(0.5771 0.2152 27.3250);
   --chart-5: oklch(0.6658 0.1574 58.3183);
@@ -277,6 +277,12 @@
   --tracking-widest: calc(var(--tracking-normal) + 0.1em);
 }
 
+html, body {
+  min-height: 100dvh;
+  height: auto;
+  overflow: unset;
+}
+
 body {
   letter-spacing: var(--tracking-normal);
 }

src/components/AppLayout.tsx

@@ -14,14 +14,17 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     showSidebar ?
     <SidebarProvider>
-      <AppSidebar />
-      <main>
-        <SidebarTrigger />
-        {children}
-      </main>
+      <div className="flex min-h-[100dvh] w-full">
+        <AppSidebar />
+        <main className="flex-1 flex flex-col min-h-0">
+          <SidebarTrigger />
+          <div className="px-4 lg:px-10 flex-1 min-h-0">{children}</div>
+        </main>
+      </div>
     </SidebarProvider>
+
     :
-      <main>
+      <main className="min-h-[100dvh]">
         {children}
       </main>
   );

src/components/ui/sidebar.tsx

@@ -139,7 +139,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-[100dvh] w-full",
             className
           )}
           {...props}
@@ -187,7 +187,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden h-[100dvh] overflow-auto"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,