Trying to fix tw

src/app/applications/page.tsx

@@ -5,8 +5,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
-import { MetricBar } from "@/components/dashboard/MetricBar";
 import { Play, Square, RotateCcw, MoreVertical, Plus } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
 
 const applications = [
   {
@@ -130,7 +130,7 @@ export default function ApplicationsPage() {
                 <div className="col-span-2">
                   <div className="text-xs text-muted-foreground mb-1">CPU</div>
                   <div className="flex items-center gap-2">
-                    <MetricBar value={app.cpu} max={100} />
+                    <Progress value={app.cpu} className="w-full" />
                     <span className="text-xs font-mono w-8">{app.cpu}%</span>
                   </div>
                 </div>
@@ -141,7 +141,7 @@ export default function ApplicationsPage() {
                     Memory
                   </div>
                   <div className="flex items-center gap-2">
-                    <MetricBar value={app.memory} max={100} />
+                    <Progress value={app.memory} className="w-full" />
                     <span className="text-xs font-mono w-8">{app.memory}%</span>
                   </div>
                 </div>

src/app/monitoring/page.tsx

@@ -3,7 +3,6 @@
 import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { MetricBar } from "@/components/dashboard/MetricBar";
 import {
   LineChart,
   Line,
@@ -14,6 +13,7 @@ import {
   AreaChart,
   Area,
 } from "recharts";
+import { Progress } from "@/components/ui/progress";
 
 const cpuData = [
   { time: "00:00", value: 45 },
@@ -88,7 +88,7 @@ export default function MonitoringPage() {
               Cluster CPU
             </div>
             <div className="stat-value">68%</div>
-            <MetricBar value={68} max={100} />
+            <Progress value={68} className="w-full" />
           </CardContent>
         </Card>
         <Card>
@@ -97,7 +97,7 @@ export default function MonitoringPage() {
               Cluster Memory
             </div>
             <div className="stat-value">71%</div>
-            <MetricBar value={71} max={100} />
+            <Progress value={71} className="w-full" />
           </CardContent>
         </Card>
         <Card>
@@ -337,14 +337,14 @@ export default function MonitoringPage() {
                       <span>CPU</span>
                       <span>{container.cpu}%</span>
                     </div>
-                    <MetricBar value={container.cpu} max={100} />
+                    <Progress value={container.cpu} className="w-full" />
                   </div>
                   <div>
                     <div className="flex justify-between text-[10px] text-muted-foreground mb-1">
                       <span>Memory</span>
                       <span>{container.memory}%</span>
                     </div>
-                    <MetricBar value={container.memory} max={100} />
+                    <Progress value={container.memory} className="w-full" />
                   </div>
                   <div className="flex justify-between text-[10px] pt-1 border-t border-border">
                     <span className="text-muted-foreground">Network</span>

src/app/nodes/page.tsx

@@ -5,8 +5,8 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
-import { MetricBar } from "@/components/dashboard/MetricBar";
 import { Server, Plus, Settings, Trash2 } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
 
 const nodes = [
   {
@@ -130,7 +130,7 @@ export default function NodesPage() {
                     CPU ({node.cpu.cores} cores)
                   </div>
                   <div className="stat-value mb-2">{node.cpu.usage}%</div>
-                  <MetricBar value={node.cpu.usage} max={100} />
+                  <Progress value={node.cpu.usage} className="w-full" />
                 </div>
 
                 {/* Memory */}
@@ -141,7 +141,7 @@ export default function NodesPage() {
                   <div className="stat-value mb-2">
                     {node.memory.percentage}%
                   </div>
-                  <MetricBar value={node.memory.percentage} max={100} />
+                  <Progress value={node.memory.percentage} className="w-full" />
                   <div className="text-[10px] text-muted-foreground mt-1 font-mono">
                     {node.memory.used} / {node.memory.total}
                   </div>
@@ -151,7 +151,7 @@ export default function NodesPage() {
                 <div>
                   <div className="text-xs text-muted-foreground mb-2">Disk</div>
                   <div className="stat-value mb-2">{node.disk.percentage}%</div>
-                  <MetricBar value={node.disk.percentage} max={100} />
+                  <Progress value={node.disk.percentage} className="w-full" />
                   <div className="text-[10px] text-muted-foreground mt-1 font-mono">
                     {node.disk.used} / {node.disk.total}
                   </div>

src/app/overview/page.tsx

@@ -6,7 +6,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { StatusIndicator } from "@/components/dashboard/StatusIndicator";
-import { MetricBar } from "@/components/dashboard/MetricBar";
 import {
   Box,
   Server,
@@ -15,6 +14,7 @@ import {
   ArrowRight,
   Clock,
 } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
 
 const recentDeployments = [
   {
@@ -172,7 +172,7 @@ export default function OverviewPage() {
                   </div>
                   <div className="col-span-2">
                     <div className="flex items-center gap-2">
-                      <MetricBar value={app.cpu} max={100} />
+                      <Progress value={app.cpu} className="w-full" />
                       <span className="text-xs text-muted-foreground font-mono w-8">
                         {app.cpu}%
                       </span>
@@ -180,7 +180,7 @@ export default function OverviewPage() {
                   </div>
                   <div className="col-span-2">
                     <div className="flex items-center gap-2">
-                      <MetricBar value={app.memory} max={100} />
+                      <Progress value={app.memory} className="w-full" />
                       <span className="text-xs text-muted-foreground font-mono w-8">
                         {app.memory}%
                       </span>
@@ -257,12 +257,12 @@ export default function OverviewPage() {
                     <span className="text-muted-foreground">CPU</span>
                     <span className="font-mono">{node.cpu}%</span>
                   </div>
-                  <MetricBar value={node.cpu} max={100} />
+                  <Progress value={node.cpu} className="bg-primary" />
                   <div className="flex items-center justify-between text-xs">
                     <span className="text-muted-foreground">Memory</span>
                     <span className="font-mono">{node.memory}%</span>
                   </div>
-                  <MetricBar value={node.memory} max={100} />
+                  <Progress value={node.memory} className="w-full" />
                   <div className="flex items-center justify-between text-xs pt-2 border-t border-border mt-2">
                     <span className="text-muted-foreground">Containers</span>
                     <span className="font-mono">{node.containers}</span>

src/components/dashboard/MetricBar.tsx

@@ -1,32 +0,0 @@
-interface MetricBarProps {
-  value: number;
-  max: number;
-  variant?: "default" | "success" | "warning" | "danger";
-}
-
-export function MetricBar({ value, max, variant = "default" }: MetricBarProps) {
-  const percentage = Math.min((value / max) * 100, 100);
-  
-  const getColor = () => {
-    if (variant !== "default") {
-      switch (variant) {
-        case "success": return "bg-success";
-        case "warning": return "bg-warning";
-        case "danger": return "bg-destructive";
-      }
-    }
-    
-    if (percentage > 80) return "bg-destructive";
-    if (percentage > 60) return "bg-warning";
-    return "bg-primary";
-  };
-
-  return (
-    <div className="metric-bar">
-      <div
-        className={`metric-bar-fill ${getColor()}`}
-        style={{ width: `${percentage}%` }}
-      />
-    </div>
-  );
-}

src/components/ui/progress.tsx

@@ -1,23 +1,31 @@
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+"use client"
 
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
 
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+import { cn } from "@/lib/utils"
 
-export { Progress };
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }