nobalmako 1.0.0

package/src/components/DeleteTeamDialog.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+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, Skull } from "lucide-react";
+import { useTeams } from "@/hooks/use-teams";
+
+interface DeleteTeamDialogProps {
+  teamId: string;
+  teamName: string;
+  children?: React.ReactNode;
+}
+
+export default function DeleteTeamDialog({ teamId, teamName, children }: DeleteTeamDialogProps) {
+  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/teams', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: teamId }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ['teams'] });
+      } else {
+        setError(data.error || "Failed to delete team");
+      }
+    } 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-[450px]">
+        <AlertDialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 bg-destructive/10 rounded-full text-destructive">
+              <Skull className="h-5 w-5" />
+            </div>
+            <AlertDialogTitle className="text-xl">Delete Project Permanently</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="text-base text-muted-foreground pt-1">
+            Are you sure you want to delete <span className="font-bold text-foreground bg-muted px-2 rounded">&quot;{teamName}&quot;</span>?
+            <div className="mt-4 p-4 bg-destructive/5 rounded-lg border border-destructive/20 text-sm text-destructive font-medium space-y-3">
+              <div className="flex gap-2">
+                <AlertTriangle className="h-5 w-5 shrink-0" />
+                <p>CRITICAL: This will immediately and permanently destroy:</p>
+              </div>
+              <ul className="list-disc list-inside space-y-1 pl-7 opacity-90 font-normal">
+                <li>All project configurations and metadata</li>
+                <li>Every environment (Prod, Staging, etc.)</li>
+                <li>ALL encrypted secrets and variables</li>
+                <li>Project audit logs and activity history</li>
+              </ul>
+            </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-6 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-8 shadow-sm shadow-destructive/20 border-0"
+          >
+            {isLoading ? "Deleting..." : "Delete Full Project"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/DeleteVariableDialog.tsx

@@ -0,0 +1,103 @@
+'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 } from "lucide-react";
+import { useVariables } from "@/hooks/use-variables";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface DeleteVariableDialogProps {
+  variableId: string;
+  variableKey: string;
+  children?: React.ReactNode;
+}
+
+export default function DeleteVariableDialog({ variableId, variableKey, children }: DeleteVariableDialogProps) {
+  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/variables', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: variableId }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ["variables"] });
+      } else {
+        setError(data.error || "Failed to delete variable");
+      }
+    } 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">
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+            </div>
+            <AlertDialogTitle className="text-xl">Delete Variable</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="text-base text-muted-foreground pt-1">
+            Are you sure you want to delete the variable <span className="font-mono font-bold text-foreground bg-muted px-1.5 rounded">&quot;{variableKey}&quot;</span>?
+            <div className="mt-3 p-3 bg-muted/50 rounded-lg border border-muted text-sm italic">
+              All historical values and logs for this variable will be permanently removed.
+            </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..." : "Delete Permanently"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/EditEnvironmentDialog.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useState, useEffect } 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 { Edit, Globe, Palette, Type, AlignLeft, CheckCircle2 } from "lucide-react";
+import { useEnvironments } from "@/hooks/use-environments";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface EditEnvironmentDialogProps {
+  environmentId: string;
+  children?: React.ReactNode;
+}
+
+export default function EditEnvironmentDialog({ environmentId, children }: EditEnvironmentDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [color, setColor] = useState("#3b82f6");
+  const [isDefault, setIsDefault] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const { environments } = useEnvironments();
+  const queryClient = useQueryClient();
+
+  const environment = environments?.find(e => e.id === environmentId);
+
+  useEffect(() => {
+    if (environment && open) {
+      setName(environment.name);
+      setDescription(environment.description || "");
+      setColor(environment.color || "#3b82f6");
+      setIsDefault(environment.isDefault || false);
+    }
+  }, [environment, open]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/environments', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: environmentId, name, description, color, isDefault }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ["environments"] });
+      } else {
+        setError(data.error || "Failed to update environment");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <Edit className="h-4 w-4" />
+          </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">Edit Environment</DialogTitle>
+          </div>
+          <DialogDescription>
+            Update configuration and appearance for the {environment?.name} stage.
+          </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" />
+                Environment Name
+              </Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. production, staging"
+                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)}
+                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" />
+                Environment Color
+              </Label>
+              <div className="flex items-center gap-4">
+                <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 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 className="flex items-center space-x-3 p-3 bg-muted/30 rounded-lg border border-muted">
+              <Checkbox
+                id="isDefault"
+                checked={isDefault}
+                onCheckedChange={(checked) => setIsDefault(!!checked)}
+                disabled={isLoading}
+              />
+              <div className="grid gap-1.5 leading-none">
+                <Label
+                  htmlFor="isDefault"
+                  className="text-sm font-medium leading-none cursor-pointer flex items-center gap-2"
+                >
+                  <CheckCircle2 className="h-3.5 w-3.5 text-primary" />
+                  Set as Primary
+                </Label>
+                <p className="text-xs text-muted-foreground">
+                  Variables are assigned to the primary environment 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} className="px-8 shadow-sm">
+              {isLoading ? "Updating..." : "Update Environment"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/EditMemberDialog.tsx

@@ -0,0 +1,143 @@
+
+'use client';
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Edit, User, Mail, Shield, UserRoundPen } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface EditMemberDialogProps {
+  teamId: string;
+  member: {
+    id: string;
+    role: string;
+    user: {
+      name: string;
+      email: string;
+    };
+  };
+  children?: React.ReactNode;
+}
+
+export default function EditMemberDialog({ teamId, member, children }: EditMemberDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [role, setRole] = useState(member.role);
+  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/team-members', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ teamId, memberId: member.id, role }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ["team-members", teamId] });
+      } else {
+        setError(data.error || "Failed to update member");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <Edit className="h-4 w-4" />
+          </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">
+              <UserRoundPen className="h-5 w-5 text-primary" />
+            </div>
+            <DialogTitle className="text-xl">Edit Member Role</DialogTitle>
+          </div>
+          <DialogDescription>
+            Change role for {member.user.name} ({member.user.email})
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4 py-4">
+          {error && (
+            <div className="p-3 text-sm font-medium text-destructive bg-destructive/10 rounded-lg border border-destructive/20 text-center">
+              {error}
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor="role" className="text-sm font-medium text-slate-700">Role</Label>
+            <Select value={role} onValueChange={setRole}>
+              <SelectTrigger className="bg-white border-slate-200">
+                <SelectValue placeholder="Select role" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="member">Member</SelectItem>
+                <SelectItem value="admin">Admin</SelectItem>
+                <SelectItem value="owner">Owner</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-[11px] text-slate-500 mt-1">
+              Admin can manage environments and secrets. Owner can also manage team members.
+            </p>
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+              className="border-slate-200 hover:bg-slate-50"
+            >
+              Cancel
+            </Button>
+            <Button 
+              type="submit" 
+              disabled={isLoading || role === member.role}
+              className="bg-slate-950 hover:bg-slate-800 text-white min-w-[100px]"
+            >
+              {isLoading ? "Saving..." : "Save Changes"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}