ui: add disk usage card

app/admin/page.tsx

@@ -1,4 +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'
 
@@ -8,6 +10,8 @@ export default function Admin() {
       <Header pageTitle="Dashboard" />
       <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 />

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>
+  )
+}

components/cards/dashboard/TotalMessages.tsx

@@ -0,0 +1,24 @@
+import { Card, CardHeader, CardContent, CardFooter } from '@/components/ui/card'
+import { TbMailFilled, TbArrowUp } from "react-icons/tb"
+
+export default function TotalMessages() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center">
+          <TbMailFilled className="mr-2" />
+          Total Messages
+        </div>
+      </CardHeader>
+      <CardContent>
+        <span className="text-3xl font-bold">3,283</span>
+      </CardContent>
+      <CardFooter className="-mt-4">
+        <div className="flex items-center">
+          <TbArrowUp className="text-green-500 mr-1" />
+          <span className="text-green-500">283 messages this week</span>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}

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 }

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"
   }
 }