vibecarbon 0.1.0

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

@@ -0,0 +1,365 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  ArrowUpDown,
+  Building2,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  LogIn,
+  Search,
+  Shield,
+  XCircle,
+} from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '@/components/auth/AuthProvider';
+import { PageHeader } from '@/components/PageHeader';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+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 User = {
+  id: string;
+  email: string;
+  name: string | null;
+  avatar: string | null;
+  role: string | null;
+  emailVerified: boolean;
+  organizationCount: number;
+  lastSignIn: string | null;
+  createdAt: string;
+};
+
+type SortField = 'email' | 'name' | '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 fetchUsers(params: {
+  search: string;
+  sortBy: SortField;
+  sortOrder: SortOrder;
+  page: number;
+  limit: number;
+}): Promise<{ users: User[]; 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/users?${queryParams}`, { headers });
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch users');
+  }
+
+  return response.json();
+}
+
+function getUserInitials(user: User) {
+  if (user.name) {
+    return user.name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+  return user.email?.[0]?.toUpperCase() || '?';
+}
+
+export default function AdminUsers() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { impersonateUser, user: currentUser } = useAuth();
+  const [search, setSearch] = useState('');
+  const [sortBy, setSortBy] = useState<SortField>('created_at');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
+  const [page, setPage] = useState(1);
+  const [impersonating, setImpersonating] = useState<string | null>(null);
+  const limit = 20;
+
+  const handleImpersonate = async (userId: string) => {
+    setImpersonating(userId);
+    try {
+      await impersonateUser(userId);
+      navigate('/dashboard');
+    } catch {
+      setImpersonating(null);
+    }
+  };
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['admin-users', search, sortBy, sortOrder, page],
+    queryFn: () => fetchUsers({ search, sortBy, sortOrder, page, limit }),
+  });
+
+  const users = data?.users || [];
+  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',
+    'email-asc': 'Email A-Z',
+    'email-desc': 'Email Z-A',
+    'name-asc': 'Name A-Z',
+    'name-desc': 'Name Z-A',
+  };
+  const sortValue = `${sortBy}-${sortOrder}`;
+
+  return (
+    <>
+      <PageHeader title="Users" description="Manage user accounts" />
+
+      <ContentPanel variant="full">
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle>Users ({total})</CardTitle>
+                <CardDescription>A list of all registered users 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 email..."
+                    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="email-asc">Email A-Z</SelectItem>
+                    <SelectItem value="email-desc">Email Z-A</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 users'}
+              </div>
+            ) : users.length === 0 ? (
+              <div className="py-8 text-center text-muted-foreground">
+                {search ? 'No users match your search.' : 'No users found.'}
+              </div>
+            ) : (
+              <>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="-ml-3 h-8"
+                          onClick={() => toggleSort('name')}
+                        >
+                          User
+                          <ArrowUpDown className="ml-2 size-4" />
+                        </Button>
+                      </TableHead>
+                      <TableHead>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="-ml-3 h-8"
+                          onClick={() => toggleSort('email')}
+                        >
+                          Email
+                          <ArrowUpDown className="ml-2 size-4" />
+                        </Button>
+                      </TableHead>
+                      <TableHead>Role</TableHead>
+                      <TableHead>Verified</TableHead>
+                      <TableHead>Organizations</TableHead>
+                      <TableHead>Last Sign In</TableHead>
+                      <TableHead>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="-ml-3 h-8"
+                          onClick={() => toggleSort('created_at')}
+                        >
+                          Joined
+                          <ArrowUpDown className="ml-2 size-4" />
+                        </Button>
+                      </TableHead>
+                      <TableHead className="w-10" />
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {users.map((user) => (
+                      <TableRow key={user.id}>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Avatar className="size-8">
+                              <AvatarFallback className="text-xs">
+                                {getUserInitials(user)}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="font-medium">
+                              {user.name || <span className="text-muted-foreground">-</span>}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm">{user.email}</span>
+                        </TableCell>
+                        <TableCell>
+                          {user.role === 'super_admin' ? (
+                            <Badge variant="default">
+                              <Shield className="size-3 mr-1" />
+                              Super Admin
+                            </Badge>
+                          ) : (
+                            <span className="text-muted-foreground">-</span>
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          {user.emailVerified ? (
+                            <CheckCircle className="size-4 text-success" />
+                          ) : (
+                            <XCircle className="size-4 text-muted-foreground" />
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-1">
+                            <Building2 className="size-4 text-muted-foreground" />
+                            <span>{user.organizationCount}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-muted-foreground text-sm">
+                          {user.lastSignIn
+                            ? new Date(user.lastSignIn).toLocaleDateString()
+                            : 'Never'}
+                        </TableCell>
+                        <TableCell className="text-muted-foreground text-sm">
+                          {new Date(user.createdAt).toLocaleDateString()}
+                        </TableCell>
+                        <TableCell>
+                          {user.id !== currentUser?.id && user.role !== 'super_admin' && (
+                            <Button
+                              variant="ghost"
+                              size="icon-xs"
+                              onClick={() => handleImpersonate(user.id)}
+                              disabled={impersonating === user.id}
+                              title={t('admin.loginAsUser')}
+                            >
+                              {impersonating === user.id ? (
+                                <Loader2 className="size-3.5 animate-spin" />
+                              ) : (
+                                <LogIn className="size-3.5" />
+                              )}
+                            </Button>
+                          )}
+                        </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/api-docs.css

@@ -0,0 +1,156 @@
+/*
+ * Scalar API docs overrides
+ *
+ * Scalar uses scoped Vue styles ([data-v-*]) and .scalar-app-prefixed Tailwind
+ * utilities, making customCss overrides unreliable. This file loads AFTER
+ * Scalar's stylesheet and uses high-specificity selectors to win.
+ */
+
+/* ── Sidebar container ── */
+/* Match docs sidebar pattern: constrain to viewport, let the sidebar
+   container handle overflow — not Scalar's internal nav list. */
+.scalar-wrapper .t-doc__sidebar {
+  top: 5rem !important;
+  height: calc(100vh - 5rem) !important;
+  overflow-y: auto !important;
+  padding: 0 !important;
+}
+
+/* Strip internal padding from the sidebar scroll area */
+.scalar-wrapper .sidebar-height {
+  padding: 0.5rem 0.25rem 0 !important;
+}
+
+/* The flex column inside sidebar-height that holds search + nav groups */
+.scalar-wrapper .sidebar-height > div {
+  padding: 0 !important;
+  gap: 0.75rem !important;
+}
+
+/* ── Sidebar search bar container — has px-3 pt-3, remove left padding ── */
+.scalar-wrapper .t-doc__sidebar .flex.gap-1\.5.px-3 {
+  padding-left: 0 !important;
+}
+
+/* ── Sidebar footer (Open API Client / Powered by Scalar) — has p-3, remove left padding ── */
+.scalar-wrapper .t-doc__sidebar .flex.flex-col.gap-3.p-3 {
+  padding-left: 0 !important;
+}
+
+/* ── Sidebar nav items list — has p-3, remove left padding ── */
+/* Also disable independent scrolling so the page scrolls naturally. */
+.scalar-wrapper .t-doc__sidebar ul.group\/items {
+  padding-left: 0 !important;
+  overflow: visible !important;
+}
+
+/* ── Sidebar nav buttons ── */
+/* The actual button element uses classes: group/button peer/button rounded p-2 */
+.scalar-wrapper .scalar-app .peer\/button {
+  padding: 0.5rem 0.75rem !important;
+  border-radius: var(--radius-md) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
+
+/* Space between nav items (li elements) */
+.scalar-wrapper .scalar-app li.group\/item {
+  margin-bottom: 0.125rem !important;
+}
+
+/* Space between nav groups / sections */
+.scalar-wrapper .scalar-app .group\/section {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+/* ── Right content column ── */
+.scalar-wrapper .references-rendered {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.scalar-wrapper .section-container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+/* ── Dev toolbar ── */
+.scalar-wrapper .api-reference-toolbar {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.scalar-wrapper .references-classic-header-container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+/* ── Layout grid ── */
+.scalar-wrapper .references-layout {
+  gap: 2.5rem !important;
+}
+
+/* ── Remove vertical sidebar/content border ── */
+.scalar-wrapper .references-sidebar,
+.scalar-wrapper .t-doc__sidebar {
+  border-right: none !important;
+}
+.scalar-wrapper .scalar-sidebar-indent-border,
+.scalar-wrapper .bg-sidebar-indent-border {
+  display: none !important;
+}
+.scalar-wrapper .border-sidebar-border {
+  border-color: transparent !important;
+}
+
+/* ── Soften horizontal section dividers ── */
+.scalar-wrapper .section-accordion-content,
+.scalar-wrapper .section-accordion-transparent {
+  border-color: oklch(0.33 0.025 195 / 0.2) !important;
+}
+
+/* ── Remove top spacing on Scalar root container ── */
+.scalar-wrapper .scalar-api-reference {
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+}
+
+/* ── Ask AI overlay — match app modal backdrop ── */
+.scalar-wrapper .agent-scalar-overlay {
+  background: oklch(0 0 0 / 0.8) !important;
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+}
+
+/* ── Ask AI drawer panel — match app card/dialog styles ── */
+.scalar-wrapper .agent-scalar {
+  background: oklch(0.28 0.04 255 / 0.5) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border-radius: var(--radius-card) !important;
+  box-shadow: 0 0 0 1px oklch(0.33 0.025 195) !important;
+  margin: 1rem !important;
+}
+
+/* ── Search / command palette modal ── */
+/* Scalar's commandmenu is position:fixed but has no z-index, so it renders
+   behind the app Nav (z-50). Lift both the overlay and the panel above it. */
+.scalar-wrapper .commandmenu-overlay {
+  z-index: 60 !important;
+  background: oklch(0 0 0 / 0.6) !important;
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+}
+.scalar-wrapper .commandmenu {
+  z-index: 61 !important;
+  border: 1px solid oklch(0.33 0.025 195 / 0.6) !important;
+}
+
+/* Same treatment for the generic scalar-modal (e.g. API client) */
+.scalar-wrapper .scalar-modal-layout {
+  z-index: 60 !important;
+}
+
+/* ── Hide Scalar's dark/light mode toggle in sidebar footer ── */
+.scalar-wrapper .t-doc__sidebar .group\/toggle {
+  display: none !important;
+}