nobalmako 1.0.0

package/src/components/ImportVariablesDialog.tsx

@@ -0,0 +1,347 @@
+'use client';
+
+import { useState, useRef } 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 { Upload, FileText, Database, Globe, ChevronRight, FileJson, Hash, AlertCircle } from "lucide-react";
+import { useEnvironments } from "@/hooks/use-environments";
+import { useVariables } from "@/hooks/use-variables";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface ImportVariablesDialogProps {
+  teamId: string;
+  children?: React.ReactNode;
+}
+
+interface ImportData {
+  variables: Array<{
+    key: string;
+    value: string;
+    description?: string;
+    isSecret?: boolean;
+  }>;
+}
+
+export default function ImportVariablesDialog({ teamId, children }: ImportVariablesDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [importMethod, setImportMethod] = useState<'json' | 'env'>('json');
+  const [jsonData, setJsonData] = useState('');
+  const [envData, setEnvData] = useState('');
+  const [selectedEnvironmentId, setSelectedEnvironmentId] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [preview, setPreview] = useState<ImportData['variables']>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { environments } = useEnvironments();
+  const queryClient = useQueryClient();
+
+  const teamEnvironments = environments?.filter(e => e.teamId === teamId) || [];
+
+  const parseEnvFile = (content: string): ImportData['variables'] => {
+    const variables: ImportData['variables'] = [];
+    const lines = content.split('\n');
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#')) continue;
+
+      const [key, ...valueParts] = trimmed.split('=');
+      if (key && valueParts.length > 0) {
+        const value = valueParts.join('=').replace(/^["']|["']$/g, ''); // Remove quotes
+        variables.push({
+          key: key.trim(),
+          value,
+          isSecret: true, // Default to secret for .env imports
+        });
+      }
+    }
+
+    return variables;
+  };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+      if (importMethod === 'env') {
+        setEnvData(content);
+        setPreview(parseEnvFile(content));
+      } else {
+        try {
+          const data = JSON.parse(content);
+          setJsonData(content);
+          setPreview(data.variables || []);
+        } catch (err) {
+          setError('Invalid JSON file');
+        }
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  const handlePreview = () => {
+    setError('');
+    try {
+      if (importMethod === 'json') {
+        const data = JSON.parse(jsonData);
+        setPreview(data.variables || []);
+      } else {
+        setPreview(parseEnvFile(envData));
+      }
+    } catch (err) {
+      setError('Invalid data format');
+    }
+  };
+
+  const handleImport = async () => {
+    if (!selectedEnvironmentId || preview.length === 0) return;
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const importPromises = preview.map(variable =>
+        fetch('/api/variables', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            key: variable.key,
+            value: variable.value,
+            description: variable.description,
+            isSecret: variable.isSecret,
+            environmentId: selectedEnvironmentId,
+            teamId,
+          }),
+        })
+      );
+
+      const results = await Promise.all(importPromises);
+      const failures = results.filter(r => !r.ok);
+
+      if (failures.length > 0) {
+        setError(`${failures.length} variables failed to import`);
+      } else {
+        setOpen(false);
+        setJsonData('');
+        setEnvData('');
+        setPreview([]);
+        setSelectedEnvironmentId('');
+        queryClient.invalidateQueries({ queryKey: ['variables'] });
+      }
+    } catch (err) {
+      setError('Import failed');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="outline" className="gap-2 border-primary/20 hover:border-primary/50 transition-all shadow-sm">
+            <Upload className="h-4 w-4 text-primary" />
+            Import Variables
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[650px] p-0 overflow-hidden shadow-2xl flex flex-col max-h-[90vh]">
+        <DialogHeader className="p-6 bg-slate-50 border-b border-slate-200 shrink-0">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg text-primary">
+              <Database className="h-6 w-6" />
+            </div>
+            <div>
+              <DialogTitle className="text-xl">Import Variables</DialogTitle>
+              <DialogDescription className="text-primary/60">
+                Bulk import secrets and configuration from external sources.
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="p-6 space-y-6 overflow-y-auto flex-1 scrollbar-thin">
+          {error && (
+            <div className="text-sm font-medium text-destructive bg-destructive/10 p-3 rounded-lg border border-destructive/20 flex items-center gap-2">
+              <AlertCircle className="h-4 w-4" />
+              {error}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-6">
+            <div className="space-y-3">
+              <Label className="text-sm font-semibold flex items-center gap-2 text-muted-foreground font-mono uppercase tracking-wider">
+                <FileJson className="h-3.5 w-3.5" />
+                Import Format
+              </Label>
+              <Select value={importMethod} onValueChange={(value: 'json' | 'env') => setImportMethod(value)}>
+                <SelectTrigger className="h-11 bg-muted/30 focus-visible:ring-primary/20">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="json" className="py-2">
+                    <span className="font-medium">JSON Format</span>
+                    <span className="block text-[10px] text-muted-foreground">Nobalmako export format</span>
+                  </SelectItem>
+                  <SelectItem value="env" className="py-2">
+                    <span className="font-medium">.env File</span>
+                    <span className="block text-[10px] text-muted-foreground">Standard key=value pairs</span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-3">
+              <Label className="text-sm font-semibold flex items-center gap-2 text-muted-foreground font-mono uppercase tracking-wider">
+                <Globe className="h-3.5 w-3.5" />
+                Target Env
+              </Label>
+              <Select value={selectedEnvironmentId} onValueChange={setSelectedEnvironmentId}>
+                <SelectTrigger className="h-11 bg-muted/30 focus-visible:ring-primary/20">
+                  <SelectValue placeholder="Select destination..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {teamEnvironments.map((env) => (
+                    <SelectItem key={env.id} value={env.id} className="py-2">
+                      <div className="flex items-center gap-2">
+                        <div className="h-2 w-2 rounded-full" style={{ backgroundColor: env.color || '#3b82f6' }} />
+                        <span className="font-medium">{env.name}</span>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-semibold flex items-center gap-2 text-muted-foreground font-mono uppercase tracking-wider">
+                <Hash className="h-3.5 w-3.5" />
+                Raw Data / File Upload
+              </Label>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="text-xs text-primary hover:text-primary hover:bg-primary/5 h-7"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <Upload className="h-3 w-3 mr-1.5" />
+                Upload File
+              </Button>
+              <input
+                type="file"
+                ref={fileInputRef}
+                className="hidden"
+                onChange={handleFileUpload}
+                accept={importMethod === 'json' ? '.json' : '.env'}
+              />
+            </div>
+
+            <div className="relative group">
+              <Textarea
+                placeholder={importMethod === 'json' 
+                  ? '{\n  "variables": [\n    { "key": "API_KEY", "value": "xyz", "isSecret": true }\n  ]\n}' 
+                  : 'API_KEY=your-secret\nDB_URL=postgres://...'
+                }
+                value={importMethod === 'json' ? jsonData : envData}
+                onChange={(e) => importMethod === 'json' ? setJsonData(e.target.value) : setEnvData(e.target.value)}
+                rows={8}
+                className="font-mono text-xs bg-slate-50 border-slate-200 group-focus:border-primary/30 min-h-[150px] resize-none text-slate-800"
+              />
+              <div className="absolute top-3 right-3 opacity-30 group-hover:opacity-100 transition-opacity">
+                 <FileText className="h-4 w-4 text-slate-400" />
+              </div>
+            </div>
+          </div>
+
+          <Button 
+            type="button" 
+            variant="secondary" 
+            onClick={handlePreview} 
+            className="w-full bg-slate-100 text-slate-900 hover:bg-slate-200 border-0"
+          >
+            Process & Preview Changes
+          </Button>
+
+          {preview.length > 0 && (
+            <div className="space-y-3 pt-2">
+              <div className="flex items-center justify-between px-1">
+                 <Label className="text-xs font-bold text-slate-400 uppercase tracking-widest">Preview ({preview.length} items)</Label>
+                 <Badge variant="outline" className="text-[10px] bg-slate-50 text-slate-600 border-slate-200">Ready to import</Badge>
+              </div>
+              <div className="max-h-[180px] overflow-y-auto rounded-lg border border-slate-200 divide-y divide-slate-100 bg-slate-50/30">
+                {preview.map((variable, index) => (
+                  <div key={index} className="px-4 py-3 flex items-center justify-between hover:bg-white transition-colors">
+                    <div className="flex flex-col gap-0.5">
+                      <code className="text-sm font-semibold text-slate-900">{variable.key}</code>
+                      {variable.description && <span className="text-[10px] text-slate-500 truncate max-w-[200px]">{variable.description}</span>}
+                    </div>
+                    <Badge variant={variable.isSecret ? "destructive" : "outline"} className={`text-[10px] px-1.5 py-0 rounded-sm font-mono border-slate-200 ${!variable.isSecret ? 'text-primary' : ''}`}>
+                      {variable.isSecret ? 'SECRET' : 'PUBLIC'}
+                    </Badge>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="p-6 bg-slate-50 border-t border-slate-200 shrink-0 flex items-center justify-between gap-3">
+          <Button 
+            type="button" 
+            variant="ghost" 
+            onClick={() => setOpen(false)} 
+            disabled={isLoading}
+            className="text-slate-500 hover:text-slate-900"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleImport}
+            disabled={!selectedEnvironmentId || preview.length === 0 || isLoading}
+            className="px-8 shadow-lg shadow-primary/20 gap-2 h-11"
+          >
+            {isLoading ? (
+               <>
+                 <div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                 Importing...
+               </>
+            ) : (
+              <>
+                Confirm Import ({preview.length})
+                <ChevronRight className="h-4 w-4 opacity-50" />
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/InviteMemberDialog.tsx

@@ -0,0 +1,191 @@
+'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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { UserPlus, Mail, Shield, ChevronRight } from "lucide-react";
+import { useTeamMembers } from "@/hooks/use-team-members";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+interface InviteMemberDialogProps {
+  teamId: string;
+  children?: React.ReactNode;
+}
+
+export default function InviteMemberDialog({ teamId, children }: InviteMemberDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState("developer");
+  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: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ teamId, email: email.toLowerCase(), role }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        toast.success(data.message || "Member added", {
+          description: data.message ? `An invitation email has been sent to ${email}.` : `${email} has been added to the team.`,
+        });
+        setEmail("");
+        setRole("developer");
+        queryClient.invalidateQueries({ queryKey: ["team-members", teamId] });
+      } else {
+        setError(data.error || "Failed to invite member");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {children || (
+          <Button variant="outline" className="gap-2 border-primary/20 hover:border-primary/50 transition-all shadow-sm">
+            <UserPlus className="h-4 w-4 text-primary" />
+            Invite Member
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px] p-0 overflow-hidden shadow-2xl">
+        <DialogHeader className="p-6 bg-primary/5 border-b border-primary/10">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg text-primary">
+              <UserPlus className="h-6 w-6" />
+            </div>
+            <div>
+              <DialogTitle className="text-xl">Invite Team Member</DialogTitle>
+              <DialogDescription className="text-primary/60">
+                Grant project access to a new member.
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="p-6">
+          <div className="space-y-6">
+            {error && (
+              <div className="text-sm font-medium text-destructive bg-destructive/10 p-3 rounded-lg border border-destructive/20 flex items-center gap-2">
+                <div className="h-1.5 w-1.5 rounded-full bg-destructive animate-pulse" />
+                {error}
+              </div>
+            )}
+            
+            <div className="space-y-3">
+              <Label htmlFor="email" className="text-sm font-semibold flex items-center gap-2 text-muted-foreground">
+                <Mail className="h-4 w-4" />
+                Email Address
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="colleague@company.com"
+                className="h-11 bg-muted/30 focus-visible:ring-primary/20"
+                required
+                disabled={isLoading}
+              />
+              <p className="text-[11px] text-muted-foreground ml-1">An invitation email will be sent to this address.</p>
+            </div>
+
+            <div className="space-y-3">
+              <Label htmlFor="role" className="text-sm font-semibold flex items-center gap-2 text-muted-foreground">
+                <Shield className="h-4 w-4" />
+                Access Level
+              </Label>
+              <Select value={role} onValueChange={setRole} disabled={isLoading}>
+                <SelectTrigger className="h-11 bg-muted/30 focus-visible:ring-primary/20">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="admin" className="py-3">
+                    <div className="flex flex-col gap-0.5">
+                      <span className="font-medium">Admin</span>
+                      <span className="text-[10px] text-muted-foreground leading-tight">Full access to settings and members</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="developer" className="py-3">
+                    <div className="flex flex-col gap-0.5">
+                      <span className="font-medium">Developer</span>
+                      <span className="text-[10px] text-muted-foreground leading-tight">Can manage environments and secrets</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="viewer" className="py-3">
+                    <div className="flex flex-col gap-0.5">
+                      <span className="font-medium">Viewer</span>
+                      <span className="text-[10px] text-muted-foreground leading-tight">Read-only access to variables</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="mt-8 flex items-center justify-end gap-3 pt-6 border-t border-muted">
+            <Button 
+              type="button" 
+              variant="ghost" 
+              onClick={() => setOpen(false)} 
+              disabled={isLoading}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              Cancel
+            </Button>
+            <Button 
+              type="submit" 
+              disabled={isLoading}
+              className="px-6 h-11 bg-primary shadow-lg shadow-primary/20"
+            >
+              {isLoading ? (
+                <>
+                  <div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2" />
+                  Sending...
+                </>
+              ) : (
+                <>
+                  Send Invitation
+                  <ChevronRight className="h-4 w-4 ml-1 opacity-50" />
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/LeaveProjectDialog.tsx

@@ -0,0 +1,111 @@
+
+'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 { LogOut, AlertTriangle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface LeaveProjectDialogProps {
+  teamId: string;
+  teamName: string;
+  memberId: string;
+  children?: React.ReactNode;
+}
+
+export default function LeaveProjectDialog({ teamId, teamName, memberId, children }: LeaveProjectDialogProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const handleLeave = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/team-members', {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ teamId, memberId }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        setOpen(false);
+        queryClient.invalidateQueries({ queryKey: ["teams"] });
+        router.push("/dashboard");
+      } else {
+        setError(data.error || "Failed to leave project");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        {children || (
+          <Button variant="outline" size="sm" className="gap-2 border-slate-200">
+            <LogOut className="h-4 w-4" />
+            Leave Project
+          </Button>
+        )}
+      </AlertDialogTrigger>
+      <AlertDialogContent className="bg-white border-slate-200 sm:max-w-[450px]">
+        <AlertDialogHeader>
+          <div className="flex items-center gap-3 text-amber-500 mb-2">
+            <div className="p-2 bg-amber-100 rounded-full">
+              <AlertTriangle className="h-6 w-6" />
+            </div>
+            <AlertDialogTitle className="text-xl">Leave Project</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="text-slate-600 text-sm leading-relaxed">
+            Are you sure you want to leave <span className="font-semibold text-slate-900">{teamName}</span>? 
+            You will lose all access to secrets and environments in this project. You'll need an invite to join again.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {error && (
+          <div className="mt-4 p-3 text-sm font-medium text-destructive bg-destructive/10 rounded-lg border border-destructive/20 text-center">
+            {error}
+          </div>
+        )}
+
+        <AlertDialogFooter className="mt-6">
+          <AlertDialogCancel className="border-slate-200 hover:bg-slate-50 text-slate-700">
+            Cancel
+          </AlertDialogCancel>
+          <Button
+            onClick={handleLeave}
+            disabled={isLoading}
+            variant="default"
+            className="bg-slate-950 hover:bg-slate-800 text-white min-w-[120px]"
+          >
+            {isLoading ? "Leaving..." : "Leave Project"}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}