nobalmako 1.0.0

package/src/components/AppLayout.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { 
+  Shield, 
+  LayoutDashboard, 
+  Settings, 
+  Key, 
+  LogOut, 
+  Menu, 
+  X, 
+  ChevronRight, 
+  User, 
+  Plus,
+  History,
+  BookOpen,
+  Globe
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useAuth } from '@/hooks/use-auth';
+import { Separator } from '@/components/ui/separator';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const pathname = usePathname();
+  const { user, logout } = useAuth();
+  const router = useRouter();
+
+  const navigation = [
+    { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, protected: true },
+    { name: 'API Keys', href: '/api-keys', icon: Key, protected: true },
+    { name: 'Audit Log', href: '/audit-log', icon: History, protected: true },
+    { name: 'Docs', href: '/docs', icon: BookOpen, protected: false },
+    { name: 'API Reference', href: '/api-reference', icon: Globe, protected: false },
+  ];
+
+  const handleLogout = async () => {
+    await logout();
+    router.push('/');
+  };
+
+  const getInitials = (name: string) => {
+    return name.split(' ').map(n => n[0]).join('').toUpperCase();
+  };
+
+  const filteredNavigation = navigation.filter(item => !item.protected || user);
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      {/* Sidebar for desktop */}
+      <aside 
+        className={`${
+          sidebarOpen ? 'w-64' : 'w-20'
+        } hidden md:flex flex-col border-r bg-card transition-all duration-300 ease-in-out shadow-sm`}
+      >
+        <div className="p-6 flex items-center justify-between">
+          <Link href={user ? "/dashboard" : "/"} className="flex items-center space-x-2">
+            <Shield className="h-8 w-8 text-primary" />
+            {sidebarOpen && <span className="text-xl font-bold tracking-tight text-foreground">Nobalmako</span>}
+          </Link>
+        </div>
+
+        <nav className="flex-1 px-4 space-y-2">
+          {filteredNavigation.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.name}
+                href={item.href}
+                className={`flex items-center space-x-3 px-3 py-2 rounded-lg transition-all duration-200 ${
+                  isActive 
+                    ? 'bg-primary shadow-md text-primary-foreground' 
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                }`}
+              >
+                <item.icon className={`h-5 w-5 shrink-0 ${isActive ? 'text-primary-foreground' : 'text-muted-foreground'}`} />
+                {sidebarOpen && <span className="font-medium text-sm">{item.name}</span>}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {user && (
+          <div className="p-4 mt-auto border-t border-border/50">
+            <Button 
+              variant="ghost" 
+              className="w-full justify-start text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+              onClick={handleLogout}
+            >
+              <LogOut className="h-5 w-5 shrink-0" />
+              {sidebarOpen && <span className="ml-3 font-medium text-sm">Logout</span>}
+            </Button>
+          </div>
+        )}
+      </aside>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col min-h-screen overflow-hidden">
+        {/* Top Navbar */}
+        <header className="h-16 border-b bg-card/80 backdrop-blur-md flex items-center justify-between px-4 md:px-8 sticky top-0 z-30 shadow-sm">
+          <div className="flex items-center">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden mr-2"
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+            >
+              <Menu className="h-6 w-6" />
+            </Button>
+            
+            <Breadcrumb name={navigation.find(n => n.href === pathname)?.name || 'Project Details'} />
+          </div>
+
+          <div className="flex items-center space-x-4">
+            {user ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="relative h-10 w-10 rounded-full border border-border/50 hover:border-primary/50 transition-colors bg-muted/20">
+                    <Avatar className="h-9 w-9">
+                      <AvatarImage src={user?.avatar || ''} alt={user?.name || ''} />
+                      <AvatarFallback className="bg-primary/10 text-primary font-bold">{user?.name ? getInitials(user.name) : 'U'}</AvatarFallback>
+                    </Avatar>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-64" align="end" sideOffset={8}>
+                  <DropdownMenuLabel className="font-normal p-4">
+                    <div className="flex flex-col space-y-1">
+                      <p className="text-sm font-semibold text-foreground">{user?.name}</p>
+                      <p className="text-xs text-muted-foreground truncate">{user?.email}</p>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => router.push('/profile')} className="cursor-pointer py-2.5">
+                    <User className="mr-3 h-4 w-4 text-muted-foreground" />
+                    <span>Profile Settings</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => router.push('/audit-log')} className="cursor-pointer py-2.5">
+                    <History className="mr-3 h-4 w-4 text-muted-foreground" />
+                    <span>Audit Logs</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={handleLogout} className="text-destructive cursor-pointer py-2.5 font-medium">
+                    <LogOut className="mr-3 h-4 w-4" />
+                    <span>Log out</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <div className="flex items-center gap-3">
+                <Button variant="ghost" asChild className="hidden sm:inline-flex">
+                  <Link href="/auth">Sign In</Link>
+                </Button>
+                <Button asChild className="shadow-lg shadow-primary/20">
+                  <Link href="/auth">Get Started</Link>
+                </Button>
+              </div>
+            )}
+          </div>
+        </header>
+
+        {/* Main Content Area */}
+        <main className="flex-1 overflow-y-auto bg-[#fafafa]  p-4 md:p-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function Breadcrumb({ name }: { name: string }) {
+  return (
+    <div className="flex items-center text-sm font-medium">
+      <span className="text-muted-foreground">App</span>
+      <ChevronRight className="h-4 w-4 mx-2 text-muted-foreground/50" />
+      <span className="text-foreground">{name}</span>
+    </div>
+  );
+}

package/src/components/BulkActions.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Trash2, Download } from "lucide-react";
+import { useVariables } from "@/hooks/use-variables";
+
+interface BulkActionsProps {
+  selectedVariables: string[];
+  onSelectionChange: (selected: string[]) => void;
+  onRefresh: () => void;
+}
+
+export default function BulkActions({ selectedVariables, onSelectionChange, onRefresh }: BulkActionsProps) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { refetch } = useVariables();
+
+  const handleBulkDelete = async () => {
+    if (selectedVariables.length === 0) return;
+
+    setIsDeleting(true);
+    try {
+      const deletePromises = selectedVariables.map(id =>
+        fetch('/api/variables', {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ id }),
+        })
+      );
+
+      await Promise.all(deletePromises);
+      onSelectionChange([]);
+      refetch();
+      onRefresh();
+    } catch (error) {
+      console.error('Bulk delete failed:', error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleExport = () => {
+    // Export selected variables as JSON
+    const exportData = {
+      exportedAt: new Date().toISOString(),
+      variables: selectedVariables,
+    };
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+      type: 'application/json',
+    });
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `nobalmako-variables-${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  if (selectedVariables.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center space-x-2 p-3 bg-muted rounded-lg">
+      <span className="text-sm font-medium">
+        {selectedVariables.length} variable{selectedVariables.length !== 1 ? 's' : ''} selected
+      </span>
+
+      <div className="flex items-center space-x-1">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleExport}
+          disabled={isDeleting}
+        >
+          <Download className="h-4 w-4 mr-1" />
+          Export
+        </Button>
+
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              variant="destructive"
+              size="sm"
+              disabled={isDeleting}
+            >
+              <Trash2 className="h-4 w-4 mr-1" />
+              {isDeleting ? 'Deleting...' : 'Delete Selected'}
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete Variables</AlertDialogTitle>
+              <AlertDialogDescription>
+                Are you sure you want to delete {selectedVariables.length} variable{selectedVariables.length !== 1 ? 's' : ''}?
+                This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handleBulkDelete}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onSelectionChange([])}
+        >
+          Clear Selection
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/CreateEnvironmentDialog.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus, Globe, Layers, Type, AlignLeft } from "lucide-react";
+import { useTeams } from "@/hooks/use-teams";
+import { useEnvironments } from "@/hooks/use-environments";
+
+interface CreateEnvironmentDialogProps {
+  teamId?: string;
+  children?: React.ReactNode;
+}
+
+export default function CreateEnvironmentDialog({ teamId, children }: CreateEnvironmentDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [parentId, setParentId] = useState("");
+  const [selectedTeamId, setSelectedTeamId] = useState(teamId || "");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const { teams } = useTeams();
+  const { environments } = useEnvironments();
+  const queryClient = useQueryClient();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/environments', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name,
+          description,
+          teamId: selectedTeamId,
+          parentId: parentId || null
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        setName("");
+        setDescription("");
+        setParentId("");
+        if (!teamId) setSelectedTeamId("");
+        queryClient.invalidateQueries({ queryKey: ['environments'] });
+      } else {
+        setError(data.error || "Failed to create environment");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button className="shadow-sm">
+            <Plus className="h-4 w-4 mr-2" />
+            New Environment
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <div className="flex items-center gap-2 mb-1">
+            <div className="p-1.5 bg-primary/10 rounded-md">
+              <Globe className="h-5 w-5 text-primary" />
+            </div>
+            <DialogTitle className="text-xl">Create New Environment</DialogTitle>
+          </div>
+          <DialogDescription>
+            Environments like "Production" or "Staging" help isolate your configuration.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-6 pt-4">
+          {error && (
+            <div className="text-sm font-medium text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20">
+              {error}
+            </div>
+          )}
+
+          <div className="space-y-4">
+            {!teamId && (
+              <div className="grid gap-2">
+                <Label htmlFor="team" className="flex items-center gap-2">
+                  <Layers className="h-3.5 w-3.5 text-muted-foreground" />
+                  Target Project
+                </Label>
+                <Select value={selectedTeamId} onValueChange={setSelectedTeamId} required>
+                  <SelectTrigger className="bg-muted/30 border-muted">
+                    <SelectValue placeholder="Select a project" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {teams?.map((team) => (
+                      <SelectItem key={team.id} value={team.id}>
+                        {team.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+            
+            <div className="grid gap-2">
+              <Label htmlFor="name" className="flex items-center gap-2">
+                <Type className="h-3.5 w-3.5 text-muted-foreground" />
+                Environment Name
+              </Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. production, staging, local"
+                required
+                disabled={isLoading}
+                className="bg-muted/30 border-muted"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="description" className="flex items-center gap-2">
+                <AlignLeft className="h-3.5 w-3.5 text-muted-foreground" />
+                Description <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
+              </Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="What is this environment used for?"
+                className="resize-none min-h-[100px] bg-muted/30 border-muted"
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="parent" className="flex items-center gap-2">
+                <Layers className="h-3.5 w-3.5 text-muted-foreground" />
+                Parent Environment <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
+              </Label>
+              <Select value={parentId} onValueChange={setParentId} disabled={isLoading}>
+                <SelectTrigger className="bg-muted/30 border-muted">
+                  <SelectValue placeholder="Inherit variables from..." />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">None (Stand-alone)</SelectItem>
+                  {environments?.filter(e => e.teamId === selectedTeamId).map((env) => (
+                    <SelectItem key={env.id} value={env.id}>
+                      {env.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-[10px] text-muted-foreground mt-0.5">
+                Variables from the parent will be available in this environment unless overridden.
+              </p>
+            </div>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button 
+              type="button" 
+              variant="ghost" 
+              onClick={() => setOpen(false)} 
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading || (!teamId && !selectedTeamId)} className="px-8">
+              {isLoading ? "Creating..." : "Create Environment"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}