slight change

src/app/dashboard/chart.tsx

@@ -1,7 +1,14 @@
-"use client"
+"use client";
 
-import { TrendingUp } from "lucide-react"
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts"
+import { TrendingUp } from "lucide-react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from "recharts";
 
 import {
   Card,
@@ -10,13 +17,13 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@/components/ui/card";
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-} from "@/components/ui/chart"
+} from "@/components/ui/chart";
 
 const chartConfig = {
   cpu: {
@@ -27,9 +34,13 @@ const chartConfig = {
     label: "RAM",
     color: "var(--chart-1)",
   },
-} satisfies ChartConfig
+} satisfies ChartConfig;
 
-export function ChartAreaGradient({chartData}: {chartData: {hour: number, cpu: number, ram: number}[]}) {
+export function ChartAreaGradient({
+  chartData,
+}: {
+  chartData: { hour: number; cpu: number; ram: number }[];
+}) {
   return (
     <Card className="w-full h-96 sm:h-full">
       <CardHeader>
@@ -52,11 +63,17 @@ export function ChartAreaGradient({chartData}: {chartData: {hour: number, cpu: n
                 tickLine={false}
                 axisLine={false}
                 tickMargin={8}
-                tickFormatter={(value) => value+"h"}
+                tickFormatter={(value) => value + "h"}
                 height={34}
               />
 
-              <YAxis domain={[0, 200]} tickLine={false} axisLine={false} tickMargin={8} width={34} />
+              <YAxis
+                domain={[0, 200]}
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                width={34}
+              />
               <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
               <defs>
                 <linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
@@ -105,5 +122,5 @@ export function ChartAreaGradient({chartData}: {chartData: {hour: number, cpu: n
         </ChartContainer>
       </CardContent>
     </Card>
-  )
+  );
 }

src/app/dashboard/page.tsx

@@ -17,7 +17,6 @@ export function generateHourlyData() {
   return result;
 }
 
-
 export function SummaryCard({
   children,
   value,
@@ -36,16 +35,18 @@ export function SummaryCard({
         <Label className="text-md font-bold text-foreground">{children}</Label>
         <Label className={cn("text-2xl font-bold", className)}>{value}</Label>
       </div>
-      <Icon
-        className={cn("shrink-0", className)}
-        size={32}
-      />
+      <Icon className={cn("shrink-0", className)} size={32} />
     </Card>
   );
 }
 
-
-export function Summary({value, children}: {value: number, children: React.ReactNode}) {
+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">
@@ -67,7 +68,9 @@ export default async function Dashboard() {
           <span className="hidden sm:inline">Online Servers</span>
           <span className="inline sm:hidden">Online</span>
         </SummaryCard>
-        <SummaryCard className="text-chart-4" value="2" icon={TriangleAlert}>Issues</SummaryCard>
+        <SummaryCard className="text-chart-4" value="2" icon={TriangleAlert}>
+          Issues
+        </SummaryCard>
         <SummaryCard className="text-chart-2" value="52%" icon={Cpu}>
           <span className="hidden sm:inline">Avg CPU Usage</span>
           <span className="inline sm:hidden">CPU</span>
@@ -85,11 +88,13 @@ export default async function Dashboard() {
             <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>
+            <Summary value={20}>Average CPU</Summary>
+            <Summary value={69}>Average Memory</Summary>
+            <Summary value={69}>Storage</Summary>
+            <Summary value={69}>Average Network</Summary>
           </CardContent>
         </Card>
       </div>
     </div>
-  )
+  );
 }

src/app/login/page.tsx

@@ -54,7 +54,11 @@ export default function Login() {
   return (
     <div className="min-h-screen flex items-center justify-center">
       <Card className="h-max w-[25rem] px-8 pb-8">
-        <form ref={formRef} onSubmit={(e) => e.preventDefault()} className="flex flex-col gap-2">
+        <form
+          ref={formRef}
+          onSubmit={(e) => e.preventDefault()}
+          className="flex flex-col gap-2"
+        >
           <h1 className="text-4xl font-bold text-center mt-5">Login</h1>
 
           <Label>Username</Label>

src/components/AppLayout.tsx

@@ -11,8 +11,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const showSidebar = !hiddenRoutes.includes(pathname);
 
-  return (
-    showSidebar ?
+  return showSidebar ? (
     <SidebarProvider>
       <div className="flex min-h-[100dvh] w-full">
         <AppSidebar />
@@ -22,10 +21,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
         </main>
       </div>
     </SidebarProvider>
-
-    :
-      <main className="min-h-[100dvh]">
-        {children}
-      </main>
+  ) : (
+    <main className="min-h-[100dvh]">{children}</main>
   );
 }

src/components/AppSidebar.tsx

@@ -4,7 +4,7 @@ import {
   SidebarFooter,
   SidebarGroup,
   SidebarHeader,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
 
 export default function AppSidebar() {
   return (
@@ -16,5 +16,5 @@ export default function AppSidebar() {
       </SidebarContent>
       <SidebarFooter />
     </Sidebar>
-  )
-}
+  );
+}