vibecarbon 0.1.0

package/carbon/src/client/pages/admin/Organizations.tsx

@@ -0,0 +1,306 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  ArrowUpDown,
+  Building2,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  Search,
+  Users,
+} from 'lucide-react';
+import { useState } from 'react';
+import { PageHeader } from '@/components/PageHeader';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { supabase } from '@/lib/supabase';
+import { ContentPanel } from '../../components/ContentPanel';
+
+type Organization = {
+  id: string;
+  name: string;
+  slug: string;
+  plan: string;
+  memberCount: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+type SortField = 'name' | 'slug' | 'plan' | 'created_at';
+type SortOrder = 'asc' | 'desc';
+
+async function getAuthHeaders() {
+  const {
+    data: { session },
+  } = await supabase.auth.getSession();
+  return {
+    'Content-Type': 'application/json',
+    Authorization: session ? `Bearer ${session.access_token}` : '',
+  };
+}
+
+async function fetchOrganizations(params: {
+  search: string;
+  sortBy: SortField;
+  sortOrder: SortOrder;
+  page: number;
+  limit: number;
+}): Promise<{ organizations: Organization[]; pagination: { total: number; totalPages: number } }> {
+  const headers = await getAuthHeaders();
+  const queryParams = new URLSearchParams({
+    search: params.search,
+    sortBy: params.sortBy,
+    sortOrder: params.sortOrder,
+    page: params.page.toString(),
+    limit: params.limit.toString(),
+  });
+
+  const response = await fetch(`/api/v1/admin/organizations?${queryParams}`, { headers });
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch organizations');
+  }
+
+  return response.json();
+}
+
+function getPlanBadgeVariant(plan: string) {
+  switch (plan) {
+    case 'ENTERPRISE':
+      return 'default';
+    case 'PRO':
+      return 'secondary';
+    case 'STARTER':
+      return 'outline';
+    default:
+      return 'outline';
+  }
+}
+
+export default function AdminOrganizations() {
+  const [search, setSearch] = useState('');
+  const [sortBy, setSortBy] = useState<SortField>('created_at');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
+  const [page, setPage] = useState(1);
+  const limit = 20;
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['admin-organizations', search, sortBy, sortOrder, page],
+    queryFn: () => fetchOrganizations({ search, sortBy, sortOrder, page, limit }),
+  });
+
+  const organizations = data?.organizations || [];
+  const totalPages = data?.pagination.totalPages || 1;
+  const total = data?.pagination.total || 0;
+
+  const toggleSort = (field: SortField) => {
+    if (sortBy === field) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortBy(field);
+      setSortOrder('asc');
+    }
+    setPage(1);
+  };
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+    setPage(1);
+  };
+
+  const sortOptions: Record<string, string> = {
+    'created_at-desc': 'Newest first',
+    'created_at-asc': 'Oldest first',
+    'name-asc': 'Name A-Z',
+    'name-desc': 'Name Z-A',
+  };
+  const sortValue = `${sortBy}-${sortOrder}`;
+
+  return (
+    <>
+      <PageHeader title="Organizations" description="Manage organizations" />
+
+      <ContentPanel variant="full">
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle>Organizations ({total})</CardTitle>
+                <CardDescription>
+                  A list of all organizations registered in the system.
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
+                  <Input
+                    placeholder="Search by name or slug..."
+                    value={search}
+                    onChange={(e) => handleSearch(e.target.value)}
+                    className="pl-8 w-64"
+                  />
+                </div>
+                <Select
+                  defaultValue="created_at-desc"
+                  value={`${sortBy}-${sortOrder}`}
+                  onValueChange={(value) => {
+                    if (!value) return;
+                    const [field, order] = value.split('-') as [SortField, SortOrder];
+                    setSortBy(field);
+                    setSortOrder(order);
+                    setPage(1);
+                  }}
+                >
+                  <SelectTrigger className="w-44">
+                    <span>{sortOptions[sortValue]}</span>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="created_at-desc">Newest first</SelectItem>
+                    <SelectItem value="created_at-asc">Oldest first</SelectItem>
+                    <SelectItem value="name-asc">Name A-Z</SelectItem>
+                    <SelectItem value="name-desc">Name Z-A</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="size-6 animate-spin text-muted-foreground" />
+              </div>
+            ) : error ? (
+              <div className="py-8 text-center text-destructive">
+                {error instanceof Error ? error.message : 'Failed to load organizations'}
+              </div>
+            ) : organizations.length === 0 ? (
+              <div className="py-8 text-center text-muted-foreground">
+                {search ? 'No organizations match your search.' : 'No organizations found.'}
+              </div>
+            ) : (
+              <>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="-ml-3 h-8"
+                          onClick={() => toggleSort('name')}
+                        >
+                          Organization
+                          <ArrowUpDown className="ml-2 size-4" />
+                        </Button>
+                      </TableHead>
+                      <TableHead>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="-ml-3 h-8"
+                          onClick={() => toggleSort('slug')}
+                        >
+                          Slug
+                          <ArrowUpDown className="ml-2 size-4" />
+                        </Button>
+                      </TableHead>
+                      <TableHead>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="-ml-3 h-8"
+                          onClick={() => toggleSort('plan')}
+                        >
+                          Plan
+                          <ArrowUpDown className="ml-2 size-4" />
+                        </Button>
+                      </TableHead>
+                      <TableHead>Members</TableHead>
+                      <TableHead>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="-ml-3 h-8"
+                          onClick={() => toggleSort('created_at')}
+                        >
+                          Created
+                          <ArrowUpDown className="ml-2 size-4" />
+                        </Button>
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {organizations.map((org) => (
+                      <TableRow key={org.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Building2 className="size-4 text-muted-foreground" />
+                            <span className="font-medium">{org.name}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <code className="text-sm text-muted-foreground">{org.slug}</code>
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant={getPlanBadgeVariant(org.plan)}>{org.plan}</Badge>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-1">
+                            <Users className="size-4 text-muted-foreground" />
+                            <span>{org.memberCount}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-muted-foreground">
+                          {new Date(org.createdAt).toLocaleDateString()}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+
+                {/* Pagination */}
+                {totalPages > 1 && (
+                  <div className="flex items-center justify-between mt-4 pt-4 border-t">
+                    <p className="text-sm text-muted-foreground">
+                      Page {page} of {totalPages}
+                    </p>
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage(page - 1)}
+                        disabled={page === 1}
+                      >
+                        <ChevronLeft className="size-4 mr-1" />
+                        Previous
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage(page + 1)}
+                        disabled={page === totalPages}
+                      >
+                        Next
+                        <ChevronRight className="size-4 ml-1" />
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+      </ContentPanel>
+    </>
+  );
+}

package/carbon/src/client/pages/admin/Settings.tsx

@@ -0,0 +1,314 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Globe, Lock, Mail, Shield, Unlock } from 'lucide-react';
+import { toast } from 'sonner';
+import { PageHeader } from '@/components/PageHeader';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { authSettingsQueryKey, useAuthSettings } from '@/hooks/api';
+import { getAuthHeaders } from '@/lib/api';
+import { ContentPanel } from '../../components/ContentPanel';
+
+type LockedAccount = {
+  email: string;
+  attemptCount: number;
+  firstAttempt: string;
+  lastAttempt: string;
+};
+
+const lockedAccountsQueryKey = ['admin', 'locked-accounts'];
+
+export default function AdminSettings() {
+  const queryClient = useQueryClient();
+
+  const { data: authSettings, isLoading: mfaLoading } = useAuthSettings();
+  const mfaEnabled = authSettings?.settings?.mfaEnabled ?? false;
+  const localizationEnabled = authSettings?.settings?.localizationEnabled ?? true;
+  const enabledLanguages = authSettings?.settings?.enabledLanguages ?? ['en'];
+
+  const { data: lockedAccountsData, isLoading: lockedLoading } = useQuery<LockedAccount[]>({
+    queryKey: lockedAccountsQueryKey,
+    queryFn: async () => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/auth/admin/locked-accounts', { headers });
+      if (!response.ok) throw new Error('Failed to fetch locked accounts');
+      const data = await response.json();
+      return data.lockedAccounts || [];
+    },
+  });
+
+  const lockedAccounts = lockedAccountsData ?? [];
+
+  const mfaToggleMutation = useMutation({
+    mutationFn: async (enabled: boolean) => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/auth/admin/settings', {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify({ mfa_enabled: enabled }),
+      });
+      if (!response.ok) throw new Error('Failed to update MFA setting');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: authSettingsQueryKey });
+    },
+    onError: () => {
+      toast.error('Failed to update MFA setting');
+    },
+  });
+
+  const localizationToggleMutation = useMutation({
+    mutationFn: async (enabled: boolean) => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/auth/admin/settings', {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify({ localization_enabled: enabled }),
+      });
+      if (!response.ok) throw new Error('Failed to update localization setting');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: authSettingsQueryKey });
+    },
+    onError: () => {
+      toast.error('Failed to update localization setting');
+    },
+  });
+
+  const enabledLanguagesMutation = useMutation({
+    mutationFn: async (codes: string[]) => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/auth/admin/settings', {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify({ enabled_languages: codes }),
+      });
+      if (!response.ok) throw new Error('Failed to update enabled languages');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: authSettingsQueryKey });
+    },
+    onError: () => {
+      toast.error('Failed to update enabled languages');
+    },
+  });
+
+  const unlockMutation = useMutation({
+    mutationFn: async (email: string) => {
+      const headers = await getAuthHeaders();
+      const response = await fetch('/api/v1/auth/admin/unlock-account', {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({ email }),
+      });
+      if (!response.ok) throw new Error('Failed to unlock account');
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: lockedAccountsQueryKey });
+    },
+    onError: () => {
+      toast.error('Failed to unlock account');
+    },
+  });
+
+  return (
+    <>
+      <PageHeader title="Settings" description="Security and email configuration" />
+
+      <ContentPanel variant="default">
+        <div className="space-y-6">
+          {/* Security Settings */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Shield className="size-5" />
+                Security
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <div className="font-medium">Require MFA</div>
+                  <div className="text-sm text-muted-foreground">
+                    Users must set up two-factor authentication
+                  </div>
+                </div>
+                {mfaLoading ? (
+                  <div className="text-sm text-muted-foreground">Loading...</div>
+                ) : (
+                  <Switch
+                    checked={mfaEnabled}
+                    onCheckedChange={(enabled) => mfaToggleMutation.mutate(enabled)}
+                    disabled={mfaToggleMutation.isPending}
+                  />
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Localization */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Globe className="size-5" />
+                Localization
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <div className="font-medium">Language Switcher</div>
+                  <div className="text-sm text-muted-foreground">
+                    Show the language selector in the navigation bar
+                  </div>
+                </div>
+                {mfaLoading ? (
+                  <div className="text-sm text-muted-foreground">Loading...</div>
+                ) : (
+                  <Switch
+                    checked={localizationEnabled}
+                    onCheckedChange={(enabled) => localizationToggleMutation.mutate(enabled)}
+                    disabled={localizationToggleMutation.isPending}
+                  />
+                )}
+              </div>
+
+              <div className="space-y-3">
+                <div className="space-y-0.5">
+                  <div className="font-medium">Available Languages</div>
+                  <div className="text-sm text-muted-foreground">
+                    The switcher only appears when two or more are selected. At least one language
+                    must remain enabled.
+                  </div>
+                </div>
+                {mfaLoading ? (
+                  <div className="text-sm text-muted-foreground">Loading...</div>
+                ) : (
+                  <div className="flex flex-wrap gap-2">
+                    {(
+                      [
+                        { code: 'en', label: 'English' },
+                        { code: 'es', label: 'Español' },
+                        { code: 'fr', label: 'Français' },
+                        { code: 'de', label: 'Deutsch' },
+                        { code: 'pt', label: 'Português' },
+                      ] as const
+                    ).map(({ code, label }) => {
+                      const checked = enabledLanguages.includes(code);
+                      const wouldEmpty = checked && enabledLanguages.length <= 1;
+                      return (
+                        <button
+                          key={code}
+                          type="button"
+                          disabled={enabledLanguagesMutation.isPending || wouldEmpty}
+                          onClick={() => {
+                            const next = checked
+                              ? enabledLanguages.filter((c) => c !== code)
+                              : [...enabledLanguages, code];
+                            enabledLanguagesMutation.mutate(next);
+                          }}
+                          className={`px-3 h-8 rounded-full border text-sm transition-colors ${
+                            checked
+                              ? 'bg-primary text-primary-foreground border-primary'
+                              : 'bg-background text-foreground border-border hover:bg-muted/50'
+                          } disabled:opacity-50 disabled:cursor-not-allowed`}
+                          aria-pressed={checked}
+                        >
+                          {label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Email Setup */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Mail className="size-5" />
+                Email (SMTP)
+              </CardTitle>
+              <CardDescription>
+                Shared by Supabase Auth (auth emails) and the app (transactional emails).{' '}
+                <a
+                  href="https://resend.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline"
+                >
+                  Resend
+                </a>{' '}
+                recommended.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <pre className="text-xs bg-muted p-3 rounded-lg overflow-x-auto">
+                {`# .env.local
+SMTP_HOST=smtp.resend.com
+SMTP_PORT=465
+SMTP_USER=resend
+SMTP_PASS=re_xxxx_your_key
+SMTP_ADMIN_EMAIL=noreply@yourdomain.com
+SMTP_SENDER_NAME=YourApp`}
+              </pre>
+            </CardContent>
+          </Card>
+
+          {/* Locked Accounts */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Lock className="size-5" />
+                Locked Accounts
+              </CardTitle>
+              <CardDescription>
+                Accounts temporarily locked due to failed login attempts
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {lockedLoading ? (
+                <div className="text-sm text-muted-foreground">Loading...</div>
+              ) : lockedAccounts.length === 0 ? (
+                <div className="text-sm text-muted-foreground">
+                  No accounts are currently locked.
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {lockedAccounts.map((account) => (
+                    <div
+                      key={account.email}
+                      className="flex items-center justify-between p-3 border rounded-lg"
+                    >
+                      <div>
+                        <div className="font-medium">{account.email}</div>
+                        <div className="text-sm text-muted-foreground">
+                          {account.attemptCount} failed attempts
+                        </div>
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => unlockMutation.mutate(account.email)}
+                        disabled={
+                          unlockMutation.isPending && unlockMutation.variables === account.email
+                        }
+                      >
+                        <Unlock className="size-4 mr-2" />
+                        {unlockMutation.isPending && unlockMutation.variables === account.email
+                          ? 'Unlocking...'
+                          : 'Unlock'}
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </ContentPanel>
+    </>
+  );
+}