nobalmako 1.0.0

package/src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background  focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring   text-foreground  inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20  aria-invalid:border-destructive  flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/hooks/use-api-keys.ts

@@ -0,0 +1,95 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import { useAuth } from "./use-auth";
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  permissions: string[];
+  lastUsed: string | null;
+  createdAt: string;
+  expiresAt: string | null;
+  teamId: string | null;
+  teamName: string | null;
+}
+
+export function useApiKeys() {
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { user } = useAuth();
+
+  const fetchApiKeys = async () => {
+    if (!user) return;
+    
+    setIsLoading(true);
+    try {
+      const response = await fetch("/api/api-keys");
+      if (!response.ok) {
+        throw new Error("Failed to fetch API keys");
+      }
+      const data = await response.json();
+      setApiKeys(data.apiKeys || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchApiKeys();
+  }, [user]);
+
+  const createApiKey = async (data: {
+    name: string;
+    teamId?: string;
+    permissions?: string[];
+    expiresAt?: string;
+  }) => {
+    try {
+      const response = await fetch("/api/api-keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to create API key");
+      }
+
+      const result = await response.json();
+      await fetchApiKeys();
+      return result;
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  const deleteApiKey = async (id: string) => {
+    try {
+      const response = await fetch(`/api/api-keys/${id}`, {
+        method: "DELETE",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to delete API key");
+      }
+
+      await fetchApiKeys();
+    } catch (err) {
+      throw err;
+    }
+  };
+
+  return {
+    apiKeys,
+    isLoading,
+    error,
+    createApiKey,
+    deleteApiKey,
+    refetch: fetchApiKeys,
+  };
+}

package/src/hooks/use-audit-logs.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import { useAuth } from "./use-auth";
+
+export interface AuditLog {
+  id: string;
+  userId: string | null;
+  userName: string | null;
+  userEmail: string | null;
+  teamId: string | null;
+  teamName: string | null;
+  action: string;
+  resourceType: string;
+  resourceId: string;
+  oldValue: any;
+  newValue: any;
+  ipAddress: string | null;
+  userAgent: string | null;
+  createdAt: string;
+}
+
+export function useAuditLogs(teamId?: string) {
+  const [logs, setLogs] = useState<AuditLog[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { user } = useAuth();
+
+  const fetchLogs = async () => {
+    if (!user) return;
+    
+    setIsLoading(true);
+    try {
+      const url = teamId ? `/api/audit-logs?teamId=${teamId}` : "/api/audit-logs";
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error("Failed to fetch audit logs");
+      }
+      const data = await response.json();
+      setLogs(data.logs || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+  }, [user, teamId]);
+
+  return {
+    logs,
+    isLoading,
+    error,
+    refetch: fetchLogs,
+  };
+}

package/src/hooks/use-auth.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string | null;
+  mfaEnabled?: boolean;
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (email: string, password: string, mfaToken?: string) => Promise<{ success: boolean; error?: string; mfaRequired?: boolean }>;
+  register: (name: string, email: string, password: string, confirmPassword: string, inviteToken?: string) => Promise<{ success: boolean; error?: string }>;
+  logout: () => Promise<void>;
+  isLoading: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Check if user is logged in on mount
+  useEffect(() => {
+    checkAuthStatus();
+  }, []);
+
+  const checkAuthStatus = async () => {
+    try {
+      const response = await fetch('/api/auth/me');
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+      }
+    } catch (error) {
+      console.error('Auth check failed:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const login = async (email: string, password: string, mfaToken?: string) => {
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email, password, mfaToken }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        if (data.mfaRequired) {
+          return { success: false, mfaRequired: true };
+        }
+        setUser(data.user);
+        return { success: true };
+      } else {
+        return { success: false, error: data.error };
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+      return { success: false, error: 'Network error' };
+    }
+  };
+
+  const register = async (name: string, email: string, password: string, confirmPassword: string, inviteToken?: string) => {
+    try {
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, email, password, confirmPassword, inviteToken }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        // After successful registration, automatically log them in
+        return await login(email, password);
+      } else {
+        return { success: false, error: data.error };
+      }
+    } catch (error) {
+      console.error('Registration error:', error);
+      return { success: false, error: 'Network error' };
+    }
+  };
+
+  const logout = async () => {
+    try {
+      await fetch('/api/auth/logout', {
+        method: 'POST',
+      });
+      setUser(null);
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, login, register, logout, isLoading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

package/src/hooks/use-environments.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+
+export interface Environment {
+  id: string;
+  name: string;
+  description: string | null;
+  teamId: string;
+  color: string | null;
+  isDefault: boolean;
+  createdAt: Date;
+  teamName: string;
+}
+
+export function useEnvironments() {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['environments'],
+    queryFn: async () => {
+      const response = await fetch('/api/environments');
+      if (!response.ok) {
+        throw new Error('Failed to fetch environments');
+      }
+      const data = await response.json();
+      return data.environments as Environment[];
+    }
+  });
+
+  return { 
+    environments: data || [], 
+    isLoading, 
+    error: error instanceof Error ? error.message : null, 
+    refetch 
+  };
+}

package/src/hooks/use-project-permissions.ts

@@ -0,0 +1,49 @@
+'use client';
+
+import { useTeams } from "./use-teams";
+import { useTeamMembers } from "./use-team-members";
+import { useAuth } from "./use-auth";
+
+export type Role = 'owner' | 'admin' | 'developer' | 'viewer';
+
+export const RoleHierarchy: Record<Role, number> = {
+  owner: 4,
+  admin: 3,
+  developer: 2,
+  viewer: 1,
+};
+
+export function useProjectPermissions(teamId: string) {
+  const { user } = useAuth();
+  const { teams } = useTeams();
+  const { data: members } = useTeamMembers(teamId);
+
+  const team = teams?.find(t => t.id === teamId);
+  const member = members?.find(m => m.userId === user?.id);
+
+  let userRole: Role | null = null;
+
+  if (team && user && team.ownerId === user.id) {
+    userRole = 'owner';
+  } else if (member) {
+    userRole = member.role as Role;
+  }
+
+  const hasRole = (requiredRole: Role) => {
+    if (!userRole) return false;
+    return RoleHierarchy[userRole] >= RoleHierarchy[requiredRole];
+  };
+
+  return {
+    role: userRole,
+    members: members || [],
+    isLoading: !members,
+    canManageProject: hasRole('admin'),
+    canManageSecrets: hasRole('developer'),
+    canViewSecrets: hasRole('viewer'),
+    isOwner: userRole === 'owner',
+    isAdmin: userRole === 'admin',
+    isDeveloper: userRole === 'developer',
+    isViewer: userRole === 'viewer',
+  };
+}

package/src/hooks/use-team-members.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+
+export interface TeamMember {
+  id: string;
+  teamId: string;
+  userId: string;
+  role: 'owner' | 'admin' | 'member';
+  joinedAt: string;
+  user: {
+    id: string;
+    name: string;
+    email: string;
+    avatar?: string;
+  };
+}
+
+export function useTeamMembers(teamId: string) {
+  return useQuery({
+    queryKey: ['team-members', teamId],
+    queryFn: async (): Promise<TeamMember[]> => {
+      const response = await fetch(`/api/team-members?teamId=${teamId}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch team members');
+      }
+      const data = await response.json();
+      return data.members || [];
+    },
+    enabled: !!teamId,
+  });
+}

package/src/hooks/use-teams.ts

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+
+export interface Team {
+  id: string;
+  name: string;
+  description: string | null;
+  ownerId: string;
+  color: string | null;
+  isDefault: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export function useTeams() {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['teams'],
+    queryFn: async () => {
+      const response = await fetch('/api/teams');
+      if (!response.ok) {
+        throw new Error('Failed to fetch teams');
+      }
+      const data = await response.json();
+      return data.teams as Team[];
+    }
+  });
+
+  return { 
+    teams: data || [], 
+    isLoading, 
+    error: error instanceof Error ? error.message : null, 
+    refetch 
+  };
+}

package/src/hooks/use-variables.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+
+export interface EnvironmentVariable {
+  id: string;
+  key: string;
+  value: string;
+  description: string | null;
+  isSecret: boolean;
+  isDynamic?: boolean;
+  provider?: string | null;
+  expiresAt?: Date | string | null;
+  teamId: string;
+  environmentId: string;
+  createdAt: Date;
+  teamName: string;
+  environmentName: string;
+}
+
+export function useVariables() {
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: ['variables'],
+    queryFn: async () => {
+      const response = await fetch('/api/variables');
+      if (!response.ok) {
+        throw new Error('Failed to fetch variables');
+      }
+      const data = await response.json();
+      return data.variables as EnvironmentVariable[];
+    }
+  });
+
+  return { 
+    variables: data || [], 
+    isLoading, 
+    error: error instanceof Error ? error.message : null, 
+    refetch 
+  };
+}

package/src/lib/audit.ts

@@ -0,0 +1,36 @@
+import { db } from '@/lib/db';
+import { auditLogs } from '@/lib/schema';
+
+export interface AuditLogData {
+  userId?: string;
+  teamId?: string;
+  action: 'create' | 'update' | 'delete' | 'view';
+  resourceType: 'variable' | 'environment' | 'team' | 'member';
+  resourceId: string;
+  oldValue?: Record<string, unknown>;
+  newValue?: Record<string, unknown>;
+  ipAddress?: string;
+  userAgent?: string;
+}
+
+export async function createAuditLog(data: AuditLogData) {
+  try {
+    // Get IP and user agent from headers if available
+    // This would typically come from the request object in API routes
+
+    await db.insert(auditLogs).values({
+      userId: data.userId,
+      teamId: data.teamId,
+      action: data.action,
+      resourceType: data.resourceType,
+      resourceId: data.resourceId,
+      oldValue: data.oldValue ? JSON.stringify(data.oldValue) : null,
+      newValue: data.newValue ? JSON.stringify(data.newValue) : null,
+      ipAddress: data.ipAddress,
+      userAgent: data.userAgent,
+    });
+  } catch (error) {
+    // Log audit errors but don't fail the main operation
+    console.error('Failed to create audit log:', error);
+  }
+}