Upload 114 files

.gitattributes

@@ -37,3 +37,4 @@ davidcyrilapis-main/public/docs/background-music.mp3 filter=lfs diff=lfs merge=l
 public/docs/background-music.mp3 filter=lfs diff=lfs merge=lfs -text
 thumb.png filter=lfs diff=lfs merge=lfs -text
 Image/0.jpg filter=lfs diff=lfs merge=lfs -text
+src/app/favicon.ico filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.genkit/*
+.env*
+
+# firebase
+firebase-debug.log
+firestore-debug.log

.idx/dev.nix

@@ -0,0 +1,43 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://firebase.google.com/docs/studio/customize-workspace
+{pkgs}: {
+  # Which nixpkgs channel to use.
+  channel = "stable-24.11"; # or "unstable"
+  # Use https://search.nixos.org/packages to find packages
+  packages = [
+    pkgs.nodejs_20
+    pkgs.zulu
+  ];
+  # Sets environment variables in the workspace
+  env = {};
+  # This adds a file watcher to startup the firebase emulators. The emulators will only start if
+  # a firebase.json file is written into the user's directory
+  services.firebase.emulators = {
+    detect = true;
+    projectId = "demo-app";
+    services = ["auth" "firestore"];
+  };
+  idx = {
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      # "vscodevim.vim"
+    ];
+    workspace = {
+      onCreate = {
+        default.openFiles = [
+          "src/app/page.tsx"
+        ];
+      };
+    };
+    # Enable previews and customize configuration
+    previews = {
+      enable = true;
+      previews = {
+        web = {
+          command = ["npm" "run" "dev" "--" "--port" "$PORT" "--hostname" "0.0.0.0"];
+          manager = "web";
+        };
+      };
+    };
+  };
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "IDX.aI.enableInlineCompletion": true,
+    "IDX.aI.enableCodebaseIndexing": true
+}

README.md

@@ -1,11 +1,5 @@
----
-title: Mywork
-emoji: 🌍
-colorFrom: green
-colorTo: purple
-sdk: docker
-pinned: false
-license: apache-2.0
----
+# Firebase Studio
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a NextJS starter in Firebase Studio.
+
+To get started, take a look at src/app/page.tsx.

apphosting.yaml

@@ -0,0 +1,7 @@
+# Settings to manage and configure a Firebase App Hosting backend.
+# https://firebase.google.com/docs/app-hosting/configure
+
+runConfig:
+  # Increase this value if you'd like to automatically spin up
+  # more instances in response to increased traffic.
+  maxInstances: 1

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

docs/blueprint.md

@@ -0,0 +1,21 @@
+# **App Name**: Anita Deploy
+
+## Core Features:
+
+- User Authentication: Login/Registration: Secure user authentication system to manage deployments.
+- Repository Selection: GitHub Repo Input: Allow users to specify the Anita-V4 GitHub repository URL for deployment. Should include form validation for security.
+- Environment Configuration: Environment Variable Input: Provide a form for users to input required environment variables (SESSION_ID, OWNER_NUMBER, BOT_NAME, etc.) with clear descriptions for each. Ensure that the form validates presence of mandatory variables.
+- Deployment Controls: Deployment Control: Implement UI elements (buttons, toggles) for starting, stopping, and restarting the deployment.
+- Automated Deployment: Heroku Integration: Use the provided Heroku API key to automate the deployment process to the user's Heroku account.
+- Log Display: Real-time Logs: Display real-time deployment logs within the UI to provide feedback on the deployment progress and any errors.
+- AI-Powered Debugging: Intelligent Issue Detection: Analyze deployment logs using an AI tool to identify common errors or warnings and suggest potential fixes or optimizations to the user.
+
+## Style Guidelines:
+
+- Primary color: Vibrant blue (#29ABE2) to convey trust and stability, reflecting the app's dependable deployment capabilities.
+- Background color: Light gray (#F0F0F0), offering a clean and modern backdrop that ensures readability and reduces visual fatigue.
+- Accent color: Purple (#9C27B0), to highlight interactive elements such as buttons and links, complementing the primary blue and enhancing user engagement.
+- Clean and modern sans-serif fonts to ensure readability and a professional look.
+- Simple, outline-style icons to represent deployment status, settings, and other functionalities.
+- Grid-based layout with clear sections for repository input, environment variables, and deployment controls.
+- Subtle transition animations for a smooth and responsive user experience.

next.config.ts

@@ -0,0 +1,42 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'placehold.co',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'firestuff.storage.googleapis.com',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'files.catbox.moe',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+  webpack: (config) => {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+      module: false,
+    };
+    return config;
+  },
+};
+
+export default nextConfig;

package.json

@@ -1,27 +1,72 @@
 {
-  "name": "Ebar-",
-  "version": "1.0.0",
-  "main": "index.js",
+  "name": "nextn",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "start": "node bot.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "next dev --turbopack -p 9002",
+    "genkit:dev": "genkit start -- tsx src/ai/dev.ts",
+    "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
   "dependencies": {
-    "axios": "^1.7.7",
-        "crypto": "^1.0.1",
-    "express": "^4.21.1",
-    "form-data": "^4.0.0",
-    "mrnima-moviedl": "1.0.0",
-    "node-telegram-bot-api": "^0.66.0",
-    "webtorrent": "^2.5.10",
-    "yt-search": "^2.12.1"
-      },
-  "keywords": ["Atomic", "bot", "Telegram", "multi-device"],
-  "engines": {
-    "node": "22.x"
+    "@genkit-ai/googleai": "^1.8.0",
+    "@genkit-ai/next": "^1.8.0",
+    "@hookform/resolvers": "^4.1.3",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@opentelemetry/exporter-jaeger": "^2.0.1",
+    "@tanstack-query-firebase/react": "^1.0.5",
+    "@tanstack/react-query": "^5.66.0",
+    "bcryptjs": "^2.4.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "dotenv": "^16.5.0",
+    "firebase": "^11.8.1",
+    "flutterwave-react-v3": "^1.3.2",
+    "genkit": "^1.8.0",
+    "lucide-react": "^0.475.0",
+    "mongodb": "^6.8.0",
+    "patch-package": "^8.0.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
+    "react-paystack": "^5.0.0",
+    "recharts": "^2.15.1",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "genkit-cli": "^1.8.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
-}
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.genkit/*
+.env*
+
+# firebase
+firebase-debug.log
+firestore-debug.log

src/README.md

@@ -0,0 +1,5 @@
+# Firebase Studio
+
+This is a NextJS starter in Firebase Studio.
+
+To get started, take a look at src/app/page.tsx.

src/ai/dev.ts

@@ -0,0 +1,4 @@
+import { config } from 'dotenv';
+config();
+
+import '@/ai/flows/analyze-deployment-logs.ts';

src/ai/flows/analyze-deployment-logs.ts

@@ -0,0 +1,54 @@
+'use server';
+
+/**
+ * @fileOverview Analyzes deployment logs to identify errors, warnings, and suggest fixes.
+ *
+ * - analyzeDeploymentLogs - A function that handles the analysis of deployment logs.
+ * - AnalyzeDeploymentLogsInput - The input type for the analyzeDeploymentLogs function.
+ * - AnalyzeDeploymentLogsOutput - The return type for the analyzeDeploymentLogs function.
+ */
+
+import {ai} from '@/ai/genkit';
+import {z} from 'genkit';
+
+const AnalyzeDeploymentLogsInputSchema = z.object({
+  deploymentLogs: z
+    .string()
+    .describe('The deployment logs to analyze.'),
+});
+export type AnalyzeDeploymentLogsInput = z.infer<typeof AnalyzeDeploymentLogsInputSchema>;
+
+const AnalyzeDeploymentLogsOutputSchema = z.object({
+  analysisResult: z.string().describe('The analysis result of the deployment logs, including identified errors, warnings, and suggested fixes.'),
+});
+export type AnalyzeDeploymentLogsOutput = z.infer<typeof AnalyzeDeploymentLogsOutputSchema>;
+
+export async function analyzeDeploymentLogs(input: AnalyzeDeploymentLogsInput): Promise<AnalyzeDeploymentLogsOutput> {
+  return analyzeDeploymentLogsFlow(input);
+}
+
+const prompt = ai.definePrompt({
+  name: 'analyzeDeploymentLogsPrompt',
+  input: {schema: AnalyzeDeploymentLogsInputSchema},
+  output: {schema: AnalyzeDeploymentLogsOutputSchema},
+  prompt: `You are an AI expert in analyzing deployment logs for potential errors, warnings, and suggesting fixes.
+
+Analyze the following deployment logs and provide a detailed analysis result including:
+- Identified errors and warnings.
+- Suggested fixes or optimizations to resolve deployment issues.
+
+Deployment Logs:
+{{{deploymentLogs}}}`,
+});
+
+const analyzeDeploymentLogsFlow = ai.defineFlow(
+  {
+    name: 'analyzeDeploymentLogsFlow',
+    inputSchema: AnalyzeDeploymentLogsInputSchema,
+    outputSchema: AnalyzeDeploymentLogsOutputSchema,
+  },
+  async input => {
+    const {output} = await prompt(input);
+    return output!;
+  }
+);

src/ai/genkit.ts

@@ -0,0 +1,7 @@
+import {genkit} from 'genkit';
+import {googleAI} from '@genkit-ai/googleai';
+
+export const ai = genkit({
+  plugins: [googleAI()],
+  model: 'googleai/gemini-2.0-flash',
+});

src/app/(auth)/login/page.tsx

@@ -0,0 +1,31 @@
+
+import { LoginForm } from "@/components/auth/LoginForm";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { Zap } from "lucide-react";
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-secondary via-background to-accent/20 p-4">
+      <Card className="w-full max-w-md shadow-xl hover:shadow-2xl">
+        <CardHeader className="text-center">
+           <Link href="/" className="inline-flex items-center justify-center mb-4">
+             <Zap className="h-8 w-8 text-primary" />
+             <span className="ml-2 text-2xl font-semibold text-foreground">Anita Deploy</span>
+           </Link>
+          <CardTitle className="text-2xl">Welcome Back!</CardTitle>
+          <CardDescription>Enter your credentials to access your dashboard.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <LoginForm />
+          <p className="mt-6 text-center text-sm text-muted-foreground">
+            Don&apos;t have an account?{" "}
+            <Link href="/register" className="font-medium text-primary hover:underline">
+              Sign up
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/(auth)/register/page.tsx

@@ -0,0 +1,31 @@
+
+import { RegisterForm } from "@/components/auth/RegisterForm";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { Zap } from "lucide-react";
+
+export default function RegisterPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-secondary via-background to-accent/20 p-4">
+      <Card className="w-full max-w-md shadow-xl hover:shadow-2xl">
+        <CardHeader className="text-center">
+          <Link href="/" className="inline-flex items-center justify-center mb-4">
+             <Zap className="h-8 w-8 text-primary" />
+             <span className="ml-2 text-2xl font-semibold text-foreground">Anita Deploy</span>
+           </Link>
+          <CardTitle className="text-2xl">Create an Account</CardTitle>
+          <CardDescription>Join Anita Deploy to start deploying your bot.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RegisterForm />
+          <p className="mt-6 text-center text-sm text-muted-foreground">
+            Already have an account?{" "}
+            <Link href="/login" className="font-medium text-primary hover:underline">
+              Log in
+            </Link>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/(dashboard)/deploy/page.tsx

@@ -0,0 +1,9 @@
+import { DeploymentForm } from "@/components/deployment/DeploymentForm";
+
+export default function NewDeploymentPage() {
+  return (
+    <div>
+      <DeploymentForm />
+    </div>
+  );
+}

src/app/(dashboard)/deployments/[id]/page.tsx

@@ -0,0 +1,188 @@
+"use client"; // This page uses client-side hooks for state and effects
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { LogDisplay } from '@/components/deployment/LogDisplay';
+import { AiLogAnalyzer } from '@/components/deployment/AiLogAnalyzer';
+import { DeploymentControls } from '@/components/deployment/DeploymentControls';
+import type { Deployment, DeploymentStatus } from '@/lib/types';
+import { ArrowLeft, CheckCircle2, ExternalLink, Hourglass, AlertTriangle, Zap, Info, PowerOff, Settings2, FileText, Brain } from 'lucide-react';
+import { getDeploymentLogs } from '@/lib/actions/deployment'; // Mocked action
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Skeleton } from '@/components/ui/skeleton';
+
+
+// Mock function to fetch deployment details - replace with actual API call
+async function fetchDeploymentDetails(id: string): Promise<Deployment | null> {
+  console.log("Fetching details for", id);
+  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate API delay
+  const mockDeployments: Deployment[] = [
+    { id: 'anita-bot-alpha', appName: 'Anita Bot Alpha', status: 'succeeded', createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), lastDeployedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), region: 'us-east', url: 'https://anita-bot-alpha.herokuapp.com' },
+    { id: 'anita-staging-v4', appName: 'Anita Staging V4', status: 'deploying', createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(), region: 'eu-west' },
+    { id: 'legacy-anita-bot', appName: 'Legacy Anita Bot', status: 'failed', createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), region: 'us-west' },
+    { id: 'anita-experimental', appName: 'Anita Experimental', status: 'stopped', createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), region: 'eu-central', url: 'https://anita-experimental.herokuapp.com' },
+  ];
+  return mockDeployments.find(d => d.id === id) || null;
+}
+
+function getStatusBadgeVariant(status: DeploymentStatus) {
+  switch (status) {
+    case 'succeeded': return 'default';
+    case 'deploying': return 'secondary';
+    case 'pending': return 'outline';
+    case 'failed': return 'destructive';
+    case 'stopped': return 'outline';
+    default: return 'outline';
+  }
+}
+
+function getStatusIcon(status: DeploymentStatus) {
+  switch (status) {
+    case 'succeeded': return <CheckCircle2 className="h-5 w-5 text-green-500" />;
+    case 'deploying': return <Hourglass className="h-5 w-5 text-blue-500 animate-spin" />;
+    case 'pending': return <Hourglass className="h-5 w-5 text-yellow-500" />;
+    case 'failed': return <AlertTriangle className="h-5 w-5 text-red-500" />;
+    case 'stopped': return <PowerOff className="h-5 w-5 text-gray-500" />;
+    default: return <Zap className="h-5 w-5 text-muted-foreground" />;
+  }
+}
+
+
+export default function DeploymentDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+
+  const [deployment, setDeployment] = useState<Deployment | null>(null);
+  const [logs, setLogs] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [logsLoading, setLogsLoading] = useState(true);
+
+  useEffect(() => {
+    if (id) {
+      setIsLoading(true);
+      fetchDeploymentDetails(id)
+        .then(data => {
+          setDeployment(data);
+          if (data) { // Fetch logs only if deployment data is found
+            setLogsLoading(true);
+            getDeploymentLogs(id).then(logData => {
+              setLogs(logData);
+              setLogsLoading(false);
+            });
+          }
+        })
+        .catch(err => console.error("Failed to fetch deployment details:", err))
+        .finally(() => setIsLoading(false));
+    }
+  }, [id]);
+
+  const handleStatusChange = (newStatus: DeploymentStatus) => {
+    if (deployment) {
+      setDeployment({ ...deployment, status: newStatus });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-1/4" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-64 w-full" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    );
+  }
+
+  if (!deployment) {
+    return (
+      <Alert variant="destructive">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>Deployment not found. It might have been deleted or the ID is incorrect.</AlertDescription>
+        <Button onClick={() => router.push('/dashboard')} variant="outline" className="mt-4">
+          <ArrowLeft className="mr-2 h-4 w-4" /> Back to Dashboard
+        </Button>
+      </Alert>
+    );
+  }
+  
+  const combinedLogs = logs.join('\n');
+
+  return (
+    <div className="space-y-8">
+      <Button variant="outline" onClick={() => router.push('/dashboard')} className="mb-6">
+        <ArrowLeft className="mr-2 h-4 w-4" /> Back to Dashboard
+      </Button>
+
+      <Card className="shadow-lg">
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
+            <div>
+              <CardTitle className="text-3xl text-primary">{deployment.appName}</CardTitle>
+              <CardDescription>Manage your &quot;{deployment.appName}&quot; deployment.</CardDescription>
+            </div>
+            <Badge variant={getStatusBadgeVariant(deployment.status)} className="text-md capitalize px-3 py-1.5 flex items-center gap-2">
+              {getStatusIcon(deployment.status)}
+              {deployment.status}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+            <p><strong className="text-foreground/80">ID:</strong> {deployment.id}</p>
+            <p><strong className="text-foreground/80">Created:</strong> {new Date(deployment.createdAt).toLocaleString()}</p>
+            <p><strong className="text-foreground/80">Region:</strong> {deployment.region || 'N/A'}</p>
+            {deployment.lastDeployedAt && <p><strong className="text-foreground/80">Last Deployed:</strong> {new Date(deployment.lastDeployedAt).toLocaleString()}</p>}
+          </div>
+          {deployment.url && (
+            <a
+              href={deployment.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-accent hover:underline"
+            >
+              <ExternalLink className="mr-2 h-4 w-4" /> Visit Deployed App
+            </a>
+          )}
+          <DeploymentControls deploymentId={deployment.id} currentStatus={deployment.status} onStatusChange={handleStatusChange} />
+        </CardContent>
+      </Card>
+
+      <Tabs defaultValue="logs" className="w-full">
+        <TabsList className="grid w-full grid-cols-2 md:grid-cols-3 gap-2 h-auto">
+          <TabsTrigger value="logs" className="py-2.5 text-sm"><FileText className="mr-2 h-4 w-4"/>Logs</TabsTrigger>
+          <TabsTrigger value="ai-analyzer" className="py-2.5 text-sm"><Brain className="mr-2 h-4 w-4"/>AI Analyzer</TabsTrigger>
+          <TabsTrigger value="settings" className="py-2.5 text-sm md:hidden lg:inline-block" disabled><Settings2 className="mr-2 h-4 w-4"/>Settings (Soon)</TabsTrigger>
+        </TabsList>
+        <TabsContent value="logs" className="mt-6">
+          <LogDisplay logs={logs} isLoading={logsLoading} />
+        </TabsContent>
+        <TabsContent value="ai-analyzer" className="mt-6">
+          <AiLogAnalyzer initialLogs={logsLoading ? "Loading logs for analysis..." : combinedLogs} />
+        </TabsContent>
+         <TabsContent value="settings" className="mt-6">
+           <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center"><Settings2 className="mr-2 h-5 w-5 text-primary"/>Deployment Settings</CardTitle>
+              <CardDescription>Configuration options for this deployment (feature coming soon).</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Alert>
+                <Info className="h-4 w-4" />
+                <AlertTitle>Coming Soon!</AlertTitle>
+                <AlertDescription>
+                  Advanced settings and environment variable management for this deployment will be available here in a future update.
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+           </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/app/(dashboard)/layout.tsx

@@ -0,0 +1,27 @@
+import { Header } from "@/components/layout/Header";
+import { ReactNode } from "react";
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+}
+
+export default function DashboardLayout({ children }: DashboardLayoutProps) {
+  // Here you would typically add authentication checks.
+  // For this example, we assume the user is authenticated.
+  // e.g., by checking a session or token.
+  // If not authenticated, redirect to /login.
+  
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main className="flex-1 container py-8">
+        {children}
+      </main>
+      <footer className="py-6 border-t">
+        <div className="container text-center text-sm text-muted-foreground">
+          Anita Deploy &copy; {new Date().getFullYear()}
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/(dashboard)/page.tsx

@@ -0,0 +1,88 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { PlusCircle, LayoutGrid } from 'lucide-react';
+import { DeploymentCard } from '@/components/deployment/DeploymentCard';
+import type { Deployment } from '@/lib/types';
+
+
+// Mock data for deployments - in a real app, this would come from an API/database
+const mockDeployments: Deployment[] = [
+  {
+    id: 'anita-bot-alpha',
+    appName: 'Anita Bot Alpha',
+    status: 'succeeded',
+    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago
+    lastDeployedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
+    region: 'us-east',
+    url: 'https://anita-bot-alpha.herokuapp.com',
+    userId: ''
+  },
+  {
+    id: 'anita-staging-v4',
+    appName: 'Anita Staging V4',
+    status: 'deploying',
+    createdAt: new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString(), // 5 hours ago
+    region: 'eu-west',
+    userId: ''
+  },
+  {
+    id: 'legacy-anita-bot',
+    appName: 'Legacy Anita Bot',
+    status: 'failed',
+    createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago
+    region: 'us-west',
+    userId: ''
+  },
+   {
+     id: 'anita-experimental',
+     appName: 'Anita Experimental',
+     status: 'stopped',
+     createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+     region: 'eu-central',
+     url: 'https://anita-experimental.herokuapp.com',
+     userId: ''
+   },
+];
+
+export const dynamic = 'force-dynamic'
+
+export default function DashboardPage() {
+  const deployments = mockDeployments; // In real app: fetchDeployments();
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground">Your Deployments</h1>
+          <p className="text-muted-foreground">Manage your Anita-V4 bot deployments.</p>
+        </div>
+        <Button asChild size="lg">
+          <Link href="/dashboard/deploy">
+            <PlusCircle className="mr-2 h-5 w-5" /> New Deployment
+          </Link>
+        </Button>
+      </div>
+
+      {deployments.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {deployments.map((deployment) => (
+            <DeploymentCard key={deployment.id} deployment={deployment} />
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-12 border-2 border-dashed rounded-lg">
+          <LayoutGrid className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-xl font-semibold text-foreground">No Deployments Yet</h3>
+          <p className="text-muted-foreground mt-1">
+            Get started by creating your first Anita-V4 bot deployment.
+          </p>
+          <Button asChild className="mt-6">
+            <Link href="/dashboard/deploy">
+              <PlusCircle className="mr-2 h-4 w-4" /> Create Deployment
+            </Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,270 @@
+
+"use client";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescription } from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlatformApiKeySchema, type PlatformApiKeyInput } from "@/lib/schemas";
+import { getPlatformApiKey, updatePlatformApiKey, getAllUsersForAdmin } from "@/lib/actions/admin";
+import { useToast } from "@/hooks/use-toast";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { Shield, KeyRound, Users, FileText, Loader2, Eye, EyeOff, RefreshCcw, Edit, Search } from "lucide-react";
+import type { User } from "@/lib/types";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { EditUserDialog } from "@/components/admin/EditUserDialog";
+
+export default function AdminDashboardPage() {
+  const { toast } = useToast();
+  const [currentApiKey, setCurrentApiKey] = useState("");
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [isLoadingApiKey, setIsLoadingApiKey] = useState(true);
+  const [isUpdatingApiKey, setIsUpdatingApiKey] = useState(false);
+
+  const [users, setUsers] = useState<User[]>([]);
+  const [isLoadingUsers, setIsLoadingUsers] = useState(true);
+  const [isRefreshingUsers, setIsRefreshingUsers] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [isEditUserDialogOpen, setIsEditUserDialogOpen] = useState(false);
+
+  const apiKeyForm = useForm<PlatformApiKeyInput>({
+    resolver: zodResolver(PlatformApiKeySchema),
+    defaultValues: { apiKey: "" },
+  });
+
+  const fetchAdminApiKey = useCallback(async () => {
+    setIsLoadingApiKey(true);
+    try {
+      const apiKeyResult = await getPlatformApiKey();
+      if (apiKeyResult.success && apiKeyResult.apiKey) {
+        setCurrentApiKey(apiKeyResult.apiKey);
+        apiKeyForm.setValue("apiKey", apiKeyResult.apiKey);
+      } else if (!apiKeyResult.success && apiKeyResult.message) {
+        toast({ title: "Error", description: `Failed to load API Key: ${apiKeyResult.message}`, variant: "destructive" });
+      }
+    } catch (error) {
+      toast({ title: "Error", description: "Failed to load API key.", variant: "destructive" });
+    } finally {
+      setIsLoadingApiKey(false);
+    }
+  }, [toast, apiKeyForm]);
+
+  const fetchAllUsers = useCallback(async () => {
+    setIsLoadingUsers(true);
+    try {
+      const usersResult = await getAllUsersForAdmin();
+      if (usersResult.success && usersResult.users) {
+        setUsers(usersResult.users);
+      } else if (!usersResult.success && usersResult.message) {
+          toast({ title: "Error", description: `Failed to load users: ${usersResult.message}`, variant: "destructive" });
+      }
+    } catch (error) {
+        toast({ title: "Error", description: "Failed to load users.", variant: "destructive" });
+    } finally {
+        setIsLoadingUsers(false);
+    }
+  }, [toast]);
+  
+  const handleRefreshUsers = async () => {
+    setIsRefreshingUsers(true);
+    await fetchAllUsers();
+    setIsRefreshingUsers(false);
+  }
+
+  useEffect(() => {
+    fetchAdminApiKey();
+    fetchAllUsers();
+  }, [fetchAdminApiKey, fetchAllUsers]);
+
+  const filteredUsers = useMemo(() => {
+    if (!searchTerm) return users;
+    const lowercasedSearchTerm = searchTerm.toLowerCase();
+    return users.filter(user =>
+      user.name.toLowerCase().includes(lowercasedSearchTerm) ||
+      user.email.toLowerCase().includes(lowercasedSearchTerm)
+    );
+  }, [users, searchTerm]);
+
+  async function onApiKeySubmit(values: PlatformApiKeyInput) {
+    setIsUpdatingApiKey(true);
+    try {
+      const result = await updatePlatformApiKey(values);
+      toast({
+        title: result.success ? "Success" : "Error",
+        description: result.message,
+        variant: result.success ? "default" : "destructive",
+      });
+      if (result.success) {
+        setCurrentApiKey(values.apiKey);
+      }
+    } catch (error) {
+      toast({ title: "Error", description: "An unexpected error occurred.", variant: "destructive" });
+    } finally {
+      setIsUpdatingApiKey(false);
+    }
+  }
+
+  const handleOpenEditUserDialog = (user: User) => {
+    setSelectedUser(user);
+    setIsEditUserDialogOpen(true);
+  };
+
+  const handleUserUpdateSuccess = () => {
+    setIsEditUserDialogOpen(false);
+    setSelectedUser(null);
+    fetchAllUsers(); 
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center">
+            <Shield className="mr-3 h-8 w-8 text-primary" /> Admin Dashboard
+          </h1>
+          <p className="text-muted-foreground">Welcome to the admin control panel.</p>
+        </div>
+      </div>
+
+      <Card className="shadow-xl hover:shadow-2xl">
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center"><KeyRound className="mr-2 h-5 w-5 text-primary"/>Platform API Key Management</CardTitle>
+          <CardDescription className="text-xs">Configure the global Platform API Key used for deployments.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoadingApiKey ? (
+            <div className="flex items-center justify-center p-4">
+              <Loader2 className="h-6 w-6 animate-spin text-primary" />
+              <span className="ml-2">Loading API Key...</span>
+            </div>
+          ) : (
+            <Form {...apiKeyForm}>
+              <form onSubmit={apiKeyForm.handleSubmit(onApiKeySubmit)} className="space-y-4">
+                <FormField
+                  control={apiKeyForm.control}
+                  name="apiKey"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Platform API Key</FormLabel>
+                      <div className="flex items-center gap-2">
+                        <FormControl>
+                          <Input type={showApiKey ? "text" : "password"} placeholder="Enter Platform API Key" {...field} />
+                        </FormControl>
+                        <Button type="button" variant="outline" size="icon" onClick={() => setShowApiKey(!showApiKey)} aria-label={showApiKey ? "Hide API key" : "Show API key"}>
+                          {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                        </Button>
+                      </div>
+                      <FormDescription className="text-xs">This key is used by the system to interact with the deployment platform.</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <Button type="submit" disabled={isUpdatingApiKey}>
+                  {isUpdatingApiKey && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  Update API Key
+                </Button>
+              </form>
+            </Form>
+          )}
+        </CardContent>
+      </Card>
+      
+      <Card className="shadow-xl hover:shadow-2xl">
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div>
+                <CardTitle className="text-lg flex items-center"><Users className="mr-2 h-5 w-5 text-primary"/>User Management</CardTitle>
+                <CardDescription className="text-xs">View and manage user accounts. Currently showing {filteredUsers.length} of {users.length} user(s).</CardDescription>
+            </div>
+            <div className="flex items-center gap-2 w-full sm:w-auto">
+              <div className="relative flex-grow sm:flex-grow-0">
+                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="search"
+                    placeholder="Search name or email..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="pl-8 w-full sm:w-[200px] lg:w-[250px]"
+                  />
+              </div>
+              <Button variant="outline" size="sm" onClick={handleRefreshUsers} disabled={isRefreshingUsers || isLoadingUsers} className="flex-shrink-0">
+                  {isRefreshingUsers ? <Loader2 className="mr-2 h-4 w-4 animate-spin"/> : <RefreshCcw className="mr-2 h-4 w-4"/>}
+                  Refresh
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {isLoadingUsers ? (
+             <div className="flex items-center justify-center p-4">
+              <Loader2 className="h-6 w-6 animate-spin text-primary" />
+              <span className="ml-2">Loading users...</span>
+            </div>
+          ) : filteredUsers.length > 0 ? (
+            <ScrollArea className="h-[400px] w-full rounded-md border">
+              <Table>
+                <TableHeader className="sticky top-0 bg-card z-10">
+                  <TableRow>
+                    <TableHead>Name</TableHead>
+                    <TableHead>Email</TableHead>
+                    <TableHead>Role</TableHead>
+                    <TableHead className="text-right">Coins</TableHead>
+                    <TableHead>Referral Code</TableHead>
+                    <TableHead>Joined</TableHead>
+                    <TableHead className="text-center">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredUsers.map((user) => (
+                    <TableRow key={user._id}>
+                      <TableCell className="font-medium">{user.name}</TableCell>
+                      <TableCell>{user.email}</TableCell>
+                      <TableCell><Badge variant={user.role === 'admin' ? 'default' : 'secondary'} className="text-xs">{user.role}</Badge></TableCell>
+                      <TableCell className="text-right">{user.coins?.toLocaleString() || 0}</TableCell>
+                      <TableCell>{user.referralCode || 'N/A'}</TableCell>
+                      <TableCell>{new Date(user.createdAt).toLocaleDateString()}</TableCell>
+                      <TableCell className="text-center"> 
+                        <Button variant="ghost" size="sm" onClick={() => handleOpenEditUserDialog(user)}>
+                            <Edit className="mr-2 h-4 w-4" /> Edit
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </ScrollArea>
+          ) : (
+            <p className="text-muted-foreground text-center py-4">{searchTerm ? "No users match your search." : "No users found."}</p>
+          )}
+        </CardContent>
+      </Card>
+
+      {selectedUser && (
+        <EditUserDialog
+          user={selectedUser}
+          isOpen={isEditUserDialogOpen}
+          onOpenChange={setIsEditUserDialogOpen}
+          onSuccess={handleUserUpdateSuccess}
+        />
+      )}
+
+      <Card className="shadow-xl hover:shadow-2xl">
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center"><FileText className="mr-2 h-5 w-5 text-primary"/>Application Logs</CardTitle>
+          <CardDescription className="text-xs">View system-wide application logs (feature coming soon).</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">
+            A centralized place to view important system logs and errors will be available here.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/admin/layout.tsx

@@ -0,0 +1,54 @@
+
+import { ReactNode } from "react";
+import Link from "next/link";
+import { Shield, LogOut, Settings, Users, LayoutDashboardIcon, BarChart3 } from "lucide-react"; 
+import { Button } from "@/components/ui/button";
+import { getLoggedInUser } from "@/lib/actions/auth";
+import { redirect } from 'next/navigation';
+
+interface AdminLayoutProps {
+  children: ReactNode;
+}
+
+export default async function AdminLayout({ children }: AdminLayoutProps) {
+  const user = await getLoggedInUser();
+
+  if (!user || user.role !== 'admin') {
+    redirect('/admin/login');
+  }
+
+  return (
+    <div className="flex min-h-screen">
+      <aside className="w-64 bg-card border-r p-6 flex flex-col">
+        <Link href="/admin/dashboard" className="flex items-center mb-8">
+          <Shield className="h-8 w-8 text-primary" />
+          <span className="ml-2 text-xl font-semibold text-foreground">Admin Panel</span>
+        </Link>
+        <nav className="flex flex-col space-y-2 flex-1">
+          <Button variant="ghost" className="justify-start" asChild>
+            <Link href="/admin/dashboard"><LayoutDashboardIcon className="mr-2 h-4 w-4" /> Dashboard</Link>
+          </Button>
+           <Button variant="ghost" className="justify-start" asChild>
+            <Link href="/admin/stats"><BarChart3 className="mr-2 h-4 w-4" /> Statistics</Link>
+          </Button>
+          <Button variant="ghost" className="justify-start" asChild>
+            <Link href="/admin/dashboard"><Users className="mr-2 h-4 w-4" /> User Management</Link>
+          </Button>
+          <Button variant="ghost" className="justify-start text-muted-foreground" disabled>
+            <Settings className="mr-2 h-4 w-4" /> Site Settings
+          </Button>
+          {/* Add more admin navigation links here */}
+        </nav>
+        <div className="mt-auto">
+          <Button variant="outline" className="w-full justify-start" asChild>
+             {/* This should also call a logout function specific to admin if needed */}
+            <Link href="/"><LogOut className="mr-2 h-4 w-4" /> Exit Admin</Link>
+          </Button>
+        </div>
+      </aside>
+      <main className="flex-1 p-8 bg-secondary">
+        {children}
+      </main>
+    </div>
+  );
+}

src/app/admin/login/page.tsx

@@ -0,0 +1,27 @@
+import { AdminLoginForm } from "@/components/auth/AdminLoginForm";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { ShieldAlert } from "lucide-react";
+
+export default function AdminLoginPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-secondary p-4">
+      <Card className="w-full max-w-md shadow-xl">
+        <CardHeader className="text-center">
+           <Link href="/" className="inline-flex items-center justify-center mb-4">
+             <ShieldAlert className="h-8 w-8 text-primary" />
+             <span className="ml-2 text-2xl font-semibold text-foreground">Admin Panel</span>
+           </Link>
+          <CardTitle className="text-2xl">Administrator Access</CardTitle>
+          <CardDescription>Enter your admin credentials to manage the application.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AdminLoginForm />
+           <p className="mt-6 text-center text-sm text-muted-foreground">
+            This area is for authorized personnel only.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/admin/stats/page.tsx

@@ -0,0 +1,73 @@
+
+export const dynamic = 'force-dynamic';
+
+import { getPlatformStats } from "@/lib/actions/admin";
+import { StatCard } from "@/components/admin/StatCard";
+import { Users, Package, Coins as CoinsIcon, AlertTriangle, BarChart3 } from "lucide-react"; // Renamed Coins to CoinsIcon
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export default async function AdminStatsPage() {
+  const statsResult = await getPlatformStats();
+
+  if (!statsResult.success || !statsResult.stats) {
+    return (
+      <div className="space-y-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center">
+            <BarChart3 className="mr-3 h-8 w-8 text-primary" /> Platform Statistics
+          </h1>
+        </div>
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>Error Fetching Stats</AlertTitle>
+          <AlertDescription>
+            {statsResult.message || "Could not load platform statistics. Please try again later."}
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  const { totalUsers, totalDeployments, totalCoinsInSystem } = statsResult.stats;
+
+  return (
+    <div className="space-y-8">
+       <div>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center">
+            <BarChart3 className="mr-3 h-8 w-8 text-primary" /> Platform Statistics
+          </h1>
+          <p className="text-muted-foreground">Overview of platform activity and usage.</p>
+        </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <StatCard title="Total Users" value={totalUsers.toLocaleString()} icon={Users} description="Total number of registered users." />
+        <StatCard title="Total Deployments" value={totalDeployments.toLocaleString()} icon={Package} description="Total number of deployments created." />
+        <StatCard title="Total Coins in System" value={totalCoinsInSystem.toLocaleString()} icon={CoinsIcon} description="Sum of all user coin balances." />
+      </div>
+
+      <Separator />
+
+      {/* Placeholder for charts */}
+      <Card className="shadow-lg">
+        <CardHeader>
+          <CardTitle className="flex items-center text-xl">
+            <BarChart3 className="mr-2 h-5 w-5 text-accent" />
+            Usage Trends
+          </CardTitle>
+          <CardDescription>Visual charts showing platform growth (feature coming soon).</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Alert>
+            <BarChart3 className="h-4 w-4" />
+            <AlertTitle>Charts Coming Soon!</AlertTitle>
+            <AlertDescription>
+              Detailed charts for user registration trends, deployment activity, and more will be available here in a future update.
+            </AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/api/genkit/[...slug]/route.ts

@@ -0,0 +1,4 @@
+// src/app/api/genkit/[...slug]/route.ts
+import { genkitNextHandler } from '@genkit-ai/next';
+import '@/ai/flows/analyze-deployment-logs'; // Ensure flows are loaded
+export { genkitNextHandler as GET, genkitNextHandler as POST };

src/app/dashboard/buy-coins/page.tsx

@@ -0,0 +1,43 @@
+
+import { CoinPurchaseForm } from "@/components/billing/CoinPurchaseForm";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { CreditCard, AlertTriangle } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+export const dynamic = 'force-dynamic';
+
+export default function BuyCoinsPage() {
+  return (
+    <div className="space-y-8">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center">
+            <CreditCard className="mr-3 h-8 w-8 text-primary" /> Buy Coins
+          </h1>
+          <p className="text-muted-foreground">Purchase coins to use for deployments and other features.</p>
+        </div>
+      </div>
+
+      <Alert variant="destructive" className="shadow-md">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Important: Payment System Notice</AlertTitle>
+        <AlertDescription>
+          This coin purchase system is currently in a **simulated mode**. 
+          Actual payment processing and coin crediting upon successful real payment via Paystack/Flutterwave webhooks are not yet fully implemented. 
+          Do not use real payment details.
+          The backend verification of payments is a critical next step.
+        </AlertDescription>
+      </Alert>
+
+      <Card className="shadow-xl">
+        <CardHeader>
+          <CardTitle>Select a Coin Package</CardTitle>
+          <CardDescription>Choose the number of coins you&apos;d like to purchase.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <CoinPurchaseForm />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/dashboard/deploy/page.tsx

@@ -0,0 +1,11 @@
+import { DeploymentForm } from "@/components/deployment/DeploymentForm";
+
+export const dynamic = 'force-dynamic';
+
+export default function NewDeploymentPage() {
+  return (
+    <div>
+      <DeploymentForm />
+    </div>
+  );
+}

src/app/dashboard/deployments/[id]/page.tsx

@@ -0,0 +1,281 @@
+
+"use client"; 
+
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { LogDisplay } from '@/components/deployment/LogDisplay';
+import { AiLogAnalyzer } from '@/components/deployment/AiLogAnalyzer';
+import { DeploymentControls } from '@/components/deployment/DeploymentControls';
+import type { Deployment, DeploymentStatus } from '@/lib/types';
+import { ArrowLeft, CheckCircle2, ExternalLink, Hourglass, AlertTriangle, Zap, Info, PowerOff, Settings2, FileText, Brain, RefreshCcw, Edit } from 'lucide-react';
+import { getDeploymentById, getDeploymentLogs } from '@/lib/actions/deployment';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Skeleton } from '@/components/ui/skeleton';
+import { EditEnvVariablesDialog } from '@/components/deployment/EditEnvVariablesDialog';
+
+function getStatusBadgeVariant(status: DeploymentStatus) {
+  switch (status) {
+    case 'succeeded': return 'default'; 
+    case 'deploying': return 'secondary';
+    case 'pending': return 'outline';
+    case 'failed': return 'destructive';
+    case 'stopped': return 'outline';
+    default: return 'outline';
+  }
+}
+
+function getStatusIcon(status: DeploymentStatus) {
+  switch (status) {
+    case 'succeeded': return <CheckCircle2 className="h-5 w-5 text-green-500" />;
+    case 'deploying': return <Hourglass className="h-5 w-5 text-blue-500 animate-spin" />;
+    case 'pending': return <Hourglass className="h-5 w-5 text-yellow-500" />;
+    case 'failed': return <AlertTriangle className="h-5 w-5 text-red-500" />;
+    case 'stopped': return <PowerOff className="h-5 w-5 text-gray-500" />;
+    default: return <Zap className="h-5 w-5 text-muted-foreground" />;
+  }
+}
+
+const sensitiveKeywords = ['session', 'api', 'key', 'secret', 'token', 'pass', 'password', 'auth', 'credentials', 'mongodb_uri', 'database_url'];
+
+const shouldHideValue = (key: string, value: any): boolean => {
+  if (typeof value !== 'string' || value.length <= 25) {
+    return false;
+  }
+  const keyLower = key.toLowerCase();
+  return sensitiveKeywords.some(keyword => keyLower.includes(keyword));
+};
+
+const displayValueHelper = (key: string, value: any): string => {
+  if (typeof value === 'boolean') return value ? 'true' : 'false';
+  const sValue = String(value);
+  if (shouldHideValue(key, sValue)) return `${sValue.substring(0,10)}... (hidden)`;
+  if (sValue.length > 100) return `${sValue.substring(0,97)}...`;
+  return sValue;
+};
+
+
+export default function DeploymentDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const id = params.id as string;
+
+  const [deployment, setDeployment] = useState<Deployment | null>(null);
+  const [logs, setLogs] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [logsLoading, setLogsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isEditEnvDialogOpen, setIsEditEnvDialogOpen] = useState(false);
+
+  const fetchDeploymentData = useCallback(async (forceRefresh = false) => {
+    if (!id) return;
+    if (!deployment || forceRefresh) setIsLoading(true);
+    setError(null);
+    try {
+      const deploymentData = await getDeploymentById(id);
+      if (deploymentData) {
+        setDeployment(deploymentData);
+        if (logsLoading || deploymentData.status !== deployment?.status || forceRefresh) {
+            setLogsLoading(true);
+            const logData = await getDeploymentLogs(deploymentData.id); 
+            setLogs(logData || []);
+            setLogsLoading(false);
+        }
+      } else {
+        setError("Deployment not found.");
+        setDeployment(null);
+      }
+    } catch (err) {
+      console.error("Failed to fetch deployment details:", err);
+      setError(err instanceof Error ? err.message : "An unexpected error occurred.");
+      setDeployment(null);
+    } finally {
+      if (!deployment || forceRefresh) setIsLoading(false); 
+    }
+  }, [id, deployment, logsLoading]); 
+
+  useEffect(() => {
+    if (id) {
+        fetchDeploymentData(true); // Initial fetch with full loading indication
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]); // Only re-run if ID changes
+
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout | undefined = undefined;
+    if (deployment && (deployment.status === 'deploying' || deployment.status === 'pending')) {
+      intervalId = setInterval(() => {
+        fetchDeploymentData(); // No force refresh for interval, let it be gentle
+      }, 10000); 
+    }
+    return () => {
+        if (intervalId) clearInterval(intervalId); 
+    }
+  }, [deployment, fetchDeploymentData]);
+
+
+  const handleStatusChange = (newStatus: DeploymentStatus) => {
+    if (deployment) {
+      setDeployment({ ...deployment, status: newStatus });
+      if (newStatus !== 'deploying' && newStatus !== 'pending') {
+         fetchDeploymentData(true); 
+      }
+    }
+  };
+  
+  const handleEnvUpdateSuccess = () => {
+    setIsEditEnvDialogOpen(false);
+    fetchDeploymentData(true); 
+  };
+
+  if (isLoading && !deployment) { 
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-10 w-1/3" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-72 w-full" />
+        <Skeleton className="h-72 w-full" />
+      </div>
+    );
+  }
+
+  if (error) {
+     return (
+      <Alert variant="destructive" className="shadow-xl">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>{error}</AlertDescription>
+        <Button onClick={() => router.push('/dashboard')} variant="outline" className="mt-4">
+          <ArrowLeft className="mr-2 h-4 w-4" /> Back to Dashboard
+        </Button>
+      </Alert>
+    );
+  }
+  
+  if (!deployment) {
+    return (
+      <Alert variant="destructive" className="shadow-xl">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>Deployment not found. It might have been deleted or the ID is incorrect.</AlertDescription>
+        <Button onClick={() => router.push('/dashboard')} variant="outline" className="mt-4">
+          <ArrowLeft className="mr-2 h-4 w-4" /> Back to Dashboard
+        </Button>
+      </Alert>
+    );
+  }
+  
+  const combinedLogs = logs.join('\n');
+
+  return (
+    <div className="space-y-8">
+       <div className="flex justify-between items-center mb-6">
+        <Button variant="outline" onClick={() => router.push('/dashboard')} className="shadow hover:shadow-md">
+          <ArrowLeft className="mr-2 h-4 w-4" /> Back to Dashboard
+        </Button>
+        <Button variant="ghost" onClick={() => fetchDeploymentData(true)} title="Refresh Data" className="text-muted-foreground hover:text-primary">
+          <RefreshCcw className="mr-2 h-4 w-4" /> Refresh
+        </Button>
+      </div>
+
+      <Card className="shadow-xl hover:shadow-2xl">
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
+            <div>
+              <CardTitle className="text-3xl font-bold text-primary">{deployment.appName}</CardTitle>
+              <CardDescription className="text-sm text-muted-foreground">Manage your &quot;{deployment.appName}&quot; deployment.</CardDescription>
+            </div>
+            <Badge variant={getStatusBadgeVariant(deployment.status)} className="text-md capitalize px-4 py-2 flex items-center gap-2 shadow-md">
+              {getStatusIcon(deployment.status)}
+              {deployment.status}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 text-sm">
+            <p><strong className="text-foreground/80">ID:</strong> <span className="font-mono text-muted-foreground">{deployment.id}</span></p>
+            <p><strong className="text-foreground/80">Created:</strong> {new Date(deployment.createdAt).toLocaleString()}</p>
+            <p><strong className="text-foreground/80">Region:</strong> {deployment.region || 'N/A'}</p>
+            {deployment.lastDeployedAt && <p><strong className="text-foreground/80">Last Deployed:</strong> {new Date(deployment.lastDeployedAt).toLocaleString()}</p>}
+          </div>
+          {deployment.url && (
+            <Button variant="link" asChild className="p-0 h-auto text-base">
+                <a
+                href={deployment.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center text-accent hover:underline font-medium"
+                >
+                <ExternalLink className="mr-2 h-4 w-4" /> Visit Deployed App
+                </a>
+            </Button>
+          )}
+          <DeploymentControls deploymentId={deployment.id} currentStatus={deployment.status} onStatusChange={handleStatusChange} />
+        </CardContent>
+      </Card>
+
+      <Tabs defaultValue="logs" className="w-full">
+        <TabsList className="grid w-full grid-cols-2 md:grid-cols-3 gap-2 h-auto shadow-md bg-muted p-1 rounded-lg">
+          <TabsTrigger value="logs" className="py-2.5 text-sm data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-lg"><FileText className="mr-2 h-4 w-4"/>Logs</TabsTrigger>
+          <TabsTrigger value="ai-analyzer" className="py-2.5 text-sm data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-lg"><Brain className="mr-2 h-4 w-4"/>AI Analyzer</TabsTrigger>
+          <TabsTrigger value="env" className="py-2.5 text-sm data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-lg"><Settings2 className="mr-2 h-4 w-4"/>Environment</TabsTrigger>
+        </TabsList>
+        <TabsContent value="logs" className="mt-6">
+          <LogDisplay logs={logs} isLoading={logsLoading} />
+        </TabsContent>
+        <TabsContent value="ai-analyzer" className="mt-6">
+          <AiLogAnalyzer initialLogs={logsLoading ? "Loading logs for analysis..." : combinedLogs} />
+        </TabsContent>
+         <TabsContent value="env" className="mt-6">
+           <Card className="shadow-xl">
+            <CardHeader className="flex flex-row justify-between items-center">
+              <div>
+                <CardTitle className="text-xl flex items-center"><Settings2 className="mr-2 h-5 w-5 text-primary"/>Environment Variables</CardTitle>
+                <CardDescription className="text-xs text-muted-foreground">Current environment configuration for this deployment.</CardDescription>
+              </div>
+              <Button variant="outline" size="sm" onClick={() => setIsEditEnvDialogOpen(true)}>
+                <Edit className="mr-2 h-4 w-4" /> Edit Variables
+              </Button>
+            </CardHeader>
+            <CardContent>
+              {deployment.envVariables && Object.keys(deployment.envVariables).length > 0 ? (
+                <div className="space-y-2 text-sm max-h-96 overflow-y-auto bg-muted/50 p-4 rounded-lg shadow-inner border">
+                  {Object.entries(deployment.envVariables).map(([key, value]) => (
+                    <div key={key} className="grid grid-cols-3 gap-2 py-1.5 border-b border-border/50 last:border-b-0 font-mono">
+                      <strong className="text-foreground/80 col-span-1 truncate" title={key}>{key}:</strong>
+                      <span className="col-span-2 break-all text-foreground/90" title={typeof value === 'string' || typeof value === 'number' ? String(value) : undefined}>
+                        {displayValueHelper(key, value)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <Alert className="shadow-sm">
+                  <Info className="h-4 w-4" />
+                  <AlertTitle>No Environment Variables</AlertTitle>
+                  <AlertDescription>
+                    No specific environment variables were found for this deployment, or they are not set to be displayed.
+                  </AlertDescription>
+                </Alert>
+              )}
+            </CardContent>
+           </Card>
+        </TabsContent>
+      </Tabs>
+      {deployment && (
+        <EditEnvVariablesDialog
+          isOpen={isEditEnvDialogOpen}
+          onOpenChange={setIsEditEnvDialogOpen}
+          deployment={deployment}
+          onSuccess={handleEnvUpdateSuccess}
+        />
+      )}
+    </div>
+  );
+}
+
+
+    

src/app/dashboard/layout.tsx

@@ -0,0 +1,33 @@
+
+import { Header } from "@/components/layout/Header";
+import type { ReactNode } from "react";
+import { getLoggedInUser } from "@/lib/actions/auth";
+import { redirect } from 'next/navigation';
+
+interface DashboardLayoutProps {
+  children: ReactNode;
+}
+
+export default async function DashboardLayout({ children }: DashboardLayoutProps) {
+  const user = await getLoggedInUser();
+
+  if (!user) {
+    // If no user is logged in (cookie not present or invalid), redirect to login
+    // This is a basic check; more robust auth might involve checking session validity
+    redirect('/login');
+  }
+  
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header user={user} />
+      <main className="flex-1 container py-8">
+        {children}
+      </main>
+      <footer className="py-6 border-t">
+        <div className="container text-center text-sm text-muted-foreground">
+          Anita Deploy &copy; {new Date().getFullYear()}
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/dashboard/page.tsx

@@ -0,0 +1,244 @@
+
+"use client";
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { PlusCircle, LayoutGrid, Gift, Loader2, Coins, Send, RefreshCcw, Info } from 'lucide-react';
+import { DeploymentCard } from '@/components/deployment/DeploymentCard';
+import { getDeployments } from '@/lib/actions/deployment';
+import { claimDailyCoins } from '@/lib/actions/user';
+import { getLoggedInUser, type LoggedInUser } from '@/lib/actions/auth';
+import type { Deployment } from '@/lib/types';
+import { useEffect, useState, useCallback } from 'react';
+import { useToast } from '@/hooks/use-toast';
+import { TransferCoinsDialog } from '@/components/user/TransferCoinsDialog';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+
+export default function DashboardPage() {
+  const [deployments, setDeployments] = useState<Deployment[]>([]);
+  const [isLoadingDeployments, setIsLoadingDeployments] = useState(true);
+  const [user, setUser] = useState<LoggedInUser | null>(null);
+  const [currentCoins, setCurrentCoins] = useState<number>(0);
+  const [isClaimingCoins, setIsClaimingCoins] = useState(false);
+  const [nextClaimInMs, setNextClaimInMs] = useState<number | null>(null);
+  const [countdown, setCountdown] = useState<string>("");
+  const [isTransferDialogOpen, setIsTransferDialogOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const fetchInitialData = useCallback(async () => {
+    setIsLoadingDeployments(true);
+    try {
+      const [fetchedUser, fetchedDeployments] = await Promise.all([
+        getLoggedInUser(),
+        getDeployments()
+      ]);
+      setUser(fetchedUser);
+      setCurrentCoins(fetchedUser?.coins ?? 0);
+      setDeployments(fetchedDeployments);
+
+      if (fetchedUser?.lastCoinClaim) {
+        const lastClaimTime = new Date(fetchedUser.lastCoinClaim).getTime();
+        const cooldownEndTime = lastClaimTime + 24 * 60 * 60 * 1000;
+        const now = Date.now();
+        if (cooldownEndTime > now) {
+          setNextClaimInMs(cooldownEndTime - now);
+        } else {
+          setNextClaimInMs(0);
+        }
+      } else {
+         setNextClaimInMs(0);
+      }
+
+    } catch (error) {
+      toast({ title: "Error", description: "Failed to load dashboard data.", variant: "destructive" });
+    } finally {
+      setIsLoadingDeployments(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    fetchInitialData();
+  }, [fetchInitialData]);
+
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout;
+    if (nextClaimInMs !== null && nextClaimInMs > 0) {
+      intervalId = setInterval(() => {
+        setNextClaimInMs(prev => {
+          if (prev === null || prev <= 1000) {
+            clearInterval(intervalId);
+            return 0;
+          }
+          return prev - 1000;
+        });
+      }, 1000);
+    }
+    return () => clearInterval(intervalId);
+  }, [nextClaimInMs]);
+
+  useEffect(() => {
+    if (nextClaimInMs !== null && nextClaimInMs > 0) {
+      const totalSeconds = Math.floor(nextClaimInMs / 1000);
+      const hours = Math.floor(totalSeconds / 3600);
+      const minutes = Math.floor((totalSeconds % 3600) / 60);
+      const seconds = totalSeconds % 60;
+
+      const formattedHours = String(hours).padStart(2, '0');
+      const formattedMinutes = String(minutes).padStart(2, '0');
+      const formattedSeconds = String(seconds).padStart(2, '0');
+
+      setCountdown(`${formattedHours}:${formattedMinutes}:${formattedSeconds}`);
+    } else if (nextClaimInMs === 0) {
+      setCountdown("Ready to claim!");
+    } else {
+      setCountdown("");
+    }
+  }, [nextClaimInMs]);
+
+
+  const handleClaimCoins = async () => {
+    setIsClaimingCoins(true);
+    try {
+      const result = await claimDailyCoins();
+      toast({
+        title: result.success ? "Success!" : "Oops!",
+        description: result.message,
+        variant: result.success ? "default" : "destructive",
+      });
+      if (result.success && result.newBalance !== undefined) {
+        setCurrentCoins(result.newBalance);
+        fetchInitialData(); // Refetch to update lastCoinClaim and countdown
+      } else if (!result.success && result.nextClaimAvailableInMs) {
+        setNextClaimInMs(result.nextClaimAvailableInMs);
+      }
+    } catch (error) {
+      toast({ title: "Error", description: "An unexpected error occurred.", variant: "destructive" });
+    } finally {
+      setIsClaimingCoins(false);
+    }
+  };
+
+  const handleTransferSuccess = (newBalance: number) => {
+    setCurrentCoins(newBalance);
+    fetchInitialData();
+  };
+
+  return (
+    <div className="space-y-8">
+      <Card className="shadow-xl hover:shadow-2xl border-primary/20">
+        <CardHeader className="p-4 sm:p-6 bg-card rounded-t-lg">
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+            <div>
+              <CardTitle className="text-2xl sm:text-3xl font-bold tracking-tight text-primary">Your Deployments</CardTitle>
+              <CardDescription className="text-muted-foreground mt-1">Manage your Anita-V4 bot deployments.</CardDescription>
+            </div>
+            <Button asChild size="lg" className="w-full md:w-auto shadow-md hover:shadow-lg" disabled={!user} title="New Deployment">
+              <Link href="/dashboard/deploy">
+                <PlusCircle className="mr-2 h-5 w-5" /> New Deployment
+              </Link>
+            </Button>
+          </div>
+        </CardHeader>
+        {user && (
+          <CardContent className="p-4 sm:p-6 border-t">
+            <div className="flex flex-col sm:flex-row items-center justify-between gap-4 flex-wrap">
+              <div className="flex items-center text-lg bg-secondary/50 p-3 rounded-lg shadow-sm border border-border">
+                <Coins className="mr-2.5 h-6 w-6 text-yellow-500" />
+                <span className="font-bold text-foreground">{currentCoins.toLocaleString()}</span>
+                <span className="ml-1.5 text-sm text-muted-foreground">Coins</span>
+              </div>
+              <div className="flex flex-col sm:flex-row items-center gap-3 flex-wrap">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsTransferDialogOpen(true)}
+                  disabled={!user}
+                  className="min-w-[150px] shadow-sm hover:shadow-md"
+                  title="Transfer Coins"
+                >
+                  <Send className="mr-2 h-4 w-4" /> Transfer Coins
+                </Button>
+                {nextClaimInMs !== null && (
+                  <div className="flex flex-col items-center sm:items-end">
+                    <Button
+                      onClick={handleClaimCoins}
+                      disabled={isClaimingCoins || (nextClaimInMs !== null && nextClaimInMs > 0)}
+                      variant={nextClaimInMs === 0 ? "default" : "outline"}
+                      size="sm"
+                      className="min-w-[170px] shadow-sm hover:shadow-md"
+                      title="Claim Daily Coins"
+                    >
+                      {isClaimingCoins ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Gift className="mr-2 h-4 w-4" />}
+                      {nextClaimInMs > 0 ? `Claim in ${countdown}` :
+                       (countdown === "Ready to claim!" || nextClaimInMs === 0) ? "Claim Daily Coins" :
+                       isClaimingCoins ? "Claiming..." : "Daily Coins"}
+                    </Button>
+                    {user.referralCode && user.referralCode !== 'N/A' && (
+                      <p className="text-xs text-muted-foreground mt-1.5 text-center sm:text-right">
+                        Your Code: <span className="font-semibold text-primary">{user.referralCode}</span>
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        )}
+      </Card>
+
+      {isLoadingDeployments ? (
+        <div className="text-center py-12">
+          <Loader2 className="mx-auto h-12 w-12 text-primary animate-spin mb-4" />
+          <p className="text-muted-foreground">Loading deployments...</p>
+        </div>
+      ) : deployments.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {deployments.map((deployment) => (
+            <DeploymentCard key={deployment.id} deployment={deployment} />
+          ))}
+        </div>
+      ) : (
+        <Card className="text-center py-12 border-2 border-dashed rounded-lg shadow-sm hover:shadow-md">
+          <CardContent className="flex flex-col items-center">
+            <LayoutGrid className="mx-auto h-16 w-16 text-muted-foreground mb-6" />
+            <h3 className="text-2xl font-semibold text-foreground">No Deployments Yet</h3>
+            <p className="text-muted-foreground mt-2 max-w-md mx-auto">
+              Ready to launch your Anita-V4 bot? You&apos;ll need some coins to get started.
+              Don&apos;t forget to claim your daily coins!
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-8">
+              <Button asChild className="mt-0 shadow-md hover:shadow-lg" disabled={!user} title="Create Deployment">
+                <Link href="/dashboard/deploy">
+                  <PlusCircle className="mr-2 h-4 w-4" /> Create Deployment
+                </Link>
+              </Button>
+               {user && nextClaimInMs !== null && (
+                 <Button
+                    onClick={handleClaimCoins}
+                    disabled={isClaimingCoins || (nextClaimInMs !== null && nextClaimInMs > 0)}
+                    variant={(nextClaimInMs === 0) ? "default" : "outline"}
+                    className="shadow-sm hover:shadow-md"
+                  >
+                    {isClaimingCoins ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Coins className="mr-2 h-4 w-4" />}
+                    {nextClaimInMs > 0 ? `Claim in ${countdown}` :
+                     (countdown === "Ready to claim!" || nextClaimInMs === 0) ? "Claim Daily Coins" :
+                     isClaimingCoins ? "Claiming..." : "Claim Coins"}
+                  </Button>
+               )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {user && (
+        <TransferCoinsDialog
+          isOpen={isTransferDialogOpen}
+          onOpenChange={setIsTransferDialogOpen}
+          currentUserCoins={currentCoins}
+          onTransferSuccess={handleTransferSuccess}
+        />
+      )}
+    </div>
+  );
+}

src/app/dashboard/profile/page.tsx

@@ -0,0 +1,185 @@
+
+import { getLoggedInUser } from "@/lib/actions/auth";
+import { redirect } from 'next/navigation';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { CopyButton } from "@/components/ui/CopyButton";
+import { UserCircle, Mail, CalendarDays, Coins, Gift, Shield, Users, BarChart3, KeyRound, UserCog, Trash2, AlertTriangle } from "lucide-react";
+import { UpdateProfileForm } from "@/components/user/UpdateProfileForm";
+import { ChangePasswordForm } from "@/components/user/ChangePasswordForm";
+import { DeleteAccountDialog } from "@/components/user/DeleteAccountDialog";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+
+export const dynamic = 'force-dynamic';
+
+export default async function ProfilePage() {
+  const user = await getLoggedInUser();
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  const getAvatarFallback = () => {
+    if (user?.name) {
+      const nameParts = user.name.split(" ");
+      if (nameParts.length > 1 && nameParts[0] && nameParts[1]) {
+        return nameParts[0][0].toUpperCase() + nameParts[1][0].toUpperCase();
+      }
+      return user.name.substring(0, 2).toUpperCase();
+    }
+    return "U";
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight text-foreground flex items-center">
+          <UserCircle className="mr-3 h-8 w-8 text-primary" /> Your Profile
+        </h1>
+        <p className="text-muted-foreground">View and manage your account details and settings.</p>
+      </div>
+
+      <Card className="shadow-xl hover:shadow-2xl">
+        <CardHeader className="flex flex-col items-center text-center sm:flex-row sm:text-left sm:items-start gap-4">
+          <Avatar className="h-24 w-24 border-2 border-primary shadow-sm">
+            <AvatarImage 
+              src={`https://placehold.co/100x100.png?text=${getAvatarFallback()}`} 
+              alt={user.name}
+              data-ai-hint="user avatar"
+            />
+            <AvatarFallback className="text-3xl">{getAvatarFallback()}</AvatarFallback>
+          </Avatar>
+          <div className="flex-1">
+            <CardTitle className="text-2xl">{user.name}</CardTitle>
+            <CardDescription className="flex items-center mt-1">
+              <Mail className="mr-2 h-4 w-4 text-muted-foreground" /> {user.email}
+            </CardDescription>
+            {user.role === 'admin' && (
+                <Badge variant="default" className="mt-2 text-xs">
+                    <Shield className="mr-1.5 h-3.5 w-3.5" /> Admin
+                </Badge>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6 pt-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
+            <div className="flex items-center p-4 bg-secondary/60 rounded-lg shadow">
+              <Coins className="mr-3 h-6 w-6 text-yellow-500" />
+              <div>
+                <p className="text-muted-foreground">Coin Balance</p>
+                <p className="font-semibold text-lg text-foreground">{user.coins.toLocaleString()} Coins</p>
+              </div>
+            </div>
+            <div className="flex items-center p-4 bg-secondary/60 rounded-lg shadow">
+              <CalendarDays className="mr-3 h-6 w-6 text-blue-500" />
+              <div>
+                <p className="text-muted-foreground">Joined On</p>
+                <p className="font-semibold text-foreground">{new Date(user.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
+              </div>
+            </div>
+          </div>
+          
+          {user.referralCode && user.referralCode !== 'N/A' && (
+            <Card className="bg-card border shadow-lg">
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center">
+                  <Gift className="mr-2 h-5 w-5 text-accent" />
+                  Your Referral Code
+                </CardTitle>
+                <CardDescription className="text-xs">Share this code with friends. You earn 10 coins for each successful referral!</CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col sm:flex-row items-center justify-between gap-2 p-4 bg-muted/40 rounded-md">
+                <p className="text-lg font-mono font-semibold text-primary break-all">{user.referralCode}</p>
+                <CopyButton textToCopy={user.referralCode} buttonText="Copy Code" />
+              </CardContent>
+            </Card>
+          )}
+
+          <Card className="bg-card border shadow-lg">
+            <CardHeader>
+                <CardTitle className="text-lg flex items-center">
+                    <BarChart3 className="mr-2 h-5 w-5 text-green-500" />
+                    Referral Statistics
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                <div className="flex items-center p-4 bg-secondary/60 rounded-lg shadow-sm">
+                    <Users className="mr-3 h-5 w-5 text-indigo-500" />
+                    <div>
+                        <p className="text-muted-foreground">Users Referred</p>
+                        <p className="font-semibold text-lg text-foreground">{user.referredUsersCount.toLocaleString()}</p>
+                    </div>
+                </div>
+                <div className="flex items-center p-4 bg-secondary/60 rounded-lg shadow-sm">
+                    <Coins className="mr-3 h-5 w-5 text-amber-500" />
+                    <div>
+                        <p className="text-muted-foreground">Total Coins from Referrals</p>
+                        <p className="font-semibold text-lg text-foreground">{user.referralCoinsEarned.toLocaleString()} Coins</p>
+                    </div>
+                </div>
+            </CardContent>
+          </Card>
+        </CardContent>
+      </Card>
+
+      <Separator />
+
+      <Card className="shadow-xl hover:shadow-2xl">
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center">
+            <UserCog className="mr-2 h-5 w-5 text-primary" />
+            Update Profile Information
+          </CardTitle>
+          <CardDescription className="text-xs">Change your display name.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <UpdateProfileForm user={user} />
+        </CardContent>
+      </Card>
+      
+      <Separator />
+
+      <Card className="shadow-xl hover:shadow-2xl">
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center">
+            <KeyRound className="mr-2 h-5 w-5 text-primary" />
+            Change Password
+          </CardTitle>
+          <CardDescription className="text-xs">Update your account password.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChangePasswordForm />
+        </CardContent>
+      </Card>
+
+      <Separator />
+
+      <Card className="shadow-xl border-destructive hover:shadow-2xl hover:border-destructive/70">
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center text-destructive">
+            <AlertTriangle className="mr-2 h-5 w-5" />
+            Danger Zone
+          </CardTitle>
+          <CardDescription className="text-xs">Manage irreversible account actions.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-start space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Deleting your account is permanent. All your data, including deployments,
+              will be removed and cannot be recovered.
+            </p>
+            <DeleteAccountDialog>
+              <Button variant="destructive">
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete My Account
+              </Button>
+            </DeleteAccountDialog>
+          </div>
+        </CardContent>
+      </Card>
+
+    </div>
+  );
+}

src/app/globals.css

@@ -0,0 +1,118 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: 210 40% 98%; /* Lighter, cleaner background */
+    --foreground: 222 47% 11%; /* Dark blue for strong contrast */
+
+    --card: 0 0% 100%; /* Pure White */
+    --card-foreground: 222 47% 11%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+
+    --primary: 220 70% 50%; /* Vibrant, professional Blue */
+    --primary-foreground: 0 0% 100%; /* White */
+
+    --secondary: 210 40% 93%; /* Softer gray for secondary elements */
+    --secondary-foreground: 222 30% 25%;
+
+    --muted: 210 40% 90%; /* Muted gray */
+    --muted-foreground: 210 30% 50%;
+
+    --accent: 260 80% 60%; /* Rich Purple for accents */
+    --accent-foreground: 0 0% 100%; /* White */
+
+    --destructive: 0 75% 55%; /* Clear Red for destructive actions */
+    --destructive-foreground: 0 0% 100%;
+
+    --border: 210 30% 85%;
+    --input: 210 30% 95%;
+    --ring: 220 70% 55%; /* Primary blue for rings */
+
+    --radius: 0.75rem; /* Slightly larger radius for a softer look */
+
+    /* Chart colors */
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    
+    --sidebar-background: 220 30% 97%; 
+    --sidebar-foreground: 220 18% 12%;
+    --sidebar-primary: 225 75% 60%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 250 70% 65%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 220 25% 90%;
+    --sidebar-ring: 225 75% 65%;
+  }
+
+  .dark {
+    --background: 222 47% 8%; /* Very dark blue for background */
+    --foreground: 210 40% 96%; /* Light gray/off-white for text */
+
+    --card: 222 40% 12%; /* Darker card for depth */
+    --card-foreground: 210 40% 96%;
+
+    --popover: 222 40% 10%;
+    --popover-foreground: 210 40% 96%;
+
+    --primary: 220 70% 65%; /* Lighter, vibrant Blue for dark mode */
+    --primary-foreground: 222 47% 11%; /* Dark text on light primary */
+
+    --secondary: 222 30% 18%; /* Darker secondary */
+    --secondary-foreground: 210 30% 85%;
+
+    --muted: 222 25% 22%;
+    --muted-foreground: 210 25% 70%;
+
+    --accent: 260 70% 70%; /* Lighter Purple for dark mode */
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 65% 60%; /* Adjusted red for dark */
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 222 25% 28%;
+    --input: 222 25% 20%;
+    --ring: 220 70% 65%;
+
+    /* Chart colors for dark theme */
+    --chart-1: 220 70% 60%;
+    --chart-2: 160 60% 55%;
+    --chart-3: 30 80% 65%;
+    --chart-4: 280 65% 70%;
+    --chart-5: 340 75% 65%;
+
+    --sidebar-background: 222 40% 12%;
+    --sidebar-foreground: 210 40% 96%;
+    --sidebar-primary: 220 70% 65%;
+    --sidebar-primary-foreground: 222 47% 11%;
+    --sidebar-accent: 260 70% 70%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 222 25% 28%;
+    --sidebar-ring: 220 70% 65%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+  main {
+    flex-grow: 1;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,40 @@
+
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Toaster } from "@/components/ui/toaster";
+import { cn } from "@/lib/utils";
+import { ThemeProvider } from '@/components/layout/ThemeProvider';
+
+const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'Anita Deploy - Deploy Anita-V4 with Ease',
+  description: 'Effortlessly deploy your Anita-V4 WhatsApp bot to your chosen platform.',
+  icons: {
+    icon: '/favicon.ico', // Placeholder, ensure you have a favicon
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={cn(inter.variable, "font-sans antialiased")}>
+        <ThemeProvider
+          defaultTheme="light" // Or "dark", "system" needs more handling in ThemeProvider for OS pref
+          storageKey="anita-deploy-theme"
+        >
+          {children}
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,123 @@
+
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, Zap, Cog, Terminal, ShieldCheck } from 'lucide-react';
+import Image from 'next/image';
+
+export default function LandingPage() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <header className="px-4 lg:px-6 h-16 flex items-center border-b sticky top-0 bg-background/95 backdrop-blur-md z-50">
+        <Link href="/" className="flex items-center justify-center">
+          <Zap className="h-6 w-6 text-primary" />
+          <span className="ml-2 text-xl font-semibold text-foreground">Anita Deploy</span>
+        </Link>
+        <nav className="ml-auto flex gap-4 sm:gap-6">
+          <Button variant="outline" asChild>
+            <Link href="/login">Login</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/register">Sign Up <ArrowRight className="ml-2 h-4 w-4" /></Link>
+          </Button>
+        </nav>
+      </header>
+
+      <main className="flex-1">
+        <section className="w-full py-20 md:py-28 lg:py-36 bg-gradient-to-br from-background via-secondary/70 to-background">
+          <div className="container px-4 md:px-6">
+            <div className="grid gap-10 lg:grid-cols-[1fr_500px] lg:gap-16 xl:grid-cols-[1fr_600px]">
+              <div className="flex flex-col justify-center space-y-8">
+                <div className="space-y-4">
+                  <h1 className="text-5xl font-extrabold tracking-tight sm:text-6xl xl:text-7xl/none bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">
+                    Deploy Anita-V4 Bot in Minutes
+                  </h1>
+                  <p className="max-w-[600px] text-muted-foreground md:text-xl">
+                    Anita Deploy simplifies the process of deploying your own Anita-V4 WhatsApp bot.
+                    Configure your environment, connect to your deployment platform, and go live effortlessly.
+                  </p>
+                </div>
+                <div className="flex flex-col gap-3 min-[400px]:flex-row">
+                  <Button size="lg" asChild className="shadow-lg hover:shadow-primary/30 transform hover:scale-105 transition-all duration-300">
+                    <Link href="/dashboard">
+                      Get Started
+                      <ArrowRight className="ml-2 h-5 w-5" />
+                    </Link>
+                  </Button>
+                  <Button variant="secondary" size="lg" asChild className="shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
+                    <Link href="https://github.com/DavidCyrilTech/Anita-V4" target="_blank" rel="noopener noreferrer">
+                      View on GitHub
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+              <Image
+                src="https://files.catbox.moe/jd0s4p.jpg"
+                alt="Queen Anita V4 Bot"
+                data-ai-hint="chatbot ai"
+                width={600}
+                height={400}
+                className="mx-auto aspect-video overflow-hidden rounded-xl object-contain sm:w-full lg:order-last shadow-2xl border-2 border-primary/20"
+                priority
+              />
+            </div>
+          </div>
+        </section>
+
+        <section className="w-full py-16 md:py-24 lg:py-32 bg-background">
+          <div className="container px-4 md:px-6">
+            <div className="flex flex-col items-center justify-center space-y-4 text-center">
+              <div className="space-y-2">
+                <div className="inline-block rounded-lg bg-primary/10 px-4 py-2 text-sm font-semibold text-primary shadow-sm">Key Features</div>
+                <h2 className="text-4xl font-bold tracking-tight sm:text-5xl text-foreground">Everything You Need to Deploy</h2>
+                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                  From easy configuration to AI-powered debugging, Anita Deploy provides a seamless experience.
+                </p>
+              </div>
+            </div>
+            <div className="mx-auto grid max-w-5xl items-start gap-10 sm:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-16 mt-16">
+              <div className="flex flex-col items-center text-center p-8 rounded-xl border bg-card shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out hover:border-primary/50 transform hover:-translate-y-2">
+                <div className="p-4 rounded-full bg-primary/10 mb-6 shadow-md">
+                  <Cog className="h-12 w-12 text-primary" />
+                </div>
+                <h3 className="text-2xl font-semibold mb-3 text-foreground">Easy Configuration</h3>
+                <p className="text-sm text-muted-foreground">
+                  Simple form to set up all your Anita-V4 environment variables.
+                </p>
+              </div>
+              <div className="flex flex-col items-center text-center p-8 rounded-xl border bg-card shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out hover:border-primary/50 transform hover:-translate-y-2">
+                <div className="p-4 rounded-full bg-primary/10 mb-6 shadow-md">
+                 <ShieldCheck className="h-12 w-12 text-primary" />
+                </div>
+                <h3 className="text-2xl font-semibold mb-3 text-foreground">Secure Platform</h3>
+                <p className="text-sm text-muted-foreground">
+                  One-click deployment to your chosen platform, with security in mind.
+                </p>
+              </div>
+              <div className="flex flex-col items-center text-center p-8 rounded-xl border bg-card shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out hover:border-primary/50 transform hover:-translate-y-2">
+                <div className="p-4 rounded-full bg-primary/10 mb-6 shadow-md">
+                  <Terminal className="h-12 w-12 text-primary" />
+                </div>
+                <h3 className="text-2xl font-semibold mb-3 text-foreground">AI-Powered Debugging</h3>
+                <p className="text-sm text-muted-foreground">
+                  Analyze deployment logs with AI to quickly identify and fix issues.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <footer className="flex flex-col gap-2 sm:flex-row py-8 w-full shrink-0 items-center px-4 md:px-6 border-t bg-secondary/50">
+        <p className="text-xs text-muted-foreground">&copy; {new Date().getFullYear()} Anita Deploy. All rights reserved.</p>
+        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
+           <Link href="/privacy" className="text-xs hover:underline underline-offset-4 text-muted-foreground hover:text-primary">
+            Privacy Policy
+          </Link>
+          <Link href="/terms" className="text-xs hover:underline underline-offset-4 text-muted-foreground hover:text-primary">
+            Terms of Service
+          </Link>
+        </nav>
+      </footer>
+    </div>
+  );
+}

src/apphosting.yaml

@@ -0,0 +1,7 @@
+# Settings to manage and configure a Firebase App Hosting backend.
+# https://firebase.google.com/docs/app-hosting/configure
+
+runConfig:
+  # Increase this value if you'd like to automatically spin up
+  # more instances in response to increased traffic.
+  maxInstances: 1

src/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

src/components/admin/EditUserDialog.tsx

@@ -0,0 +1,196 @@
+
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod"; // Added missing import
+import { UpdateUserRoleAdminSchema, UpdateUserCoinsAdminSchema, type UserRole } from "@/lib/schemas";
+import { updateUserRoleAdmin, updateUserCoinsAdmin } from "@/lib/actions/admin";
+import { useToast } from "@/hooks/use-toast";
+import { useState, useEffect } from "react"; // useEffect was imported but not used, keeping it for now in case.
+import { Loader2 } from "lucide-react";
+import type { User } from "@/lib/types";
+
+interface EditUserDialogProps {
+  user: User | null;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSuccess: () => void; // Callback after successful update
+}
+
+type EditUserFormData = {
+  newRole: UserRole;
+  coinAdjustment: number;
+};
+
+export function EditUserDialog({ user, isOpen, onOpenChange, onSuccess }: EditUserDialogProps) {
+  const { toast } = useToast();
+  const [isSubmittingRole, setIsSubmittingRole] = useState(false);
+  const [isSubmittingCoins, setIsSubmittingCoins] = useState(false);
+
+  const form = useForm<EditUserFormData>({
+    resolver: zodResolver(
+        z.object({ // This is where 'z' was needed
+          newRole: UpdateUserRoleAdminSchema.shape.newRole,
+          coinAdjustment: UpdateUserCoinsAdminSchema.shape.coinAdjustment,
+        })
+    ),
+    defaultValues: {
+      newRole: user?.role || "user",
+      coinAdjustment: 0,
+    },
+  });
+
+  // Update form defaults when user prop changes
+  // Using useEffect to reset form when user prop changes
+  useEffect(() => {
+    if (user) {
+      form.reset({
+        newRole: user.role || "user",
+        coinAdjustment: 0,
+      });
+    }
+  }, [user, form.reset]);
+
+
+  if (!user) return null;
+
+  const handleRoleSubmit = async (values: { newRole: UserRole }) => {
+    setIsSubmittingRole(true);
+    try {
+      const result = await updateUserRoleAdmin({ userId: user._id, newRole: values.newRole });
+      toast({
+        title: result.success ? "Success" : "Error",
+        description: result.message,
+        variant: result.success ? "default" : "destructive",
+      });
+      if (result.success) {
+        onSuccess();
+      }
+    } catch (error) {
+      toast({ title: "Error", description: "An unexpected error occurred.", variant: "destructive" });
+    } finally {
+      setIsSubmittingRole(false);
+    }
+  };
+
+  const handleCoinsSubmit = async (values: { coinAdjustment: number }) => {
+    setIsSubmittingCoins(true);
+    try {
+      const result = await updateUserCoinsAdmin({ userId: user._id, coinAdjustment: values.coinAdjustment });
+      toast({
+        title: result.success ? "Success" : "Error",
+        description: result.message,
+        variant: result.success ? "default" : "destructive",
+      });
+      if (result.success) {
+        form.setValue("coinAdjustment", 0); // Reset coin adjustment field
+        onSuccess();
+      }
+    } catch (error) {
+      toast({ title: "Error", description: "An unexpected error occurred.", variant: "destructive" });
+    } finally {
+      setIsSubmittingCoins(false);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle>Edit User: {user.name}</DialogTitle>
+          <DialogDescription>
+            Modify user role and coin balance. Current email: {user.email} (cannot be changed).
+          </DialogDescription>
+        </DialogHeader>
+        
+        <Form {...form}>
+          <div className="space-y-6 py-4">
+            {/* Role Management Form */}
+            <form onSubmit={form.handleSubmit(data => handleRoleSubmit({ newRole: data.newRole }))} className="space-y-4 p-4 border rounded-md">
+              <FormField
+                control={form.control}
+                name="newRole"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>User Role</FormLabel>
+                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a role" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="user">User</SelectItem>
+                        <SelectItem value="admin">Admin</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" disabled={isSubmittingRole || user.role === form.getValues("newRole")}>
+                {isSubmittingRole && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Update Role
+              </Button>
+            </form>
+
+            {/* Coin Management Form */}
+            <form onSubmit={form.handleSubmit(data => handleCoinsSubmit({ coinAdjustment: data.coinAdjustment }))} className="space-y-4 p-4 border rounded-md">
+               <FormField
+                control={form.control}
+                name="coinAdjustment"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Adjust Coins (Current: {user.coins.toLocaleString()})</FormLabel>
+                    <FormControl>
+                      <Input 
+                        type="number" 
+                        placeholder="e.g., 50 or -20" 
+                        {...field} 
+                        onChange={e => field.onChange(parseInt(e.target.value,10) || 0)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" disabled={isSubmittingCoins || form.getValues("coinAdjustment") === 0}>
+                {isSubmittingCoins && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Adjust Coins
+              </Button>
+            </form>
+          </div>
+        </Form>
+        
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/admin/StatCard.tsx

@@ -0,0 +1,25 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { LucideIcon } from "lucide-react";
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  icon: LucideIcon;
+  description?: string;
+}
+
+export function StatCard({ title, value, icon: Icon, description }: StatCardProps) {
+  return (
+    <Card className="shadow-md hover:shadow-lg transition-shadow">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+        <Icon className="h-5 w-5 text-primary" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold text-foreground">{value}</div>
+        {description && <p className="text-xs text-muted-foreground pt-1">{description}</p>}
+      </CardContent>
+    </Card>
+  );
+}

src/components/auth/AdminLoginForm.tsx

@@ -0,0 +1,107 @@
+
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { AdminLoginSchema, type AdminLoginInput } from "@/lib/schemas";
+import { adminLoginUser } from "@/lib/actions/auth"; 
+import { useToast } from "@/hooks/use-toast";
+import { useState } from "react";
+import { Loader2, ShieldCheck } from "lucide-react";
+// No longer need useRouter for post-login navigation if server action redirects
+
+export function AdminLoginForm() {
+  const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<AdminLoginInput>({
+    resolver: zodResolver(AdminLoginSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  async function onSubmit(values: AdminLoginInput) {
+    setIsLoading(true);
+    try {
+      const result = await adminLoginUser(values); // This action will now redirect on success
+
+      // If the action returns (i.e., did not redirect), it means there was an error.
+      if (result && result.success === false) {
+        toast({
+          title: "Admin Login Failed",
+          description: result.message,
+          variant: "destructive",
+        });
+      }
+      // Successful login will result in a redirect handled by Next.js.
+      // The "Admin Login Successful" toast is removed as the page will change.
+
+    } catch (error: any) {
+      // Server actions that redirect throw a special error that Next.js catches.
+      if (error.message?.includes('NEXT_REDIRECT')) {
+        // This is an expected error during redirect.
+      } else {
+        toast({
+          title: "Error",
+          description: error.message || "An unexpected error occurred. Please try again.",
+          variant: "destructive",
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Admin Email</FormLabel>
+              <FormControl>
+                <Input placeholder="admin@example.com" {...field} type="email" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Admin Password</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="••••••••" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <ShieldCheck className="mr-2 h-4 w-4" />
+          )}
+          Login as Admin
+        </Button>
+      </form>
+    </Form>
+  );
+}

src/components/auth/LoginForm.tsx

@@ -0,0 +1,106 @@
+
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { LoginSchema, type LoginInput } from "@/lib/schemas";
+import { loginUser } from "@/lib/actions/auth";
+import { useToast } from "@/hooks/use-toast";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+// No longer need useRouter for post-login navigation if server action redirects
+
+export function LoginForm() {
+  const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<LoginInput>({
+    resolver: zodResolver(LoginSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  async function onSubmit(values: LoginInput) {
+    setIsLoading(true);
+    try {
+      const result = await loginUser(values); // This action will now redirect on success
+
+      // If the action returns (i.e., did not redirect), it means there was an error.
+      if (result && result.success === false) {
+        toast({
+          title: "Login Failed",
+          description: result.message,
+          variant: "destructive",
+        });
+      }
+      // Successful login will result in a redirect handled by Next.js,
+      // so client-side navigation or refresh is no longer needed here.
+      // The "Login Successful" toast is removed as the page will change.
+
+    } catch (error: any) {
+      // Server actions that redirect throw a special error that Next.js catches.
+      // We should not show this as a user-facing toast.
+      if (error.message?.includes('NEXT_REDIRECT')) {
+        // This is an expected error during redirect, let Next.js handle it.
+        // console.log("Caught NEXT_REDIRECT, letting Next.js handle it.");
+      } else {
+        toast({
+          title: "Error",
+          description: error.message || "An unexpected error occurred. Please try again.",
+          variant: "destructive",
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="you@example.com" {...field} type="email" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="••••••••" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Login
+        </Button>
+      </form>
+    </Form>
+  );
+}

src/components/auth/RegisterForm.tsx

@@ -0,0 +1,144 @@
+
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { RegisterSchema, type RegisterInput } from "@/lib/schemas";
+import { registerUser } from "@/lib/actions/auth";
+import { useToast } from "@/hooks/use-toast";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+
+export function RegisterForm() {
+  const { toast } = useToast();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<RegisterInput>({
+    resolver: zodResolver(RegisterSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+      referralCode: "",
+    },
+  });
+
+  async function onSubmit(values: RegisterInput) {
+    setIsLoading(true);
+    try {
+      const result = await registerUser(values);
+      if (result.success) {
+        toast({
+          title: "Registration Complete!",
+          description: result.message,
+        });
+        router.push('/login');
+      } else {
+        toast({
+          title: "Registration Failed",
+          description: result.message,
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "An unexpected error occurred. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Full Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Your Name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="you@example.com" {...field} type="email" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="••••••••" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="confirmPassword"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Confirm Password</FormLabel>
+              <FormControl>
+                <Input type="password" placeholder="••••••••" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="referralCode"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Referral Code (Optional)</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter referral code" {...field} />
+              </FormControl>
+              <FormDescription>If you were referred by someone, enter their code here.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Create Account
+        </Button>
+      </form>
+    </Form>
+  );
+}

src/components/billing/CoinPurchaseForm.tsx

@@ -0,0 +1,412 @@
+
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, Controller } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { CoinPurchaseSchema, type CoinPurchaseInput, CoinPurchasePackageEnum, PaymentGatewayEnum, SupportedCurrencyEnum } from "@/lib/schemas";
+import type { CoinPackageDetails, CurrencyInfo } from "@/lib/types";
+import { useToast } from "@/hooks/use-toast";
+import { useRouter } from "next/navigation"; 
+import { useState, useEffect } from "react";
+import { Loader2, Coins, CreditCard, ShoppingCart, Lock } from "lucide-react";
+import { usePaystackPayment, PaystackButton, PaystackConsumer } from 'react-paystack';
+import { useFlutterwave, closePaymentModal } from 'flutterwave-react-v3';
+import { initiateCoinPurchase, verifyPaymentAndAwardCoins } from "@/lib/actions/billing"; 
+import { getLoggedInUser, type LoggedInUser } from "@/lib/actions/auth";
+
+const paystackPublicKey = process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY || '';
+const flutterwavePublicKey = process.env.NEXT_PUBLIC_FLUTTERWAVE_PUBLIC_KEY || '';
+
+const COIN_BASE_PRICE_NGN = 10; // 1 Coin = 10 NGN
+
+const coinPackages: CoinPackageDetails[] = [
+  { id: 'small_50', name: "Small Pack", coins: 50, priceNGN: 50 * COIN_BASE_PRICE_NGN, description: "Get started with 50 coins." },
+  { id: 'medium_150', name: "Medium Pack", coins: 150, priceNGN: 150 * COIN_BASE_PRICE_NGN, description: "Most popular: 150 coins." },
+  { id: 'large_300', name: "Large Pack", coins: 300, priceNGN: 300 * COIN_BASE_PRICE_NGN, description: "Best value: 300 coins." },
+];
+
+const currencyRatesList: CurrencyInfo[] = [
+    { code: 'NGN', symbol: '₦', rate: 1, name: 'Nigerian Naira' },
+    { code: 'USD', symbol: '$', rate: 0.00063, name: 'US Dollar' }, 
+    { code: 'GBP', symbol: '£', rate: 0.00050, name: 'British Pound' }, 
+    { code: 'EUR', symbol: '€', rate: 0.00058, name: 'Euro' }, 
+    { code: 'GHS', symbol: 'GH₵', rate: 0.0094, name: 'Ghanaian Cedi' }, 
+    { code: 'KES', symbol: 'KSh', rate: 0.093, name: 'Kenyan Shilling' }, 
+    { code: 'ZAR', symbol: 'R', rate: 0.012, name: 'South African Rand' }, 
+    { code: 'UGX', symbol: 'USh', rate: 2.5, name: 'Ugandan Shilling' },
+    { code: 'TZS', symbol: 'TSh', rate: 1.6, name: 'Tanzanian Shilling' },
+    { code: 'RWF', symbol: 'RF', rate: 0.82, name: 'Rwandan Franc' },
+    { code: 'XOF', symbol: 'CFA', rate: 0.38, name: 'West African CFA franc' }, 
+    { code: 'XAF', symbol: 'FCFA', rate: 0.38, name: 'Central African CFA franc' }, 
+    { code: 'CAD', symbol: 'CA$', rate: 0.00086, name: 'Canadian Dollar' }, 
+    { code: 'EGP', symbol: 'E£', rate: 0.030, name: 'Egyptian Pound' }, 
+    { code: 'GNF', symbol: 'FG', rate: 5.4, name: 'Guinean Franc' },
+    { code: 'MAD', symbol: 'MAD', rate: 0.0063, name: 'Moroccan Dirham' }, 
+    { code: 'MWK', symbol: 'MK', rate: 1.1, name: 'Malawian Kwacha' },
+    { code: 'SLL', symbol: 'Le', rate: 14.0, name: 'Sierra Leonean Leone (New)'}, 
+    { code: 'STD', symbol: 'Db', rate: 14.0, name: 'São Tomé & Príncipe Dobra (New)' }, 
+    { code: 'ZMW', symbol: 'ZK', rate: 0.017, name: 'Zambian Kwacha' }, 
+    { code: 'CLP', symbol: 'CLP$', rate: 0.58, name: 'Chilean Peso' },
+    { code: 'COP', symbol: 'COL$', rate: 2.5, name: 'Colombian Peso' },
+];
+
+
+export function CoinPurchaseForm() {
+  const { toast } = useToast();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser, setCurrentUser] = useState<LoggedInUser | null>(null);
+
+  useEffect(() => {
+    getLoggedInUser().then(setCurrentUser);
+  }, []);
+
+  const form = useForm<CoinPurchaseInput>({
+    resolver: zodResolver(CoinPurchaseSchema),
+    defaultValues: {
+      package: "medium_150",
+      currency: "NGN",
+      paymentGateway: "paystack",
+      email: currentUser?.email || "",
+      name: currentUser?.name || "",
+    },
+  });
+
+  const selectedPackageId = form.watch("package");
+  const selectedCurrencyCode = form.watch("currency");
+
+  const selectedPkg = coinPackages.find(p => p.id === selectedPackageId) || coinPackages[0];
+  const selectedCurrInfo = currencyRatesList.find(c => c.code === selectedCurrencyCode) || currencyRatesList[0];
+  
+  const priceInSelectedCurrency = parseFloat((selectedPkg.priceNGN * selectedCurrInfo.rate).toFixed(2));
+
+  useEffect(() => {
+    form.setValue("amountInSelectedCurrency", priceInSelectedCurrency);
+    form.setValue("amountInNGN", selectedPkg.priceNGN);
+    form.setValue("coinsToCredit", selectedPkg.coins);
+    if (currentUser) {
+      form.setValue("email", currentUser.email);
+      form.setValue("name", currentUser.name);
+    }
+  }, [selectedPkg, priceInSelectedCurrency, form, currentUser]);
+
+
+  const handlePaymentSuccess = async (response: any, gateway: 'paystack' | 'flutterwave') => {
+    console.log(`${gateway} success response:`, response);
+    toast({ title: `${gateway} Payment Submitted (Simulation)`, description: `Ref: ${response.reference || response.transaction_id}. Verifying...` });
+    setIsLoading(true);
+    // SIMULATE webhook verification for now
+    const verificationResult = await verifyPaymentAndAwardCoins(gateway, response.reference || response.transaction_id, response);
+    toast({
+      title: verificationResult.success ? "Purchase Complete!" : "Verification Issue",
+      description: verificationResult.message,
+      variant: verificationResult.success ? "default" : "destructive",
+    });
+    if (verificationResult.success) {
+      router.refresh(); 
+    }
+    setIsLoading(false);
+  };
+
+  const handlePaymentClose = (gateway: 'paystack' | 'flutterwave') => {
+    console.log(`${gateway} payment modal closed.`);
+    toast({ title: "Payment Cancelled", description: "The payment process was cancelled.", variant: "default" });
+    setIsLoading(false);
+  };
+  
+  // Paystack Config
+  const paystackConfig = {
+    reference: new Date().getTime().toString(), 
+    email: form.getValues("email"),
+    amount: priceInSelectedCurrency * 100, // Amount in kobo
+    currency: selectedCurrencyCode,
+    publicKey: paystackPublicKey,
+    metadata: {
+        userId: currentUser?._id,
+        packageName: selectedPkg.name,
+        coins: selectedPkg.coins,
+        custom_fields: [
+            {
+            display_name: "Package",
+            variable_name: "package",
+            value: selectedPkg.name
+            },
+             {
+            display_name: "Coins",
+            variable_name: "coins",
+            value: selectedPkg.coins
+            }
+        ]
+    }
+  };
+
+  // Flutterwave Config
+  const flutterwaveConfig = {
+    public_key: flutterwavePublicKey,
+    tx_ref: new Date().getTime().toString(), 
+    amount: priceInSelectedCurrency,
+    currency: selectedCurrencyCode,
+    payment_options: "card,mobilemoney,ussd",
+    customer: {
+      email: form.getValues("email"),
+      name: form.getValues("name") || "Anita Deploy User",
+    },
+    customizations: {
+      title: "Anita Deploy - Coin Purchase",
+      description: `Payment for ${selectedPkg.coins} coins`,
+      logo: "https://placehold.co/100x100.png?text=AD", 
+    },
+  };
+
+  const initializePaystackPayment = usePaystackPayment(paystackConfig);
+  const handleFlutterwavePayment = useFlutterwave(flutterwaveConfig);
+
+
+  async function onSubmit(values: CoinPurchaseInput) {
+    setIsLoading(true);
+
+    if (!paystackPublicKey || !flutterwavePublicKey) {
+        toast({title: "Configuration Error", description: "Payment gateway keys are not set. Please contact support.", variant: "destructive"});
+        setIsLoading(false);
+        return;
+    }
+
+    if (!currentUser) {
+      toast({title: "Error", description: "User not loaded. Please refresh.", variant: "destructive"});
+      setIsLoading(false);
+      return;
+    }
+    
+    const currentPaystackConfig = {
+        ...paystackConfig,
+        reference: `anitad_${currentUser._id}_${new Date().getTime()}`,
+        email: values.email,
+        amount: values.amountInSelectedCurrency * 100,
+        currency: values.currency,
+         metadata: {
+            userId: currentUser._id,
+            packageName: selectedPkg.name,
+            coins: selectedPkg.coins,
+            transactionType: "coin_purchase",
+            custom_fields: [
+                { display_name: "Package", variable_name: "package", value: selectedPkg.name },
+                { display_name: "Coins", variable_name: "coins", value: selectedPkg.coins }
+            ]
+        }
+    };
+
+    const currentFlutterwaveConfig = {
+        ...flutterwaveConfig,
+        tx_ref: `anitad_${currentUser._id}_${new Date().getTime()}`,
+        amount: values.amountInSelectedCurrency,
+        currency: values.currency,
+        customer: {
+            email: values.email,
+            name: values.name || "Anita Deploy User",
+        },
+        meta: {
+            userId: currentUser._id,
+            packageName: selectedPkg.name,
+            coins: selectedPkg.coins,
+            transactionType: "coin_purchase"
+        }
+    };
+    
+    const initResult = await initiateCoinPurchase({
+        ...values,
+    });
+
+    if (!initResult.success || !initResult.transactionReference) {
+        toast({ title: "Initiation Failed", description: initResult.message, variant: "destructive" });
+        setIsLoading(false);
+        return;
+    }
+
+    currentPaystackConfig.reference = initResult.transactionReference;
+    currentFlutterwaveConfig.tx_ref = initResult.transactionReference;
+
+    if (values.paymentGateway === "paystack") {
+      initializePaystackPayment({
+        onSuccess: (response) => handlePaymentSuccess(response, 'paystack'),
+        onClose: () => handlePaymentClose('paystack'),
+        config: currentPaystackConfig,
+      });
+    } else if (values.paymentGateway === "flutterwave") {
+      handleFlutterwavePayment({
+        callback: (response) => {
+          handlePaymentSuccess(response, 'flutterwave');
+          closePaymentModal(); 
+        },
+        onClose: () => handlePaymentClose('flutterwave'),
+      });
+    }
+  }
+
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        
+        <FormField
+          control={form.control}
+          name="package"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel className="text-lg font-semibold">1. Select Coin Package</FormLabel>
+              <FormControl>
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+                >
+                  {coinPackages.map((pkg) => (
+                    <FormItem key={pkg.id} className="flex-1">
+                      <FormControl>
+                        <RadioGroupItem value={pkg.id} id={pkg.id} className="sr-only" />
+                      </FormControl>
+                      <Label
+                        htmlFor={pkg.id}
+                        className={`flex flex-col items-center justify-between rounded-lg border-2 bg-card p-4 hover:bg-accent hover:text-accent-foreground cursor-pointer transition-all
+                          ${field.value === pkg.id ? "border-primary ring-2 ring-primary shadow-lg" : "border-muted"}`}
+                      >
+                        <div className="flex items-center text-xl font-semibold mb-2">
+                          <Coins className="mr-2 h-6 w-6 text-yellow-500" /> {pkg.coins} Coins
+                        </div>
+                        <p className="text-sm font-bold text-primary">{pkg.name}</p>
+                        <p className="text-xs text-muted-foreground mt-1">{pkg.description}</p>
+                        <p className="text-lg font-semibold mt-3 text-foreground">
+                            {currencyRatesList.find(c => c.code === 'NGN')?.symbol}
+                            {pkg.priceNGN.toLocaleString()}
+                        </p>
+                      </Label>
+                    </FormItem>
+                  ))}
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="currency"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="text-lg font-semibold">2. Select Currency</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger className="w-full md:w-[280px]">
+                    <SelectValue placeholder="Select currency" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {currencyRatesList.map((currency) => (
+                    <SelectItem key={currency.code} value={currency.code}>
+                      {currency.name} ({currency.symbol})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormDescription>
+                The price will be converted to your selected currency.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        
+        <Card className="bg-secondary/50 shadow-md">
+            <CardHeader>
+                <CardTitle className="text-xl">Order Summary</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+                <p className="text-lg">
+                    <span className="font-medium text-muted-foreground">Package:</span> {selectedPkg.name} ({selectedPkg.coins} Coins)
+                </p>
+                <p className="text-2xl font-bold text-primary">
+                    <span className="font-medium text-muted-foreground">Total:</span> {selectedCurrInfo.symbol}
+                    {priceInSelectedCurrency.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                     <span className="text-sm font-normal text-muted-foreground ml-1"> ({selectedCurrencyCode})</span>
+                </p>
+                {selectedCurrencyCode !== 'NGN' && (
+                    <p className="text-sm text-muted-foreground">
+                        (Approx. {currencyRatesList.find(c => c.code === 'NGN')?.symbol}
+                        {selectedPkg.priceNGN.toLocaleString()} NGN)
+                    </p>
+                )}
+            </CardContent>
+        </Card>
+
+
+        <FormField
+          control={form.control}
+          name="paymentGateway"
+          render={({ field }) => (
+            <FormItem className="space-y-3">
+              <FormLabel className="text-lg font-semibold">3. Select Payment Gateway</FormLabel>
+              <FormControl>
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="flex flex-col sm:flex-row gap-4"
+                >
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <RadioGroupItem value="paystack" id="paystack" className="sr-only" />
+                    </FormControl>
+                    <Label htmlFor="paystack" className={`flex items-center justify-center rounded-lg border-2 p-4 hover:bg-accent hover:text-accent-foreground cursor-pointer ${field.value === "paystack" ? "border-primary ring-2 ring-primary" : "border-muted"}`}>
+                      <img src="https://assets.paystack.com/assets/img/logos/paystack-logo-vector-deep-blue.svg" alt="Paystack" className="h-7" data-ai-hint="paystack logo"/>
+                    </Label>
+                  </FormItem>
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <RadioGroupItem value="flutterwave" id="flutterwave" className="sr-only" />
+                    </FormControl>
+                    <Label htmlFor="flutterwave" className={`flex items-center justify-center rounded-lg border-2 p-4 hover:bg-accent hover:text-accent-foreground cursor-pointer ${field.value === "flutterwave" ? "border-primary ring-2 ring-primary" : "border-muted"}`}>
+                       <img src="https://flutterwave.com/images/logo-colored.svg" alt="Flutterwave" className="h-7" data-ai-hint="flutterwave logo"/>
+                    </Label>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+
+        <Button type="submit" size="lg" className="w-full text-base py-6" disabled={isLoading}>
+          {isLoading ? (
+            <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+          ) : (
+            <ShoppingCart className="mr-2 h-5 w-5" />
+          )}
+          Proceed to Payment
+        </Button>
+        <p className="text-xs text-muted-foreground text-center flex items-center justify-center">
+            <Lock className="h-3 w-3 mr-1.5"/> Secure payment processing by Paystack & Flutterwave.
+        </p>
+      </form>
+    </Form>
+  );
+}
+

src/components/deployment/AiLogAnalyzer.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { analyzeDeploymentLogs } from "@/lib/actions/deployment"; // Server Action
+import { Loader2, Sparkles, Lightbulb } from "lucide-react";
+import { ScrollArea } from "../ui/scroll-area";
+
+interface AiLogAnalyzerProps {
+  initialLogs?: string;
+}
+
+export function AiLogAnalyzer({ initialLogs = "" }: AiLogAnalyzerProps) {
+  const [logsToAnalyze, setLogsToAnalyze] = useState(initialLogs);
+  const [analysisResult, setAnalysisResult] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleAnalyze = async () => {
+    if (!logsToAnalyze.trim()) {
+      setError("Please paste some logs to analyze.");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    setAnalysisResult(null);
+
+    try {
+      const result = await analyzeDeploymentLogs(logsToAnalyze);
+      if (result.success && result.analysis) {
+        setAnalysisResult(result.analysis);
+      } else {
+        setError(result.error || "Failed to get analysis.");
+      }
+    } catch (e) {
+      setError("An unexpected error occurred during analysis.");
+      console.error(e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="shadow-md">
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          <Sparkles className="mr-2 h-5 w-5 text-accent" />
+          AI Log Analyzer
+        </CardTitle>
+        <CardDescription>
+          Paste your deployment logs below and let AI help you find issues and suggest fixes.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <Textarea
+          placeholder="Paste your deployment logs here..."
+          value={logsToAnalyze}
+          onChange={(e) => setLogsToAnalyze(e.target.value)}
+          rows={10}
+          className="font-mono text-xs"
+        />
+        <Button onClick={handleAnalyze} disabled={isLoading || !logsToAnalyze.trim()} className="w-full sm:w-auto">
+          {isLoading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Analyzing...
+            </>
+          ) : (
+            <>
+              <Lightbulb className="mr-2 h-4 w-4" /> Analyze Logs
+            </>
+          )}
+        </Button>
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {analysisResult && (
+          <Card className="bg-secondary/50">
+            <CardHeader>
+              <CardTitle className="flex items-center text-lg">
+                <Lightbulb className="mr-2 h-5 w-5 text-primary" />
+                Analysis Result
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ScrollArea className="h-[300px] w-full rounded-md p-1">
+                <pre className="whitespace-pre-wrap text-sm text-foreground/90">{analysisResult}</pre>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

src/components/deployment/DeploymentCard.tsx

@@ -0,0 +1,95 @@
+import Link from 'next/link';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import type { Deployment, DeploymentStatus } from '@/lib/types';
+import { ExternalLink, Zap, AlertTriangle, CheckCircle2, Hourglass, PowerOff, Layers } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DeploymentCardProps {
+  deployment: Deployment;
+}
+
+function getStatusBadgeVariant(status: DeploymentStatus) {
+  switch (status) {
+    case 'succeeded':
+      return 'default'; 
+    case 'deploying':
+      return 'secondary';
+    case 'pending':
+      return 'outline';
+    case 'failed':
+      return 'destructive';
+    case 'stopped':
+      return 'outline'; 
+    default:
+      return 'outline';
+  }
+}
+
+function getStatusIcon(status: DeploymentStatus) {
+  switch (status) {
+    case 'succeeded':
+      return <CheckCircle2 className="h-5 w-5 text-green-500" />;
+    case 'deploying':
+      return <Hourglass className="h-5 w-5 text-blue-500 animate-spin" />;
+    case 'pending':
+      return <Hourglass className="h-5 w-5 text-yellow-500" />;
+    case 'failed':
+      return <AlertTriangle className="h-5 w-5 text-red-500" />;
+    case 'stopped':
+        return <PowerOff className="h-5 w-5 text-gray-500" />;
+    default:
+      return <Zap className="h-5 w-5 text-muted-foreground" />;
+  }
+}
+
+
+export function DeploymentCard({ deployment }: DeploymentCardProps) {
+  return (
+    <Card className="flex flex-col h-full shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out">
+      <CardHeader className="pb-3">
+        <div className="flex justify-between items-start gap-2">
+          <div className="flex-1">
+            <CardTitle className="text-xl font-semibold text-primary flex items-center">
+              <Layers className="mr-2.5 h-5 w-5" />
+              {deployment.appName}
+            </CardTitle>
+            <CardDescription className="text-xs mt-1">Deployed: {new Date(deployment.createdAt).toLocaleDateString()}</CardDescription>
+          </div>
+          <Badge variant={getStatusBadgeVariant(deployment.status)} className="capitalize flex items-center gap-1.5 px-3 py-1 text-xs shadow-sm">
+            {getStatusIcon(deployment.status)}
+            <span>{deployment.status}</span>
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3 flex-grow">
+        <p className="text-sm text-muted-foreground">
+          Region: <span className="font-medium text-foreground">{deployment.region || 'N/A'}</span>
+        </p>
+        {deployment.lastDeployedAt && (
+             <p className="text-sm text-muted-foreground">
+                Last Activity: <span className="font-medium text-foreground">{new Date(deployment.lastDeployedAt).toLocaleDateString()}</span>
+            </p>
+        )}
+        {deployment.url && (
+          <div className="mt-2">
+            <a
+              href={deployment.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-accent hover:underline flex items-center font-medium"
+            >
+              Visit App <ExternalLink className="ml-1.5 h-4 w-4" />
+            </a>
+          </div>
+        )}
+      </CardContent>
+      <CardFooter className="flex justify-end pt-4 border-t mt-auto">
+        <Button asChild variant="outline" size="sm" className="shadow-sm hover:shadow-md">
+          <Link href={`/dashboard/deployments/${deployment.id}`}>Manage</Link>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}