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>