Improve router provisioning workflow

src/components/dashboard/IpPoolChart.tsx

@@ -16,15 +16,15 @@ export function IpPoolChart({
   used,
   total,
 }: IpPoolChartProps) {
-  const available = Math.max(
-    total - used,
-    0,
-  );
+  const available = Math.max(total - used, 0);
 
   const percentage =
     total > 0
-      ? ((used / total) * 100).toFixed(2)
-      : '0.00';
+      ? (used / total) * 100
+      : 0;
+
+  const displayPercentage =
+    percentage.toFixed(2);
 
   const data = [
     {
@@ -38,23 +38,28 @@ export function IpPoolChart({
   ];
 
   return (
-    <Card className="h-full">
-      <h3 className="mb-4 font-semibold text-white">
-        IP Pool Usage
-      </h3>
+    <Card className="flex h-full flex-col">
+      <div>
+        <h3 className="font-semibold text-white">
+          IP Pool Usage
+        </h3>
 
-      <div className="flex h-[calc(100%-2rem)] items-center justify-between gap-6">
-        <div className="h-44 w-44">
-          <ResponsiveContainer
-            width="100%"
-            height="100%"
-          >
+        <p className="text-xs text-slate-500">
+          WireGuard allocation capacity
+        </p>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col justify-center">
+        <div className="relative mx-auto h-56 w-56">
+          <ResponsiveContainer width="100%" height="100%">
             <PieChart>
               <Pie
                 data={data}
                 dataKey="value"
-                innerRadius={55}
-                outerRadius={78}
+                innerRadius={76}
+                outerRadius={100}
+                startAngle={90}
+                endAngle={-270}
                 paddingAngle={2}
               >
                 {data.map((_, index) => (
@@ -70,26 +75,54 @@ export function IpPoolChart({
               </Pie>
             </PieChart>
           </ResponsiveContainer>
+
+          <div className="absolute inset-0 flex flex-col items-center justify-center">
+            <p className="text-4xl font-bold text-white">
+              {displayPercentage}%
+            </p>
+
+            <p className="mt-1 text-xs text-slate-500">
+              pool used
+            </p>
+          </div>
         </div>
 
-        <div className="text-sm text-slate-300">
-          <p>
-            <span className="text-green-300">
+        <div className="mt-8 space-y-4">
+          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+            <p className="text-xs uppercase tracking-wide text-slate-500">
+              Used IPs
+            </p>
+
+            <p className="mt-1 text-2xl font-bold text-green-300">
               {used}
-            </span>{' '}
-            used IPs
-          </p>
+            </p>
+          </div>
 
-          <p className="mt-2">
-            <span className="text-blue-300">
+          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+            <p className="text-xs uppercase tracking-wide text-slate-500">
+              Available IPs
+            </p>
+
+            <p className="mt-1 text-2xl font-bold text-blue-300">
               {available}
-            </span>{' '}
-            available
-          </p>
+            </p>
+          </div>
 
-          <p className="mt-4 text-3xl font-bold text-white">
-            {percentage}%
-          </p>
+          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+            <div className="mb-2 flex justify-between text-xs text-slate-500">
+              <span>Capacity</span>
+              <span>{used} / {total}</span>
+            </div>
+
+            <div className="h-2 overflow-hidden rounded-full bg-slate-800">
+              <div
+                className="h-full rounded-full bg-green-400"
+                style={{
+                  width: `${Math.min(percentage, 100)}%`,
+                }}
+              />
+            </div>
+          </div>
         </div>
       </div>
     </Card>