nobalmako 1.0.0

package/src/app/audit-log/AuditLogClient.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import { useState } from "react";
+import AppLayout from "@/components/AppLayout";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { 
+  Activity, 
+  Search, 
+  Filter, 
+  User, 
+  Clock, 
+  Globe, 
+  Shield, 
+  Database,
+  Users,
+  AlertCircle,
+  ArrowRight,
+  ChevronDown
+} from "lucide-react";
+import { useAuditLogs, AuditLog } from "@/hooks/use-audit-logs";
+import { useTeams } from "@/hooks/use-teams";
+import { format } from "date-fns";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export default function AuditLogClient() {
+  const [selectedTeam, setSelectedTeam] = useState<string>("all");
+  const { logs, isLoading } = useAuditLogs(selectedTeam === "all" ? undefined : selectedTeam);
+  const { teams } = useTeams();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredLogs = logs.filter(log => 
+    log.action.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    log.resourceType.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    log.userName?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    log.teamName?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getActionBadge = (action: string) => {
+    switch (action) {
+      case 'create':
+        return <Badge className="bg-emerald-500 hover:bg-emerald-600">CREATE</Badge>;
+      case 'update':
+        return <Badge className="bg-blue-500 hover:bg-blue-600">UPDATE</Badge>;
+      case 'delete':
+        return <Badge variant="destructive">DELETE</Badge>;
+      case 'view':
+        return <Badge variant="outline">VIEW</Badge>;
+      default:
+        return <Badge variant="secondary">{action.toUpperCase()}</Badge>;
+    }
+  };
+
+  const getResourceIcon = (type: string) => {
+    switch (type) {
+      case 'variable':
+        return <Database className="h-4 w-4 text-blue-500" />;
+      case 'environment':
+        return <Shield className="h-4 w-4 text-emerald-500" />;
+      case 'team':
+      case 'project':
+        return <Users className="h-4 w-4 text-purple-500" />;
+      default:
+        return <Activity className="h-4 w-4 text-muted-foreground" />;
+    }
+  };
+
+  return (
+    <AppLayout>
+      <div className="space-y-8 max-w-6xl mx-auto">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Audit Log</h1>
+          <p className="text-muted-foreground mt-1 text-lg">
+            Track all activity and changes across your projects for security and compliance.
+          </p>
+        </div>
+
+        <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 activity..."
+              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">
+            <Filter className="h-4 w-4 text-muted-foreground mr-1" />
+            <Select value={selectedTeam} onValueChange={setSelectedTeam}>
+              <SelectTrigger className="w-[200px] bg-card">
+                <SelectValue placeholder="Filter by Project" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Projects</SelectItem>
+                {teams?.map(team => (
+                  <SelectItem key={team.id} value={team.id}>{team.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <Card className="shadow-sm border-muted overflow-hidden">
+          <CardContent className="p-0">
+            {isLoading ? (
+              <div className="py-20 flex justify-center">
+                <div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
+              </div>
+            ) : filteredLogs.length > 0 ? (
+              <div className="divide-y divide-border">
+                {filteredLogs.map((log) => (
+                  <div key={log.id} className="p-4 md:p-6 hover:bg-muted/30 transition-colors">
+                    <div className="flex flex-col md:flex-row md:items-center gap-4">
+                      <div className="flex-1 space-y-1">
+                        <div className="flex items-center gap-2">
+                          {getActionBadge(log.action)}
+                          <span className="text-sm font-medium flex items-center gap-1.5">
+                            {getResourceIcon(log.resourceType)}
+                            {log.resourceType.charAt(0).toUpperCase() + log.resourceType.slice(1)}
+                          </span>
+                          <span className="text-muted-foreground">•</span>
+                          <span className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">
+                            ID: {log.resourceId.slice(0, 8)}
+                          </span>
+                        </div>
+                        
+                        <div className="text-sm text-foreground py-1">
+                          <span className="font-semibold text-primary">{log.userName || "Unknown User"}</span>
+                          {" "}performed{" "}
+                          <span className="font-semibold">{log.action}</span>
+                          {" "}on{" "}
+                          <span className="font-medium">
+                            {format(new Date(log.createdAt), "MMM d, yyyy")}
+                          </span>
+                          {log.teamName && (
+                            <> in <span className="text-purple-600 font-medium">{log.teamName}</span></>
+                          )}
+                        </div>
+
+                        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 pt-1">
+                          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                            <Clock className="h-3.5 w-3.5" />
+                            {format(new Date(log.createdAt), "MMM d, yyyy 'at' HH:mm:ss")}
+                          </div>
+                          {log.ipAddress && (
+                            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                              <Globe className="h-3.5 w-3.5" />
+                              {log.ipAddress}
+                            </div>
+                          )}
+                          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                            <User className="h-3.5 w-3.5" />
+                            {log.userEmail}
+                          </div>
+                        </div>
+                      </div>
+
+                      {(log.oldValue || log.newValue) && (
+                        <div className="hidden md:block">
+                          <Dialog>
+                            <DialogTrigger asChild>
+                              <Button variant="outline" size="sm" className="h-8 text-xs">
+                                View Details
+                              </Button>
+                            </DialogTrigger>
+                            <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
+                              <DialogHeader>
+                                <DialogTitle className="text-slate-900">Event Details</DialogTitle>
+                                <DialogDescription className="text-slate-500">
+                                  Detailed comparison of values for this event.
+                                </DialogDescription>
+                              </DialogHeader>
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+                                <div className="space-y-2">
+                                  <Label className="text-xs uppercase tracking-wider text-slate-400">Previous State</Label>
+                                  <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg text-[11px] overflow-auto max-h-96 min-h-[100px]">
+                                    {log.oldValue ? JSON.stringify(log.oldValue, null, 2) : "No previous state"}
+                                  </pre>
+                                </div>
+                                <div className="space-y-2">
+                                  <Label className="text-xs uppercase tracking-wider text-slate-400">New State</Label>
+                                  <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg text-[11px] overflow-auto max-h-96 min-h-[100px]">
+                                    {log.newValue ? JSON.stringify(log.newValue, null, 2) : "No new state"}
+                                  </pre>
+                                </div>
+                              </div>
+                            </DialogContent>
+                          </Dialog>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-32 text-center px-4">
+                <div className="p-4 bg-muted rounded-full mb-4">
+                  <Activity className="h-10 w-10 text-muted-foreground/50" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">No activity recorded</h3>
+                <p className="text-muted-foreground max-w-sm text-sm">
+                  Once you start managing variables and projects, all activity will be logged here.
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </AppLayout>
+  );
+}

package/src/app/audit-log/page.tsx

@@ -0,0 +1,10 @@
+import AuditLogClient from "./AuditLogClient";
+
+export const metadata = {
+  title: "Audit Log - Nobalmako",
+  description: "Monitor access and changes to your environment variables",
+};
+
+export default function AuditLogPage() {
+  return <AuditLogClient />;
+}

package/src/app/auth/forgot-password/page.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Shield, Loader2, ArrowLeft, Mail } from "lucide-react";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const response = await fetch("/api/auth/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+
+      if (response.ok) {
+        setSuccess(true);
+      } else {
+        const data = await response.json();
+        setError(data.error || "Failed to send reset link");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <Shield className="h-12 w-12 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">Reset Password</CardTitle>
+          <CardDescription>
+            {success 
+              ? "Check your email for a reset link" 
+              : "Enter your email address and we'll send you a link to reset your password."}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {success ? (
+            <div className="space-y-6 text-center">
+              <div className="flex justify-center">
+                <div className="h-20 w-20 bg-primary/10 rounded-full flex items-center justify-center">
+                  <Mail className="h-10 w-10 text-primary" />
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                We've sent a password reset link to <strong>{email}</strong>. 
+                The link will expire in 1 hour.
+              </p>
+              <Button asChild variant="outline" className="w-full">
+                <Link href="/auth/login">Back to Sign in</Link>
+              </Button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {error && (
+                <Alert variant="destructive">
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="email">Email address</Label>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  required
+                  placeholder="name@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  disabled={isLoading}
+                />
+              </div>
+
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Sending link...
+                  </>
+                ) : (
+                  "Send Reset Link"
+                )}
+              </Button>
+
+              <div className="text-center">
+                <Link 
+                  href="/auth/login" 
+                  className="inline-flex items-center text-sm text-primary hover:underline"
+                >
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  Back to Sign in
+                </Link>
+              </div>
+            </form>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/app/auth/login/LoginForm.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Shield, Loader2 } from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+
+export default function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [mfaToken, setMfaToken] = useState("");
+  const [showMfaInput, setShowMfaInput] = useState(false);
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { login } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const result = await login(email, password, mfaToken);
+      if (result.success) {
+        router.push("/dashboard");
+      } else if (result.mfaRequired) {
+        setShowMfaInput(true);
+      } else {
+        setError(result.error || "Login failed");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <Shield className="h-12 w-12 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">Sign in to Nobalmako</CardTitle>
+          <CardDescription>
+            Welcome back! Please sign in to your account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email address</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                placeholder="Enter your email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password">Password</Label>
+                <Link
+                  href="/auth/forgot-password"
+                  className="text-xs text-primary hover:underline"
+                >
+                  Forgot password?
+                </Link>
+              </div>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                placeholder="Enter your password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            {showMfaInput && (
+              <div className="space-y-2 animate-in slide-in-from-top duration-300">
+                <Label htmlFor="mfaToken">MFA Code</Label>
+                <Input
+                  id="mfaToken"
+                  name="mfaToken"
+                  type="text"
+                  required
+                  placeholder="6-digit code from app"
+                  value={mfaToken}
+                  onChange={(e) => setMfaToken(e.target.value)}
+                  disabled={isLoading}
+                  autoFocus
+                />
+                <p className="text-xs text-muted-foreground">
+                  Your account has MFA enabled. Please enter the code from your authenticator app.
+                </p>
+              </div>
+            )}
+
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                "Sign in"
+              )}
+            </Button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <p className="text-sm text-muted-foreground">
+              Don&apos;t have an account?{" "}
+              <Link href="/auth/register" className="text-primary hover:underline">
+                Sign up
+              </Link>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/app/auth/login/page.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+import LoginForm from "./LoginForm";
+
+export const metadata: Metadata = {
+  title: "Login - Nobalmako",
+  description: "Sign in to your Nobalmako account",
+};
+
+export default function LoginPage() {
+  return <LoginForm />;
+}

package/src/app/auth/register/RegisterForm.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Shield, Loader2, Info } from "lucide-react";
+import { useAuth } from "@/hooks/use-auth";
+
+export default function RegisterForm() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { register } = useAuth();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const inviteToken = searchParams.get('invite');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      const result = await register(name, email, password, confirmPassword, inviteToken || undefined);
+      if (result.success) {
+        router.push("/dashboard");
+      } else {
+        setError(result.error || "Registration failed");
+      }
+    } catch (err) {
+      setError("An unexpected error occurred");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-4">
+            <Shield className="h-12 w-12 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">Create your account</CardTitle>
+          <CardDescription>
+            {inviteToken 
+              ? "You've been invited! Join your team on Nobalmako." 
+              : "Get started with Nobalmako today."}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {inviteToken && (
+              <Alert className="bg-primary/5 border-primary/20 text-primary">
+                <Info className="h-4 w-4" />
+                <AlertDescription className="text-xs">
+                  Your account will be automatically added to the team after registration.
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="name">Full name</Label>
+              <Input
+                id="name"
+                name="name"
+                type="text"
+                required
+                placeholder="Enter your full name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email">Email address</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                placeholder="Enter your email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                placeholder="Create a password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirm password</Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                placeholder="Confirm your password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Creating account...
+                </>
+              ) : (
+                "Create account"
+              )}
+            </Button>
+          </form>
+
+          <div className="mt-6 text-center">
+            <p className="text-sm text-muted-foreground">
+              Already have an account?{" "}
+              <Link href="/auth/login" className="text-primary hover:underline">
+                Sign in
+              </Link>
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}