From d62fdf47f3761f797588d3f0d02abe84b692fc70 Mon Sep 17 00:00:00 2001
From: Aidan Honor <aidan@p0ntus.com>
Date: Sun, 9 Mar 2025 18:05:13 -0400
Subject: [PATCH] ui: add disk usage card

---
 app/admin/page.tsx                       |  2 ++
 components/cards/dashboard/DiskUsage.tsx | 27 +++++++++++++++++++++
 components/ui/progress.tsx               | 31 ++++++++++++++++++++++++
 package.json                             | 13 +++++-----
 4 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 components/cards/dashboard/DiskUsage.tsx
 create mode 100644 components/ui/progress.tsx

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 5dcf9e8..3493c21 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,5 +1,6 @@
 import TotalUsers from "@/components/cards/dashboard/TotalUsers"
 import TotalMessages from "@/components/cards/dashboard/TotalMessages"
+import DiskUsage from "@/components/cards/dashboard/DiskUsage"
 import Services from "@/components/cards/dashboard/Services"
 import Header from '@/components/Header'
 
@@ -10,6 +11,7 @@ export default function Admin() {
       <div className="p-4 pb-0 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <TotalUsers />
         <TotalMessages />
+        <DiskUsage />
       </div>
       <div className="p-4 pb-0 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <Services />
diff --git a/components/cards/dashboard/DiskUsage.tsx b/components/cards/dashboard/DiskUsage.tsx
new file mode 100644
index 0000000..785f513
--- /dev/null
+++ b/components/cards/dashboard/DiskUsage.tsx
@@ -0,0 +1,27 @@
+import { Card, CardHeader, CardContent } from '@/components/ui/card'
+import { Progress } from '@/components/ui/progress'
+import { FiHardDrive } from "react-icons/fi"
+
+export default function DiskUsage() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center">
+          <FiHardDrive className="mr-2" />
+          Disk Usage
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Progress value={30} className="mb-2" />
+        <div className="flex justify-between items-center">
+          <span className="text-2xl font-bold">30GB</span>
+          <span className="text-2xl font-bold">300GB</span>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-sm text-gray-500">in use</span>
+          <span className="text-sm text-gray-500">allocated</span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..e7a416c
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+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 }
diff --git a/package.json b/package.json
index 22e6d41..a3c5305 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@fontsource-variable/bricolage-grotesque": "^5.2.5",
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
@@ -25,11 +26,11 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "typescript": "^5.8.2",
+    "@types/node": "^20.17.24",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@tailwindcss/postcss": "^4.0.12",
+    "tailwindcss": "^4.0.12"
   }
 }