elevenlabs-webhook-nodejs 1.0.0

package/web/src/pages/admin/AdminTenants.tsx

@@ -0,0 +1,274 @@
+import { useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import api from '../../lib/api';
+import { PageHeader } from '@/components/page-header';
+import { EmptyState } from '@/components/empty-state';
+import { Pagination } from '@/components/pagination';
+import { TableLoader } from '@/components/page-loader';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { toast } from 'sonner';
+import { PlusIcon, SearchIcon, Loader2Icon } from 'lucide-react';
+
+const ALL_FEATURES = ['inbound_agent', 'outbound_campaigns', 'survey_builder', 'whatsapp_notifications'];
+
+interface TenantRow {
+  _id: string;
+  name: string;
+  plan: string;
+  enabled_features: string[];
+  user_count: number;
+  createdAt: string;
+}
+
+export default function AdminTenants() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [tenants, setTenants] = useState<TenantRow[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const page = parseInt(searchParams.get('page') || '1');
+  const search = searchParams.get('search') || '';
+
+  useEffect(() => {
+    setLoading(true);
+    const params = new URLSearchParams();
+    params.set('page', String(page));
+    if (search) params.set('search', search);
+
+    api.get(`/admin/tenants?${params}`)
+      .then(({ data }) => {
+        setTenants(data.tenants);
+        setTotal(data.total);
+        setTotalPages(data.totalPages);
+      })
+      .finally(() => setLoading(false));
+  }, [page, search]);
+
+  function setFilter(key: string, value: string) {
+    const params = new URLSearchParams(searchParams);
+    if (value) params.set(key, value);
+    else params.delete(key);
+    if (key !== 'page') params.set('page', '1');
+    setSearchParams(params);
+  }
+
+  return (
+    <div>
+      <PageHeader title="Tenant Yonetimi">
+        <Badge variant="outline" className="text-xs">{total} tenant</Badge>
+        <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <PlusIcon className="size-4 mr-1" />
+              Yeni Tenant
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Yeni Tenant Olustur</DialogTitle>
+            </DialogHeader>
+            <CreateTenantForm onDone={(t) => {
+              setTenants([{ ...t, user_count: 0 }, ...tenants]);
+              setCreateOpen(false);
+              toast.success('Tenant olusturuldu');
+            }} />
+          </DialogContent>
+        </Dialog>
+      </PageHeader>
+
+      <div className="relative mb-4 max-w-xs">
+        <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={e => setFilter('search', e.target.value)}
+          placeholder="Tenant ara..."
+          className="pl-9"
+        />
+      </div>
+
+      <Card>
+        <CardContent className="px-0 py-0">
+          {loading ? (
+            <TableLoader rows={6} cols={5} />
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-6">Ad</TableHead>
+                  <TableHead>Plan</TableHead>
+                  <TableHead>Ozellikler</TableHead>
+                  <TableHead>Kullanicilar</TableHead>
+                  <TableHead className="pr-6">Tarih</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {tenants.map(t => (
+                  <TableRow key={t._id}>
+                    <TableCell className="pl-6">
+                      <Link to={`/admin/tenants/${t._id}`} className="font-medium text-primary hover:underline">
+                        {t.name}
+                      </Link>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="secondary">{t.plan}</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        {t.enabled_features.map(f => (
+                          <Badge key={f} variant="outline" className="text-[10px]">{f}</Badge>
+                        ))}
+                        {t.enabled_features.length === 0 && <span className="text-xs text-muted-foreground">Yok</span>}
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">{t.user_count}</TableCell>
+                    <TableCell className="text-muted-foreground whitespace-nowrap pr-6">
+                      {new Date(t.createdAt).toLocaleDateString('tr-TR')}
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {tenants.length === 0 && (
+                  <TableRow>
+                    <TableCell colSpan={5}>
+                      <EmptyState message="Tenant bulunamadi" />
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      <Pagination page={page} totalPages={totalPages} onPageChange={p => setFilter('page', String(p))} />
+    </div>
+  );
+}
+
+interface PlanOption {
+  _id: string;
+  name: string;
+  slug: string;
+  price: number;
+  included_minutes: number;
+}
+
+function CreateTenantForm({ onDone }: { onDone: (tenant: TenantRow) => void }) {
+  const [name, setName] = useState('');
+  const [plan, setPlan] = useState('');
+  const [features, setFeatures] = useState<string[]>(['inbound_agent', 'whatsapp_notifications']);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [plans, setPlans] = useState<PlanOption[]>([]);
+  const [loadingPlans, setLoadingPlans] = useState(true);
+
+  useEffect(() => {
+    api.get('/admin/plans')
+      .then(({ data }) => {
+        const active = data.plans.filter((p: PlanOption & { is_active: boolean }) => p.is_active);
+        setPlans(active);
+        if (active.length > 0) setPlan(active[0].slug);
+      })
+      .finally(() => setLoadingPlans(false));
+  }, []);
+
+  function toggleFeature(f: string) {
+    setFeatures(prev => prev.includes(f) ? prev.filter(x => x !== f) : [...prev, f]);
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+    try {
+      const { data } = await api.post('/admin/tenants', { name, plan, enabled_features: features });
+      onDone(data.tenant);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Hata');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {error && (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+      <div className="space-y-2">
+        <Label>Tenant Adi</Label>
+        <Input value={name} onChange={e => setName(e.target.value)} required />
+      </div>
+      <div className="space-y-2">
+        <Label>Plan</Label>
+        {loadingPlans ? (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground py-2">
+            <Loader2Icon className="size-4 animate-spin" />
+            Planlar yukleniyor...
+          </div>
+        ) : plans.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-2">
+            Henuz plan tanimlanmamis. Admin &gt; Planlar sayfasindan ekleyin.
+          </p>
+        ) : (
+          <Select value={plan} onValueChange={setPlan}>
+            <SelectTrigger>
+              <SelectValue placeholder="Plan secin..." />
+            </SelectTrigger>
+            <SelectContent>
+              {plans.map(p => (
+                <SelectItem key={p.slug} value={p.slug}>
+                  {p.name} — {p.price.toLocaleString('tr-TR')}TL/ay ({p.included_minutes} dk)
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+      <div className="space-y-3">
+        <Label>Ozellikler</Label>
+        {ALL_FEATURES.map(f => (
+          <div key={f} className="flex items-center gap-2">
+            <Checkbox id={`create-feat-${f}`} checked={features.includes(f)} onCheckedChange={() => toggleFeature(f)} />
+            <Label htmlFor={`create-feat-${f}`} className="text-sm font-normal">{f}</Label>
+          </div>
+        ))}
+      </div>
+      <Button type="submit" disabled={loading || !plan} className="w-full">
+        {loading && <Loader2Icon className="size-4 mr-2 animate-spin" />}
+        Olustur
+      </Button>
+    </form>
+  );
+}