Initial project structure cleanup

2026-05-08 16:57:55 +01:00
commit 8075104243
59 changed files with 22335 additions and 0 deletions
@@ -0,0 +1,97 @@
+import {
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+} from 'recharts';
+
+import { Card } from '@/components/ui/Card';
+
+type IpPoolChartProps = {
+  used: number;
+  total: number;
+};
+
+export function IpPoolChart({
+  used,
+  total,
+}: IpPoolChartProps) {
+  const available = Math.max(
+    total - used,
+    0,
+  );
+
+  const percentage =
+    total > 0
+      ? ((used / total) * 100).toFixed(2)
+      : '0.00';
+
+  const data = [
+    {
+      name: 'Used',
+      value: used,
+    },
+    {
+      name: 'Available',
+      value: available,
+    },
+  ];
+
+  return (
+    <Card className="h-full">
+      <h3 className="mb-4 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%"
+          >
+            <PieChart>
+              <Pie
+                data={data}
+                dataKey="value"
+                innerRadius={55}
+                outerRadius={78}
+                paddingAngle={2}
+              >
+                {data.map((_, index) => (
+                  <Cell
+                    key={index}
+                    fill={
+                      index === 0
+                        ? '#19d16f'
+                        : '#263244'
+                    }
+                  />
+                ))}
+              </Pie>
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+
+        <div className="text-sm text-slate-300">
+          <p>
+            <span className="text-green-300">
+              {used}
+            </span>{' '}
+            used IPs
+          </p>
+
+          <p className="mt-2">
+            <span className="text-blue-300">
+              {available}
+            </span>{' '}
+            available
+          </p>
+
+          <p className="mt-4 text-3xl font-bold text-white">
+            {percentage}%
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}