Trying to fix tw

package-lock.json

@@ -8,6 +8,7 @@
       "name": "dockship",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-progress": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
         "@types/dockerode": "^3.3.47",
         "class-variance-authority": "^0.7.1",
@@ -848,6 +849,68 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz",
+      "integrity": "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz",
+      "integrity": "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
@@ -1301,7 +1364,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/dockerode": "^3.3.47",
     "class-variance-authority": "^0.7.1",

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