nobalmako 1.0.0

package/src/components/CreateTeamDialog.tsx

@@ -0,0 +1,174 @@
+'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 { Plus, Shield, Palette, Type, AlignLeft } from "lucide-react";
+import { useTeams } from "@/hooks/use-teams";
+
+interface CreateTeamDialogProps {
+  children?: React.ReactNode;
+}
+
+export default function CreateTeamDialog({ children }: CreateTeamDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [color, setColor] = useState("#3b82f6");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const queryClient = useQueryClient();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/teams', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, description, color }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        setName("");
+        setDescription("");
+        setColor("#3b82f6");
+        // Invalidate and refetch teams
+        queryClient.invalidateQueries({ queryKey: ['teams'] });
+      } else {
+        setError(data.error || "Failed to create team");
+      }
+    } 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 Project
+          </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">
+              <Shield className="h-5 w-5 text-primary" />
+            </div>
+            <DialogTitle className="text-xl">Create New Project</DialogTitle>
+          </div>
+          <DialogDescription>
+            Setting up a new project helps you organize variables by application or service.
+          </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">
+            <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" />
+                Project Name
+              </Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. Acme API, Frontend Dashboard"
+                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 service or application is this for?"
+                className="resize-none min-h-[100px] bg-muted/30 border-muted"
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="color" className="flex items-center gap-2">
+                <Palette className="h-3.5 w-3.5 text-muted-foreground" />
+                Identity Color
+              </Label>
+              <div className="flex items-center gap-4">
+                <div className="relative">
+                  <Input
+                    id="color"
+                    type="color"
+                    value={color}
+                    onChange={(e) => setColor(e.target.value)}
+                    className="w-14 h-11 p-1 rounded-md border-muted cursor-pointer"
+                    disabled={isLoading}
+                  />
+                </div>
+                <div className="flex-1 px-3 py-2 bg-muted/30 border border-muted rounded-md flex items-center justify-between">
+                  <span className="text-sm font-mono uppercase font-semibold text-muted-foreground">
+                    {color}
+                  </span>
+                  <div 
+                    className="w-4 h-4 rounded-full shadow-sm" 
+                    style={{ backgroundColor: color }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button 
+              type="button" 
+              variant="ghost" 
+              onClick={() => setOpen(false)} 
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading} className="px-8">
+              {isLoading ? "Creating..." : "Create Project"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/CreateVariableDialog.tsx

@@ -0,0 +1,311 @@
+'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, Eye, EyeOff, Database, Key, Type, AlignLeft, ShieldCheck, Layers, Calendar } from "lucide-react";
+import { useEnvironments } from "@/hooks/use-environments";
+import { useVariables } from "@/hooks/use-variables";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+
+interface CreateVariableDialogProps {
+  environmentId?: string;
+  children?: React.ReactNode;
+}
+
+export default function CreateVariableDialog({ environmentId, children }: CreateVariableDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [key, setKey] = useState("");
+  const [value, setValue] = useState("");
+  const [description, setDescription] = useState("");
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState(environmentId || "");
+  const [isSecret, setIsSecret] = useState(true);
+  const [isDynamic, setIsDynamic] = useState(false);
+  const [provider, setProvider] = useState("");
+  const [expiresAt, setExpiresAt] = useState("");
+  const [showValue, setShowValue] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const { environments } = useEnvironments();
+  const queryClient = useQueryClient();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const selectedEnv = environments?.find(e => e.id === selectedEnvironmentId);
+      
+      if (!selectedEnv) {
+        setError("Please select an environment");
+        setIsLoading(false);
+        return;
+      }
+
+      const response = await fetch('/api/variables', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          key,
+          value,
+          description,
+          environmentId: selectedEnvironmentId,
+          teamId: selectedEnv.teamId,
+          isSecret,
+          isDynamic,
+          provider: isDynamic ? provider : null,
+          expiresAt: expiresAt ? new Date(expiresAt).toISOString() : null,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        setKey("");
+        setValue("");
+        setDescription("");
+        if (!environmentId) setSelectedEnvironmentId("");
+        setIsSecret(true);
+        setExpiresAt("");
+        setShowValue(false);
+        queryClient.invalidateQueries({ queryKey: ['variables'] });
+      } else {
+        setError(data.error || "Failed to create variable");
+      }
+    } 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 Variable
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <div className="flex items-center gap-2 mb-1">
+            <div className="p-1.5 bg-primary/10 rounded-md">
+              <Database className="h-5 w-5 text-primary" />
+            </div>
+            <DialogTitle className="text-xl">Create New Variable</DialogTitle>
+          </div>
+          <DialogDescription>
+            Add a new environment variable or secret to your project 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">
+            {!environmentId && (
+              <div className="grid gap-2">
+                <Label htmlFor="environment" className="flex items-center gap-2">
+                  <Layers className="h-3.5 w-3.5 text-muted-foreground" />
+                  Target Environment
+                </Label>
+                <Select value={selectedEnvironmentId} onValueChange={setSelectedEnvironmentId} required>
+                  <SelectTrigger className="bg-muted/30 border-muted">
+                    <SelectValue placeholder="Select an environment" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {environments?.map((env) => (
+                      <SelectItem key={env.id} value={env.id}>
+                        {env.name} ({env.teamName})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            <div className="grid gap-2">
+              <Label htmlFor="key" className="flex items-center gap-2">
+                <Type className="h-3.5 w-3.5 text-muted-foreground" />
+                Variable Key
+              </Label>
+              <Input
+                id="key"
+                value={key}
+                onChange={(e) => setKey(e.target.value)}
+                placeholder="e.g. DATABASE_URL, API_KEY"
+                required
+                disabled={isLoading}
+                className="bg-muted/30 border-muted font-mono text-sm"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="value" className="flex items-center gap-2">
+                  <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                  Value
+                </Label>
+                {isSecret && (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs text-muted-foreground"
+                    onClick={() => setShowValue(!showValue)}
+                    disabled={isLoading}
+                  >
+                    {showValue ? <EyeOff className="h-3.5 w-3.5 mr-1.5" /> : <Eye className="h-3.5 w-3.5 mr-1.5" />}
+                    {showValue ? "Hide" : "Show"}
+                  </Button>
+                )}
+              </div>
+              <div className="relative">
+                <Input
+                  id="value"
+                  type={isSecret && !showValue ? "password" : "text"}
+                  value={value}
+                  onChange={(e) => setValue(e.target.value)}
+                  placeholder="Enter variable value"
+                  required
+                  disabled={isLoading}
+                  className="bg-muted/30 border-muted font-mono text-sm"
+                />
+              </div>
+            </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>
+              <Input
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="What is this variable for?"
+                disabled={isLoading}
+                className="bg-muted/30 border-muted"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="expiresAt" className="flex items-center gap-2">
+                <Calendar className="h-3.5 w-3.5 text-muted-foreground" />
+                Expiration Date <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
+              </Label>
+              <Input
+                id="expiresAt"
+                type="date"
+                value={expiresAt}
+                onChange={(e) => setExpiresAt(e.target.value)}
+                disabled={isLoading}
+                className="bg-muted/30 border-muted"
+              />
+            </div>
+
+            <div className="flex items-center justify-between p-3 bg-blue-500/5 rounded-lg border border-blue-500/10">
+              <div className="grid gap-1.5 leading-none">
+                <Label htmlFor="isDynamic" className="text-sm font-medium leading-none cursor-pointer flex items-center gap-2">
+                  <ShieldCheck className="h-3.5 w-3.5 text-blue-500" />
+                  Dynamic Secret Provider
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Fetch value on-demand from AWS or Vault.
+                </p>
+              </div>
+              <Switch
+                id="isDynamic"
+                checked={isDynamic}
+                onCheckedChange={setIsDynamic}
+                disabled={isLoading}
+              />
+            </div>
+
+            {isDynamic && (
+              <div className="grid gap-2 animate-in fade-in slide-in-from-top-1">
+                <Label htmlFor="provider">Provider</Label>
+                <Select value={provider} onValueChange={setProvider} required>
+                  <SelectTrigger className="bg-muted/30 border-muted">
+                    <SelectValue placeholder="Select provider" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="aws">AWS Secrets Manager</SelectItem>
+                    <SelectItem value="vault">HashiCorp Vault</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-[10px] text-muted-foreground">The "Value" field above should be the ARN or Path to the secret.</p>
+              </div>
+            )}
+
+            <div className="flex items-center space-x-3 p-3 bg-primary/5 rounded-lg border border-primary/10">
+              <Checkbox
+                id="isSecret"
+                checked={isSecret}
+                onCheckedChange={(checked) => setIsSecret(!!checked)}
+                disabled={isLoading}
+                className="data-[state=checked]:bg-primary"
+              />
+              <div className="grid gap-1.5 leading-none">
+                <Label
+                  htmlFor="isSecret"
+                  className="text-sm font-medium leading-none cursor-pointer flex items-center gap-2"
+                >
+                  <ShieldCheck className="h-3.5 w-3.5 text-primary" />
+                  Encrypt as Secret
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Secrets are encrypted at rest and masked in the UI by default.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button 
+              type="button" 
+              variant="ghost" 
+              onClick={() => setOpen(false)} 
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading || (!environmentId && !selectedEnvironmentId)} className="px-8 shadow-sm">
+              {isLoading ? "Creating..." : "Create Variable"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/DeleteEnvironmentDialog.tsx

@@ -0,0 +1,104 @@
+'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, AlertTriangle, ShieldAlert } from "lucide-react";
+import { useEnvironments } from "@/hooks/use-environments";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface DeleteEnvironmentDialogProps {
+  environmentId: string;
+  environmentName: string;
+  children?: React.ReactNode;
+}
+
+export default function DeleteEnvironmentDialog({ environmentId, environmentName, children }: DeleteEnvironmentDialogProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/environments', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: environmentId }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ["environments"] });
+      } else {
+        setError(data.error || "Failed to delete environment");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        {children || (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:text-destructive hover:bg-destructive/10 transition-colors">
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        )}
+      </AlertDialogTrigger>
+      <AlertDialogContent className="sm:max-w-[425px]">
+        <AlertDialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 bg-destructive/10 rounded-full text-destructive">
+              <ShieldAlert className="h-5 w-5" />
+            </div>
+            <AlertDialogTitle className="text-xl">Delete Environment</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="text-base text-muted-foreground pt-1">
+            Are you sure you want to delete the environment <span className="font-bold text-foreground bg-muted px-1.5 rounded">&quot;{environmentName}&quot;</span>?
+            <div className="mt-3 p-4 bg-destructive/5 rounded-lg border border-destructive/20 text-sm text-destructive-foreground font-medium flex items-start gap-2">
+              <AlertTriangle className="h-4 w-4 mt-0.5 shrink-0" />
+              <span>DANGER: This will permanently delete ALL variables and historical data stored within this environment.</span>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {error && (
+          <div className="text-sm font-medium text-destructive bg-destructive/10 p-3 rounded-md border border-destructive/20 my-2">
+            {error}
+          </div>
+        )}
+        <AlertDialogFooter className="pt-4 gap-2">
+          <AlertDialogCancel disabled={isLoading} className="mt-0">Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDelete}
+            disabled={isLoading}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90 px-6 shadow-sm shadow-destructive/20 border-0"
+          >
+            {isLoading ? "Deleting..." : "Confirm Deletion"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}