Cleanup

packages/features/admin/src/components/AdminDashboard.tsx

@@ -0,0 +1,77 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+
+interface Data {
+  usersCount: number;
+  organizationsCount: number;
+  activeSubscriptions: number;
+  trialSubscriptions: number;
+}
+
+function AdminDashboard({
+  data,
+}: React.PropsWithChildren<{
+  data: Data;
+}>) {
+  return (
+    <div
+      className={
+        'grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3' +
+        ' xl:grid-cols-4'
+      }
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Users</CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <div className={'flex justify-between'}>
+            <Figure>{data.usersCount}</Figure>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Organizations</CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <div className={'flex justify-between'}>
+            <Figure>{data.organizationsCount}</Figure>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Paying Customers</CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <div className={'flex justify-between'}>
+            <Figure>{data.activeSubscriptions}</Figure>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Trials</CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <div className={'flex justify-between'}>
+            <Figure>{data.trialSubscriptions}</Figure>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default AdminDashboard;
+
+function Figure(props: React.PropsWithChildren) {
+  return <div className={'text-3xl font-bold'}>{props.children}</div>;
+}