hibna
130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
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>
|
|
);
|
|
}
|