nobalmako 1.0.0

package/src/app/project/[id]/ProjectDetailsClient.tsx

@@ -0,0 +1,512 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { 
+  Plus, 
+  Eye, 
+  EyeOff, 
+  Settings, 
+  Users, 
+  Shield, 
+  Database,
+  Search,
+  Download,
+  Upload,
+  MoreVertical,
+  CheckCircle2,
+  Lock,
+  Unlock,
+  Webhook
+} from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+import { useTeams } from "@/hooks/use-teams";
+import { useEnvironments } from "@/hooks/use-environments";
+import { useVariables } from "@/hooks/use-variables";
+import { useProjectPermissions } from "@/hooks/use-project-permissions";
+import AppLayout from "@/components/AppLayout";
+import CreateEnvironmentDialog from "@/components/CreateEnvironmentDialog";
+import CreateVariableDialog from "@/components/CreateVariableDialog";
+import EditTeamDialog from "@/components/EditTeamDialog";
+import DeleteTeamDialog from "@/components/DeleteTeamDialog";
+import EditEnvironmentDialog from "@/components/EditEnvironmentDialog";
+import DeleteEnvironmentDialog from "@/components/DeleteEnvironmentDialog";
+import InviteMemberDialog from "@/components/InviteMemberDialog";
+import TeamMembersManager from "@/components/TeamMembersManager";
+import BulkActions from "@/components/BulkActions";
+import ImportVariablesDialog from "@/components/ImportVariablesDialog";
+import VariableHistoryDialog from "@/components/VariableHistoryDialog";
+import EditVariableDialog from "@/components/EditVariableDialog";
+import DeleteVariableDialog from "@/components/DeleteVariableDialog";
+import LeaveProjectDialog from "@/components/LeaveProjectDialog";
+
+import { WebhooksManager } from "@/components/WebhooksManager";
+import { ProjectDiff } from "@/components/ProjectDiff";
+
+interface ProjectDetailsClientProps {
+  teamId: string;
+}
+
+export default function ProjectDetailsClient({ teamId }: ProjectDetailsClientProps) {
+  const { user, isLoading: authLoading } = useAuth();
+  const { teams, isLoading: teamsLoading } = useTeams();
+  const { environments, isLoading: environmentsLoading } = useEnvironments();
+  const { variables, isLoading: variablesLoading } = useVariables();
+  const { canManageProject, canManageSecrets, members } = useProjectPermissions(teamId);
+  const router = useRouter();
+
+  const [visibleValues, setVisibleValues] = useState<Set<string>>(new Set());
+  const [selectedVariables, setSelectedVariables] = useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeEnvId, setActiveEnvId] = useState<string | undefined>(undefined);
+
+  const team = teams?.find(t => t.id === teamId);
+  const teamEnvironments = environments?.filter(e => e.teamId === teamId) || [];
+  const teamVariables = variables?.filter(v => v.teamId === teamId) || [];
+
+  useEffect(() => {
+    if (!activeEnvId && teamEnvironments.length > 0) {
+      setActiveEnvId(teamEnvironments[0].id);
+    }
+  }, [teamEnvironments, activeEnvId]);
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push("/auth/login");
+    }
+  }, [user, authLoading, router]);
+
+  const toggleValueVisibility = (variableId: string) => {
+    const newVisible = new Set(visibleValues);
+    if (newVisible.has(variableId)) {
+      newVisible.delete(variableId);
+    } else {
+      newVisible.add(variableId);
+    }
+    setVisibleValues(newVisible);
+  };
+
+  const handleSelectAll = (envId: string) => {
+    const envVars = teamVariables.filter(v => v.environmentId === envId).map(v => v.id);
+    const allSelected = envVars.every(id => selectedVariables.includes(id));
+    
+    if (allSelected) {
+      setSelectedVariables(selectedVariables.filter(id => !envVars.includes(id)));
+    } else {
+      setSelectedVariables([...new Set([...selectedVariables, ...envVars])]);
+    }
+  };
+
+  if (authLoading || teamsLoading || environmentsLoading || variablesLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (!user || !team) {
+    return (
+      <AppLayout>
+        <div className="flex flex-col items-center justify-center py-20">
+          <Shield className="h-16 w-16 text-muted-foreground mb-4" />
+          <h1 className="text-2xl font-bold mb-2">Project Not Found</h1>
+          <p className="text-muted-foreground mb-6">The project you're looking for doesn't exist or you don't have access to it.</p>
+          <Button onClick={() => router.push("/dashboard")}>Return to Dashboard</Button>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  const filteredVariables = teamVariables.filter(v => 
+    v.key.toLowerCase().includes(searchQuery.toLowerCase()) || 
+    (v.description?.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  return (
+    <AppLayout>
+      <div className="space-y-8">
+        {/* Header Section */}
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+          <div className="space-y-1">
+            <div className="flex items-center gap-3">
+              <div 
+                className="w-4 h-4 rounded-full" 
+                style={{ backgroundColor: team.color || "#3b82f6" }}
+              />
+              <h1 className="text-3xl font-bold tracking-tight">{team.name}</h1>
+              <Badge variant="outline" className="ml-2 font-mono text-xs uppercase opacity-70">
+                Project ID: {team.id.slice(0, 8)}
+              </Badge>
+            </div>
+            <p className="text-muted-foreground text-lg">
+              {team.description || "Manage your environment variables across different deployment stages."}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {canManageProject ? (
+              <>
+                <InviteMemberDialog teamId={team.id} />
+                <EditTeamDialog teamId={team.id} />
+              </>
+            ) : (
+              members?.find(m => m.userId === user.id) && (
+                <LeaveProjectDialog 
+                  teamId={team.id} 
+                  teamName={team.name} 
+                  memberId={members.find(m => m.userId === user.id)!.id} 
+                />
+              )
+            )}
+          </div>
+        </div>
+
+        {/* Info Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <Card className="bg-primary/5 border-primary/20">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Environments</p>
+                  <h3 className="text-2xl font-bold">{teamEnvironments.length}</h3>
+                </div>
+                <div className="p-2 bg-primary/10 rounded-full">
+                  <Shield className="h-5 w-5 text-primary" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card className="bg-blue-500/5 border-blue-500/20">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Variables</p>
+                  <h3 className="text-2xl font-bold">{teamVariables.length}</h3>
+                </div>
+                <div className="p-2 bg-blue-500/10 rounded-full">
+                  <Database className="h-5 w-5 text-blue-500" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card className="bg-amber-500/5 border-amber-500/20">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Secrets</p>
+                  <h3 className="text-2xl font-bold">{teamVariables.filter(v => v.isSecret).length}</h3>
+                </div>
+                <div className="p-2 bg-amber-500/10 rounded-full">
+                  <Lock className="h-5 w-5 text-amber-500" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card className="bg-emerald-500/5 border-emerald-500/20">
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">Team Size</p>
+                  <h3 className="text-2xl font-bold">{members.length}</h3>
+                </div>
+                <div className="p-2 bg-emerald-500/10 rounded-full">
+                  <Users className="h-5 w-5 text-emerald-500" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Main Tabs */}
+        <Tabs defaultValue="variables" className="space-y-6">
+          <TabsList className="bg-muted p-1 border">
+            <TabsTrigger value="variables" className="px-8 py-2">Variables</TabsTrigger>
+            <TabsTrigger value="members" className="px-8 py-2">Team Members</TabsTrigger>
+            <TabsTrigger value="webhooks" className="px-8 py-2">Webhooks</TabsTrigger>
+            <TabsTrigger value="diff" className="px-8 py-2">Comparison</TabsTrigger>
+            <TabsTrigger value="settings" className="px-8 py-2">Settings</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="variables" className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-300">
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+              <div className="relative w-full md:w-96">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <input
+                  type="text"
+                  placeholder="Search variables..."
+                  className="w-full bg-card border rounded-md pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                {canManageSecrets && (
+                  <>
+                    <ImportVariablesDialog teamId={team.id} />
+                    <CreateEnvironmentDialog teamId={team.id} />
+                    <CreateVariableDialog environmentId={activeEnvId}>
+                      <Button className="bg-primary hover:bg-primary/90 shadow-sm border-0">
+                        <Plus className="h-4 w-4 mr-2" />
+                        New Variable
+                      </Button>
+                    </CreateVariableDialog>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {selectedVariables.length > 0 && (
+              <BulkActions
+                selectedVariables={selectedVariables}
+                onSelectionChange={setSelectedVariables}
+                onRefresh={() => {}}
+              />
+            )}
+
+            {teamEnvironments.length > 0 ? (
+              <Tabs 
+                value={activeEnvId} 
+                onValueChange={setActiveEnvId} 
+                className="w-full"
+              >
+                <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide">
+                  <TabsList className="bg-transparent border-0 gap-2">
+                    {teamEnvironments.map((env) => (
+                      <TabsTrigger 
+                        key={env.id} 
+                        value={env.id}
+                        className="rounded-full border data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-md transition-all px-4"
+                      >
+                        <div 
+                          className="w-2 h-2 rounded-full mr-2" 
+                          style={{ backgroundColor: env.color || "#3b82f6" }}
+                        />
+                        {env.name}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                </div>
+
+                {teamEnvironments.map((env) => {
+                  const envVars = filteredVariables.filter(v => v.environmentId === env.id);
+                  const isAllSelected = envVars.length > 0 && envVars.every(v => selectedVariables.includes(v.id));
+
+                  return (
+                    <TabsContent key={env.id} value={env.id} className="mt-4 outline-none">
+                      <div className="border rounded-xl bg-card shadow-sm overflow-hidden">
+                        <div className="flex items-center justify-between px-6 py-4 bg-muted/30 border-b">
+                          <div className="flex items-center gap-4">
+                            <div className="flex items-center gap-2">
+                              <input
+                                type="checkbox"
+                                checked={isAllSelected}
+                                onChange={() => handleSelectAll(env.id)}
+                                className="h-4 w-4 rounded border-muted-foreground accent-primary cursor-pointer"
+                              />
+                              <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                                {envVars.length} Variables
+                              </span>
+                            </div>
+                            <div className="h-4 w-px bg-border hidden md:block" />
+                            <div className="hidden md:flex items-center gap-1 text-xs text-muted-foreground">
+                              <span>Status: Sync'd</span>
+                              <CheckCircle2 className="h-3 w-3 text-emerald-500" />
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-2">
+                             <EditEnvironmentDialog environmentId={env.id} />
+                             <DeleteEnvironmentDialog environmentId={env.id} environmentName={env.name} />
+                          </div>
+                        </div>
+
+                        <div className="divide-y divide-border">
+                          {envVars.length > 0 ? (
+                            envVars.map((variable) => (
+                              <div 
+                                key={variable.id} 
+                                className={`group flex flex-col md:flex-row md:items-center p-4 transition-colors hover:bg-muted/40 ${selectedVariables.includes(variable.id) ? 'bg-primary/5' : ''}`}
+                              >
+                                <div className="flex items-center gap-4 flex-1">
+                                  <input
+                                    type="checkbox"
+                                    checked={selectedVariables.includes(variable.id)}
+                                    onChange={(e) => {
+                                      if (e.target.checked) {
+                                        setSelectedVariables([...selectedVariables, variable.id]);
+                                      } else {
+                                        setSelectedVariables(selectedVariables.filter(id => id !== variable.id));
+                                      }
+                                    }}
+                                    className="h-4 w-4 rounded border-muted-foreground accent-primary cursor-pointer"
+                                  />
+                                  <div className="flex flex-col min-w-0">
+                                    <div className="flex items-center gap-2">
+                                      <code className="text-[13px] font-bold text-foreground truncate max-w-sm">
+                                        {variable.key}
+                                      </code>
+                                      {variable.isSecret ? (
+                                        <Badge variant="outline" className="text-[10px] h-4 border-amber-500/30 text-amber-600 bg-amber-500/5">
+                                          <Lock className="h-2 w-2 mr-1" /> SECRET
+                                        </Badge>
+                                      ) : (
+                                        <Badge variant="outline" className="text-[10px] h-4 border-emerald-500/30 text-emerald-600 bg-emerald-500/5">
+                                          <Unlock className="h-2 w-2 mr-1" /> PUBLIC
+                                        </Badge>
+                                      )}
+                                    </div>
+                                    <p className="text-xs text-muted-foreground truncate max-w-md mt-0.5">
+                                      {variable.description || "No description provided."}
+                                    </p>
+                                  </div>
+                                </div>
+
+                                <div className="flex flex-1 items-center mt-2 md:mt-0 gap-3">
+                                  <div className="flex-1 flex items-center gap-2 bg-muted/60 px-3 py-1.5 rounded-md border text-sm max-w-full md:max-w-xs overflow-hidden">
+                                    {variable.isSecret ? (
+                                      <>
+                                        {visibleValues.has(variable.id) ? (
+                                          <code className="font-mono text-xs truncate">
+                                            {variable.value}
+                                          </code>
+                                        ) : (
+                                          <span className="text-muted-foreground tracking-widest text-[13px] pt-1">••••••••••••••••</span>
+                                        )}
+                                        <button
+                                          onClick={() => toggleValueVisibility(variable.id)}
+                                          className="ml-auto text-muted-foreground hover:text-foreground transition-colors"
+                                        >
+                                          {visibleValues.has(variable.id) ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+                                        </button>
+                                      </>
+                                    ) : (
+                                      <code className="font-mono text-xs truncate">
+                                        {variable.value}
+                                      </code>
+                                    )}
+                                  </div>
+                                </div>
+
+                                <div className="flex items-center gap-1 mt-4 md:mt-0 md:ml-4 opacity-0 group-hover:opacity-100 transition-opacity">
+                                  <VariableHistoryDialog variableId={variable.id} variableKey={variable.key} />
+                                  {canManageSecrets && (
+                                    <>
+                                      <EditVariableDialog variableId={variable.id} />
+                                      <DeleteVariableDialog variableId={variable.id} variableKey={variable.key} />
+                                    </>
+                                  )}
+                                </div>
+                              </div>
+                            ))
+                          ) : (
+                            <div className="flex flex-col items-center justify-center py-16 gap-3">
+                              <div className="p-3 bg-muted rounded-full">
+                                <Database className="h-6 w-6 text-muted-foreground" />
+                              </div>
+                              <p className="text-muted-foreground text-sm">No variables found in this environment.</p>
+                              {canManageSecrets && (
+                                <CreateVariableDialog environmentId={env.id}>
+                                  <Button variant="outline" size="sm">Add Variable</Button>
+                                </CreateVariableDialog>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </TabsContent>
+                  );
+                })}
+              </Tabs>
+            ) : (
+              <Card className="border-dashed">
+                <CardContent className="flex flex-col items-center justify-center py-20 text-center">
+                  <Shield className="h-12 w-12 text-muted-foreground/30 mb-4" />
+                  <h3 className="text-xl font-semibold mb-2">Initialize your environments</h3>
+                  <p className="text-muted-foreground max-w-md mb-6">
+                    Projects need at least one environment (like Development or Production) to store variables.
+                  </p>
+                  <CreateEnvironmentDialog teamId={team.id}>
+                    <Button>Create My First Environment</Button>
+                  </CreateEnvironmentDialog>
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+
+          <TabsContent value="members" className="animate-in fade-in slide-in-from-bottom-2 duration-300">
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle>Team Collaboration</CardTitle>
+                    <CardDescription>
+                      Grant teammates access to view or manage this project's configuration.
+                    </CardDescription>
+                  </div>
+                  {canManageProject && <InviteMemberDialog teamId={team.id} />}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <TeamMembersManager teamId={team.id} />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="webhooks" className="animate-in fade-in slide-in-from-bottom-2 duration-300">
+            <WebhooksManager teamId={team.id} />
+          </TabsContent>
+
+          <TabsContent value="diff" className="animate-in fade-in slide-in-from-bottom-2 duration-300">
+            <ProjectDiff environments={teamEnvironments} variables={teamVariables} />
+          </TabsContent>
+
+          <TabsContent value="settings" className="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-300">
+            <Card>
+              <CardHeader>
+                <CardTitle>Project Settings</CardTitle>
+                <CardDescription>Manage general configuration and metadata for {team.name}.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid gap-2">
+                  <h4 className="text-sm font-medium">Project Name</h4>
+                  <div className="p-3 border rounded-md bg-muted/20 font-medium">{team.name}</div>
+                </div>
+                <div className="grid gap-2">
+                  <h4 className="text-sm font-medium">Description</h4>
+                  <div className="p-3 border rounded-md bg-muted/20 text-muted-foreground italic h-20">
+                    {team.description || "No description set."}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {canManageProject && (
+              <Card className="border-destructive/20 bg-destructive/5">
+                <CardHeader>
+                  <CardTitle className="text-destructive flex items-center gap-2">
+                     Danger Zone
+                  </CardTitle>
+                  <CardDescription>Actions here are permanent and cannot be undone.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center justify-between p-4 border border-destructive/30 rounded-lg bg-card shadow-sm">
+                    <div>
+                      <h4 className="font-semibold text-destructive">Delete this project</h4>
+                      <p className="text-sm text-muted-foreground mt-1 text-balance">
+                        Permanently remove all environments, variables, and history for this project.
+                      </p>
+                    </div>
+                    <DeleteTeamDialog teamId={team.id} teamName={team.name} />
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </TabsContent>
+        </Tabs>
+      </div>
+    </AppLayout>
+  );
+}

package/src/app/project/[id]/page.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from 'react';
+import ProjectDetailsClient from './ProjectDetailsClient';
+
+interface PageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export default async function ProjectDetailsPage({ params }: PageProps) {
+  const { id } = await params;
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <ProjectDetailsClient teamId={id} />
+    </Suspense>
+  );
+}