feat: update linter rules and improve code structure

- Added overrides in biome.json to disable specific linter rules for UI components.
- Reorganized imports and improved code readability in various UI components.
- Refactored components to use fieldset instead of div for better semantics.
- Enhanced accessibility by updating roles and aria attributes in components.
- Fixed minor issues with key props in map functions for better performance.
- Updated focus styles and improved CSS for better visual feedback.

src/app/api/dashboard/route.ts

@@ -1,5 +1,5 @@
-import { NextResponse } from "next/server";
 import http from "node:http";
+import { NextResponse } from "next/server";
 
 const JAEGER = "http://jaeger:16686";
 const PROMETHEUS = "http://prometheus:9090";
@@ -31,7 +31,9 @@ function dockerFetch(path: string): Promise<unknown> {
     http
       .get({ socketPath: DOCKER_SOCK, path }, (res) => {
         let data = "";
-        res.on("data", (c: string) => (data += c));
+        res.on("data", (c: string) => {
+          data += c;
+        });
         res.on("end", () => {
           try {
             resolve(JSON.parse(data));
@@ -129,7 +131,7 @@ async function promRange(query: string, steps = 20): Promise<number[]> {
   if (!result?.[0]?.values) return [];
   return result[0].values.map((v) => {
     const f = parseFloat(v[1] as string);
-    return isNaN(f) ? 0 : f;
+    return Number.isNaN(f) ? 0 : f;
   });
 }
 

src/app/globals.css

@@ -133,7 +133,9 @@
 .dark *:focus-visible {
   @apply ring-[3px];
   outline: none;
-  box-shadow: 0 0 8px oklch(0.7 0.15 75 / 0.3), 0 0 0 3px oklch(0.7 0.15 75 / 0.5);
+  box-shadow:
+    0 0 8px oklch(0.7 0.15 75 / 0.3),
+    0 0 0 3px oklch(0.7 0.15 75 / 0.5);
 }
 html:not(.dark) *:focus-visible {
   @apply ring-[3px];

src/app/layout.tsx

@@ -32,7 +32,12 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body className="flex min-h-full flex-col bg-background text-foreground">
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
           <DashboardHeader />
           {children}
         </ThemeProvider>

src/app/page.tsx

@@ -98,15 +98,15 @@ export default function Home() {
               I’m a Teknik Informatika student passionate about backend
               engineering, distributed systems, and infrastructure. I spend my
               time building RESTful APIs, learning container orchestration with
-              Docker & Traefik, and exploring observability with OpenTelemetry
-              & Jaeger.
+              Docker & Traefik, and exploring observability with
+              OpenTelemetry & Jaeger.
             </p>
             <p>
               I was the Back-End lead on the ZeaVis Edu capstone team (&ldquo;AI
-              for Smart Education&rdquo; by Pijak &times; IBM SkillsBuild),
-              a 5-person team with task division across Back-End, Front-End,
-              and Machine Learning. I handled the system architecture, API
-              design, RESTful API development, and Docker deployment on VPS.
+              for Smart Education&rdquo; by Pijak &times; IBM SkillsBuild), a
+              5-person team with task division across Back-End, Front-End, and
+              Machine Learning. I handled the system architecture, API design,
+              RESTful API development, and Docker deployment on VPS.
             </p>
           </div>
         </div>
@@ -260,8 +260,8 @@ export default function Home() {
             </p>
             <p className="max-w-md text-sm text-muted-foreground">
               The dashboard tracks Docker services, Traefik request metrics,
-              Prometheus system resources, and Jaeger traces — all running on
-              my VPS deployment.
+              Prometheus system resources, and Jaeger traces — all running on my
+              VPS deployment.
             </p>
             <a href="/dashboard" className={cn(buttonVariants())}>
               Live Dashboard