better-auth-studio 1.0.6 → 1.0.7

package/frontend/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/frontend/src/App.tsx

@@ -1,36 +0,0 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
-import { Toaster } from 'sonner'
-import Layout from './components/Layout'
-import Dashboard from './pages/Dashboard'
-import Users from './pages/Users'
-import Organizations from './pages/Organizations'
-import OrganizationDetails from './pages/OrganizationDetails'
-import TeamDetails from './pages/TeamDetails'
-import Sessions from './pages/Sessions'
-import Settings from './pages/Settings'
-
-function App() {
-  return (
-    <Router>
-      <Layout>
-        <Routes>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/users" element={<Users />} />
-          <Route path="/organizations" element={<Organizations />} />
-          <Route path="/organizations/:orgId" element={<OrganizationDetails />} />
-          <Route path="/teams/:teamId" element={<TeamDetails />} />
-          <Route path="/sessions" element={<Sessions />} />
-          <Route path="/settings" element={<Settings />} />
-        </Routes>
-      </Layout>
-      <Toaster 
-        theme="dark" 
-        position="top-right"
-        richColors
-        closeButton
-      />
-    </Router>
-  )
-}
-
-export default App

package/frontend/src/components/CommandPalette.tsx

@@ -1,219 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Command } from 'cmdk'
-import {
-  Search,
-  Users,
-  Building2,
-  Settings,
-  BarChart3,
-  UserPlus,
-  Mail,
-  Plus,
-  ArrowRight
-} from 'lucide-react'
-
-interface CommandItem {
-  id: string
-  title: string
-  description: string
-  icon: React.ComponentType<any>
-  action: () => void
-  category: string
-  keywords?: string[]
-}
-
-interface CommandPaletteProps {
-  isOpen: boolean
-  onClose: () => void
-}
-
-export default function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
-  const navigate = useNavigate()
-  const [search, setSearch] = useState('')
-
-  const commands: CommandItem[] = [
-    {
-      id: 'users',
-      title: 'Users',
-      description: 'Manage users and their accounts',
-      icon: Users,
-      action: () => navigate('/users'),
-      category: 'Navigation',
-      keywords: ['user', 'account', 'profile']
-    },
-    {
-      id: 'organizations',
-      title: 'Organizations',
-      description: 'Manage organizations and teams',
-      icon: Building2,
-      action: () => navigate('/organizations'),
-      category: 'Navigation',
-      keywords: ['org', 'company', 'team']
-    },
-    {
-      id: 'sessions',
-      title: 'Sessions',
-      description: 'View active user sessions',
-      icon: BarChart3,
-      action: () => navigate('/sessions'),
-      category: 'Navigation',
-      keywords: ['session', 'login', 'active']
-    },
-    {
-      id: 'settings',
-      title: 'Settings',
-      description: 'Configure Better Auth Studio',
-      icon: Settings,
-      action: () => navigate('/settings'),
-      category: 'Navigation',
-      keywords: ['config', 'setup', 'preferences']
-    },
-    {
-      id: 'dashboard',
-      title: 'Dashboard',
-      description: 'View overview and statistics',
-      icon: BarChart3,
-      action: () => navigate('/'),
-      category: 'Navigation',
-      keywords: ['overview', 'stats', 'home']
-    },
-    {
-      id: 'create-user',
-      title: 'Create User',
-      description: 'Add a new user to the system',
-      icon: UserPlus,
-      action: () => navigate('/users'),
-      category: 'Actions',
-      keywords: ['add', 'new', 'register']
-    },
-    {
-      id: 'create-organization',
-      title: 'Create Organization',
-      description: 'Create a new organization',
-      icon: Plus,
-      action: () => navigate('/organizations'),
-      category: 'Actions',
-      keywords: ['add', 'new', 'org']
-    },
-    {
-      id: 'invite-user',
-      title: 'Invite User',
-      description: 'Send invitation to join organization',
-      icon: Mail,
-      action: () => navigate('/organizations'),
-      category: 'Actions',
-      keywords: ['invite', 'email', 'send']
-    }
-  ]
-
-  const filteredCommands = commands.filter((command) => {
-    const searchLower = search.toLowerCase()
-    return (
-      command.title.toLowerCase().includes(searchLower) ||
-      command.description.toLowerCase().includes(searchLower) ||
-      command.keywords?.some(keyword => keyword.toLowerCase().includes(searchLower))
-    )
-  })
-
-  const groupedCommands = filteredCommands.reduce((acc, command) => {
-    if (!acc[command.category]) {
-      acc[command.category] = []
-    }
-    acc[command.category].push(command)
-    return acc
-  }, {} as Record<string, CommandItem[]>)
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [])
-
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose()
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape)
-      return () => document.removeEventListener('keydown', handleEscape)
-    }
-  }, [isOpen, onClose])
-
-  if (!isOpen) return null
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-start justify-center pt-[20vh] z-50">
-      <div className="bg-black/90 border border-dashed border-white/20 rounded-none w-full max-w-2xl mx-4">
-        <Command className="p-2">
-          <div className="flex items-center border-b border-dashed border-white/10 px-3 pb-3">
-            <Search className="w-4 h-4 text-gray-400 mr-3" />
-            <Command.Input
-              value={search}
-              onValueChange={setSearch}
-              placeholder="Search for actions, pages, or commands..."
-              className="flex-1 bg-transparent text-white placeholder-gray-400 outline-none"
-              autoFocus
-            />
-            <kbd className="hidden sm:inline-flex items-center px-2 py-1 text-xs text-gray-400 border border-dashed border-white/20 rounded-sm">
-              ESC
-            </kbd>
-          </div>
-          
-          <Command.List className="max-h-96 overflow-y-auto p-2">
-            {Object.keys(groupedCommands).length === 0 ? (
-              <div className="text-center py-8 text-gray-400">
-                <Search className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                <p>No results found</p>
-                <p className="text-sm">Try a different search term</p>
-              </div>
-            ) : (
-              Object.entries(groupedCommands).map(([category, categoryCommands]) => (
-                <div key={category} className="mb-4">
-                  <Command.Group heading={category} className="text-xs text-gray-400 font-medium mb-2 px-2">
-                    {categoryCommands.map((command) => {
-                      const Icon = command.icon
-                      return (
-                        <Command.Item
-                          key={command.id}
-                          value={command.id}
-                          onSelect={() => {
-                            command.action()
-                            onClose()
-                          }}
-                          className="flex items-center space-x-3 px-3 py-2 rounded-none hover:bg-white/5 cursor-pointer transition-colors"
-                        >
-                          <Icon className="w-4 h-4 text-white" />
-                          <div className="flex-1">
-                            <div className="text-white font-light">{command.title}</div>
-                            <div className="text-sm text-gray-400">{command.description}</div>
-                          </div>
-                          <ArrowRight className="w-4 h-4 text-gray-400" />
-                        </Command.Item>
-                      )
-                    })}
-                  </Command.Group>
-                </div>
-              ))
-            )}
-          </Command.List>
-          
-          <div className="border-t border-dashed border-white/10 px-3 py-2 text-xs text-gray-400">
-            <div className="flex items-center justify-between">
-              <span>Press <kbd className="px-1 py-0.5 border border-dashed border-white/20 rounded-sm">↑↓</kbd> to navigate</span>
-              <span>Press <kbd className="px-1 py-0.5 border border-dashed border-white/20 rounded-sm">Enter</kbd> to select</span>
-            </div>
-          </div>
-        </Command>
-      </div>
-    </div>
-  )
-}

package/frontend/src/components/Layout.tsx

@@ -1,159 +0,0 @@
-import { ReactNode, useState, useEffect } from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import {
-  LayoutDashboard,
-  Users,
-  Building2,
-  Settings,
-  Search
-} from 'lucide-react'
-import { Button } from './ui/button'
-import { Badge } from './ui/badge'
-import CommandPalette from './CommandPalette'
-
-interface LayoutProps {
-  children: ReactNode
-}
-
-interface Counts {
-  users: number
-  organizations: number
-  sessions: number
-}
-
-export default function Layout({ children }: LayoutProps) {
-  const location = useLocation()
-  const [counts, setCounts] = useState<Counts>({ users: 0, organizations: 0, sessions: 0 })
-  const [loading, setLoading] = useState(true)
-  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false)
-
-  useEffect(() => {
-    fetchCounts()
-  }, [])
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault()
-        setIsCommandPaletteOpen(true)
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [])
-
-  const fetchCounts = async () => {
-    try {
-      const response = await fetch('/api/counts')
-      const data = await response.json()
-      setCounts(data)
-    } catch (error) {
-      console.error('Failed to fetch counts:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const formatCount = (count: number): string => {
-    if (count >= 1000) {
-      return (count / 1000).toFixed(1).replace(/\.0$/, '') + 'k'
-    }
-    return count.toString()
-  }
-
-  const navigation = [
-    { name: 'Dashboard', href: '/', icon: LayoutDashboard },
-    { name: 'Users', href: '/users', icon: Users, badge: loading ? '...' : formatCount(counts.users) },
-    { name: 'Organizations', href: '/organizations', icon: Building2, badge: loading ? '...' : formatCount(counts.organizations) },
-    // { name: 'Sessions', href: '/sessions', icon: Shield, badge: loading ? '...' : formatCount(counts.sessions) },
-    { name: 'Settings', href: '/settings', icon: Settings },
-  ]
-
-  return (
-    <div className="min-h-screen bg-black">
-      {/* Top Navigation */}
-      <div className="bg-black/70 border-b border-white/15">
-        <div className="flex items-center justify-between px-6 py-4">
-          <div className="flex items-center space-x-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
-                <span className="text-black font-bold text-lg">⚡</span>
-              </div>
-              <div>
-                <h1 className="text-xl font-bold text-white">Better Auth Studio</h1>
-                <p className="text-xs text-gray-300">v1.0.0</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center space-x-4">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-              <input
-                type="text"
-                placeholder="Search..."
-                onClick={() => setIsCommandPaletteOpen(true)}
-                className="pl-10 pr-4 py-2  bg-black border rounded-none border-gray-600 text-white border-dashed focus:ring-2 focus:ring-white focus:border-transparent transition-colors placeholder-gray-400 cursor-pointer"
-                readOnly
-              />
-              <kbd className="absolute right-3 top-1/2 transform -translate-y-1/2 text-xs text-gray-400 border border-dashed border-white/20 rounded-sm px-1.5 py-0.5">
-                ⌘K
-              </kbd>
-            </div>
-            <a href="https://better-auth.com/docs" target="_blank">
-              <Button variant="ghost" className="text-gray-300 bg-transparent hover:bg-transparent hover:bg-gray-900 border-dashed">
-                Docs
-              </Button>
-            </a>
-            <a href="https://better-auth.com/support" target="_blank">
-              <Button variant="ghost" className="text-gray-300 bg-transparent hover:bg-transparent hover:bg-gray-900 border-dashed">
-                Support
-              </Button>
-            </a>
-          </div>
-        </div>
-      </div>
-
-      {/* Top Navigation Tabs */}
-      <div className="bg-black/50 border-b border-white/10">
-        <div className="px-6">
-          <nav className="flex space-x-8">
-            {navigation.map((item) => {
-              const isActive = location.pathname === item.href
-              return (
-                <Link
-                  key={item.name}
-                  to={item.href}
-                  className={`flex items-center space-x-2 px-3 py-4 text-sm font-medium border-b-2 transition-all duration-200 ${isActive
-                    ? 'border-white text-white'
-                    : 'border-transparent text-gray-400 hover:text-white hover:border-gray-300'
-                    }`}
-                >
-                  <item.icon className="w-4 h-4" />
-                  <span>{item.name}</span>
-                  {item.badge && (
-                    <Badge variant="secondary" className="text-xs bg-white/10 border border-white/20 rounded-sm">
-                      {item.badge}
-                    </Badge>
-                  )}
-                </Link>
-              )
-            })}
-          </nav>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 p-0">
-        {children}
-      </div>
-
-      {/* Command Palette */}
-      <CommandPalette 
-        isOpen={isCommandPaletteOpen} 
-        onClose={() => setIsCommandPaletteOpen(false)} 
-      />
-    </div>
-  )
-}

package/frontend/src/components/ui/badge.tsx

@@ -1,40 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-white text-black hover:bg-white",
-        secondary:
-          "border-transparent bg-gray-800 text-white hover:bg-gray-800 border border-gray-600",
-        destructive:
-          "border-transparent bg-red-500 text-white hover:bg-red-600",
-        outline: "text-gray-300 border-gray-600",
-        success: "border-transparent bg-green-900 text-green-300",
-        warning: "border-transparent bg-yellow-900 text-yellow-300",
-        error: "border-transparent bg-red-900 text-red-300",
-        info: "border-transparent bg-gray-800 text-white border border-gray-600",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
-}
-
-export { Badge, badgeVariants }

package/frontend/src/components/ui/button.tsx

@@ -1,53 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-white text-black hover:bg-white shadow",
-        destructive: "bg-red-500 text-white hover:bg-red-600 shadow",
-        outline: "border border-white bg-black hover:bg-black hover:text-white",
-        secondary: "bg-black text-white hover:bg-black shadow border border-white",
-        ghost: "hover:bg-black text-white hover:text-white",
-        link: "text-white underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }

package/frontend/src/components/ui/card.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border border-gray-700 bg-gray-900 text-white shadow-sm",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight text-white",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-gray-300", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/frontend/src/components/ui/input.tsx

@@ -1,20 +0,0 @@
-import * as React from "react"
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={`flex h-10 w-full border border-dashed border-white/20 bg-black/30 px-3 py-2 text-sm text-white placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-white focus:border-white/40 disabled:cursor-not-allowed disabled:opacity-50 rounded-none ${className}`}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }

package/frontend/src/components/ui/label.tsx

@@ -1,19 +0,0 @@
-import * as React from "react"
-
-export interface LabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {}
-
-const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <label
-        className={`text-sm font-light text-white ${className}`}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Label.displayName = "Label"
-
-export { Label }