chore: initial commit for phase05

2026-02-21 16:59:21 +03:00
parent 218452706c
commit 0941a9ba46
43 changed files with 4431 additions and 17 deletions
@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import { Link } from 'react-router';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Plus, Building2 } from 'lucide-react';
+import { api } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+
+interface Organization {
+  id: string;
+  name: string;
+  slug: string;
+  maxServers: number;
+  maxNodes: number;
+  createdAt: string;
+}
+
+interface PaginatedResponse<T> {
+  data: T[];
+  meta: { total: number; page: number; perPage: number; totalPages: number };
+}
+
+export function OrganizationsPage() {
+  const queryClient = useQueryClient();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [slug, setSlug] = useState('');
+
+  const { data } = useQuery({
+    queryKey: ['organizations'],
+    queryFn: () => api.get<PaginatedResponse<Organization>>('/organizations'),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: (body: { name: string; slug: string }) => api.post('/organizations', body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['organizations'] });
+      setOpen(false);
+      setName('');
+      setSlug('');
+    },
+  });
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Organizations</h1>
+          <p className="text-muted-foreground">Manage your organizations</p>
+        </div>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="h-4 w-4" />
+              New Organization
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Create Organization</DialogTitle>
+            </DialogHeader>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                createMutation.mutate({ name, slug });
+              }}
+              className="space-y-4"
+            >
+              <div className="space-y-2">
+                <Label>Name</Label>
+                <Input value={name} onChange={(e) => setName(e.target.value)} required />
+              </div>
+              <div className="space-y-2">
+                <Label>Slug</Label>
+                <Input
+                  value={slug}
+                  onChange={(e) => setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
+                  pattern="^[a-z0-9-]+$"
+                  required
+                />
+              </div>
+              <DialogFooter>
+                <Button type="submit" disabled={createMutation.isPending}>
+                  {createMutation.isPending ? 'Creating...' : 'Create'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {data?.data.map((org) => (
+          <Link key={org.id} to={`/org/${org.id}/dashboard`}>
+            <Card className="transition-colors hover:border-primary/50">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                    <Building2 className="h-5 w-5 text-primary" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-base">{org.name}</CardTitle>
+                    <CardDescription>{org.slug}</CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex gap-4 text-sm text-muted-foreground">
+                  <span>Max {org.maxServers} servers</span>
+                  <span>Max {org.maxNodes} nodes</span>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}