From 0da13bce6533a5c1a3e01f2c67bebcbbce475bda Mon Sep 17 00:00:00 2001
From: Leon Serfaty G <serfowi@gmail.com>
Date: Fri, 18 Jul 2025 02:59:11 +0000
Subject: [PATCH] 404 on /admin

---
 src/app/admin/embed/page.tsx              |  73 +++++++++
 src/app/admin/layout.tsx                  | 103 +++++++++++++
 src/app/admin/page.tsx                    |  53 +++++++
 src/app/admin/settings/general/page.tsx   | 109 +++++++++++++
 src/app/admin/settings/user/page.tsx      | 180 ++++++++++++++++++++++
 src/app/api/settings/hourly_rate/route.ts |  38 +++++
 src/app/login/page.tsx                    | 113 ++++++++++++++
 7 files changed, 669 insertions(+)
 create mode 100644 src/app/admin/embed/page.tsx
 create mode 100644 src/app/admin/layout.tsx
 create mode 100644 src/app/admin/page.tsx
 create mode 100644 src/app/admin/settings/general/page.tsx
 create mode 100644 src/app/admin/settings/user/page.tsx
 create mode 100644 src/app/api/settings/hourly_rate/route.ts
 create mode 100644 src/app/login/page.tsx

diff --git a/src/app/admin/embed/page.tsx b/src/app/admin/embed/page.tsx
new file mode 100644
index 0000000..0b531e5
--- /dev/null
+++ b/src/app/admin/embed/page.tsx
@@ -0,0 +1,73 @@
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/hooks/use-toast';
+import { Copy } from 'lucide-react';
+
+export default function EmbedPage() {
+  const [embedCode, setEmbedCode] = useState('');
+  const [origin, setOrigin] = useState('');
+  const { toast } = useToast();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setOrigin(window.location.origin);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (origin) {
+      const code = `<iframe
+  src="${origin}"
+  style="width:100%;height:100vh;border:none;"
+  title="EstimateFlow"
+></iframe>`;
+      setEmbedCode(code);
+    }
+  }, [origin]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(embedCode);
+    toast({
+      title: 'Copied!',
+      description: 'The embed code has been copied to your clipboard.',
+    });
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Embed</h1>
+          <p className="mt-2 text-muted-foreground">
+            Copy the code below to embed the estimator on your website.
+          </p>
+        </div>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Embed Code</CardTitle>
+          <CardDescription>
+            Paste this HTML code into your website's source where you want the estimator to appear.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Textarea
+            readOnly
+            value={embedCode}
+            className="h-48 font-mono bg-muted"
+            aria-label="Embed code"
+          />
+          <Button onClick={handleCopy}>
+            <Copy className="mr-2 h-4 w-4" />
+            Copy Code
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
new file mode 100644
index 0000000..814b129
--- /dev/null
+++ b/src/app/admin/layout.tsx
@@ -0,0 +1,103 @@
+
+"use client"
+
+import * as React from "react";
+import Link from 'next/link';
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarFooter,
+  SidebarContent,
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import {
+  Home,
+  User,
+  Settings,
+  LogOut,
+  Code2
+} from "lucide-react"
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarHeader>
+            <div className="flex items-center gap-2">
+              <h1 className="font-headline text-2xl font-bold">EstimateFlow</h1>
+            </div>
+          </SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <Link href="/admin">
+                <SidebarMenuButton tooltip="Dashboard" isActive={true}>
+                  <Home />
+                  <span>Dashboard</span>
+                </SidebarMenuButton>
+              </Link>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <Link href="/admin/embed">
+                <SidebarMenuButton tooltip="Embed">
+                  <Code2 />
+                  <span>Embed</span>
+                </SidebarMenuButton>
+              </Link>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+               <Link href="/admin/settings/user">
+                  <SidebarMenuButton tooltip="My Account">
+                    <User />
+                    <span>My Account</span>
+                  </SidebarMenuButton>
+                </Link>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <Link href="/admin/settings/general">
+                <SidebarMenuButton tooltip="General Settings">
+                  <Settings />
+                  <span>Settings</span>
+                </SidebarMenuButton>
+              </Link>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarContent>
+        <SidebarFooter>
+          <SidebarMenu>
+             <SidebarMenuItem>
+                <form action={async () => {
+                  'use server';
+                  console.log('logout not implemented');
+                }}>
+                  <SidebarMenuButton tooltip="Logout">
+                    <LogOut />
+                    <span>Logout</span>
+                  </SidebarMenuButton>
+                </form>
+              </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <div className="p-4 sm:p-6 lg:p-8">
+            {children}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+export default AdminLayout;
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
new file mode 100644
index 0000000..b2db8b6
--- /dev/null
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,53 @@
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { DollarSign, Users, Activity } from 'lucide-react';
+
+export default function AdminDashboard() {
+  return (
+    <div className="space-y-8">
+      <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Total Revenue
+            </CardTitle>
+            <DollarSign className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">$45,231.89</div>
+            <p className="text-xs text-muted-foreground">
+              +20.1% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Subscriptions
+            </CardTitle>
+            <Users className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">+2350</div>
+            <p className="text-xs text-muted-foreground">
+              +180.1% from last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Active Now</CardTitle>
+            <Activity className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">+573</div>
+            <p className="text-xs text-muted-foreground">
+              +201 since last hour
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/settings/general/page.tsx b/src/app/admin/settings/general/page.tsx
new file mode 100644
index 0000000..8b57159
--- /dev/null
+++ b/src/app/admin/settings/general/page.tsx
@@ -0,0 +1,109 @@
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/hooks/use-toast';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+
+// Mock server actions
+async function getHourlyRate(): Promise<string> {
+  console.log('Fetching hourly rate...');
+  const response = await fetch('/api/settings/hourly_rate');
+  if (!response.ok) {
+    throw new Error('Failed to fetch hourly rate');
+  }
+  const data = await response.json();
+  return data.value;
+}
+
+async function updateHourlyRate(rate: string): Promise<{ success: boolean; message: string }> {
+  console.log(`Updating hourly rate to: ${rate}`);
+   const response = await fetch('/api/settings/hourly_rate', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ value: rate }),
+  });
+  if (!response.ok) {
+    const errorData = await response.json();
+    return { success: false, message: errorData.message || 'Failed to update hourly rate' };
+  }
+  return { success: true, message: 'Hourly rate updated successfully' };
+}
+
+
+export default function GeneralSettingsPage() {
+  const [hourlyRate, setHourlyRate] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    async function fetchRate() {
+      try {
+        const rate = await getHourlyRate();
+        setHourlyRate(rate);
+      } catch (error) {
+        console.error(error);
+        toast({
+          variant: 'destructive',
+          title: 'Error',
+          description: 'Could not load hourly rate.',
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchRate();
+  }, [toast]);
+
+  const handleSave = async () => {
+    try {
+      const result = await updateHourlyRate(hourlyRate);
+      if (result.success) {
+        toast({
+          title: 'Success',
+          description: result.message,
+        });
+      } else {
+        throw new Error(result.message);
+      }
+    } catch (error: any) {
+      toast({
+        variant: 'destructive',
+        title: 'Error',
+        description: error.message || 'Failed to save settings.',
+      });
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">General Settings</h1>
+        <p className="mt-2 text-muted-foreground">Manage your application settings.</p>
+      </div>
+      <Card>
+        <CardHeader>
+            <CardTitle>Hourly Rate</CardTitle>
+            <CardDescription>Set the hourly rate used in project estimations.</CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div className="grid w-full max-w-sm items-center gap-2">
+            <Label htmlFor="hourly-rate">Hourly Rate ($)</Label>
+            <Input
+                id="hourly-rate"
+                type="number"
+                value={hourlyRate}
+                onChange={(e) => setHourlyRate(e.target.value)}
+                placeholder="Enter hourly rate"
+                disabled={isLoading}
+            />
+            </div>
+        </CardContent>
+      </Card>
+      <Button onClick={handleSave} disabled={isLoading}>Save Changes</Button>
+    </div>
+  );
+}
diff --git a/src/app/admin/settings/user/page.tsx b/src/app/admin/settings/user/page.tsx
new file mode 100644
index 0000000..052b47e
--- /dev/null
+++ b/src/app/admin/settings/user/page.tsx
@@ -0,0 +1,180 @@
+
+'use client';
+
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/hooks/use-toast';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email address'),
+  password: z.string().optional(),
+});
+
+type UserFormValues = z.infer<typeof formSchema>;
+
+// Mock server actions
+async function getUser() {
+  console.log("Mocking getUser");
+  return { id: '1', name: 'Admin User', email: 'admin@example.com' };
+}
+
+async function updateUser(data: UserFormValues) {
+  console.log("Mocking updateUser with data:", data);
+  // Simulate API call
+  return new Promise<{ success: boolean; message: string }>((resolve) => {
+    setTimeout(() => {
+      if (data.email.includes('fail')) {
+        resolve({ success: false, message: 'This email is already taken.' });
+      } else {
+        resolve({ success: true, message: 'Profile updated successfully!' });
+      }
+    }, 1000);
+  });
+}
+
+
+export default function UserProfilePage() {
+  const { toast } = useToast();
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+    },
+  });
+
+  useEffect(() => {
+    async function loadUserProfile() {
+      try {
+        const user = await getUser();
+        if (user) {
+          form.reset({
+            name: user.name,
+            email: user.email,
+            password: '',
+          });
+        }
+      } catch (error) {
+        toast({
+          variant: 'destructive',
+          title: 'Error',
+          description: 'Could not load user profile.',
+        });
+      }
+    }
+    loadUserProfile();
+  }, [form, toast]);
+
+  const onSubmit = async (data: UserFormValues) => {
+    try {
+      const result = await updateUser(data);
+      if (result.success) {
+        toast({
+          title: 'Success',
+          description: result.message,
+        });
+        form.reset({ ...data, password: '' });
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Update failed',
+          description: result.message,
+        });
+      }
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Error',
+        description: 'An unexpected error occurred.',
+      });
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">My Account</h1>
+        <p className="mt-2 text-muted-foreground">Update your profile information.</p>
+      </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile</CardTitle>
+              <CardDescription>This is how others will see you on the site.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>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 type="email" placeholder="Your Email" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Change Password</CardTitle>
+              <CardDescription>Leave this blank if you do not want to change your password.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>New Password</FormLabel>
+                    <FormControl>
+                      <Input type="password" placeholder="New Password" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </CardContent>
+          </Card>
+          
+          <Button type="submit" disabled={form.formState.isSubmitting}>
+            {form.formState.isSubmitting ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/src/app/api/settings/hourly_rate/route.ts b/src/app/api/settings/hourly_rate/route.ts
new file mode 100644
index 0000000..ac8d4a1
--- /dev/null
+++ b/src/app/api/settings/hourly_rate/route.ts
@@ -0,0 +1,38 @@
+
+import { NextRequest, NextResponse } from 'next/server';
+import db from '@/lib/db';
+
+export async function GET(req: NextRequest) {
+  try {
+    const stmt = db.prepare('SELECT value FROM settings WHERE key = ?');
+    const setting = stmt.get('hourly_rate') as { value: string } | undefined;
+    
+    if (!setting) {
+      // If not set, return a default or handle as an error
+      return NextResponse.json({ value: '100' });
+    }
+    
+    return NextResponse.json({ value: setting.value });
+  } catch (error) {
+    console.error('Failed to get hourly rate:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { value } = await req.json();
+
+    if (typeof value !== 'string' || isNaN(parseFloat(value))) {
+        return NextResponse.json({ message: 'Invalid hourly rate value' }, { status: 400 });
+    }
+    
+    const stmt = db.prepare('INSERT OR REPLACE INTO settings (key, value) VALUES (?, ?)');
+    stmt.run('hourly_rate', value);
+    
+    return NextResponse.json({ message: 'Hourly rate updated successfully' });
+  } catch (error) {
+    console.error('Failed to update hourly rate:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..718351a
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,113 @@
+
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/hooks/use-toast';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useRouter } from 'next/navigation';
+
+const loginSchema = z.object({
+  email: z.string().email({ message: 'Invalid email address.' }),
+  password: z.string().min(1, { message: 'Password is required.' }),
+});
+
+type LoginFormValues = z.infer<typeof loginSchema>;
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+  });
+
+  const onSubmit = async (data: LoginFormValues) => {
+    try {
+      // This is a mock login. In a real app, you'd call an authentication service.
+      console.log('Attempting to log in with:', data.email);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      if (data.email === 'admin@example.com' && data.password === 'password') {
+        toast({
+          title: 'Login Successful',
+          description: 'Redirecting to your dashboard...',
+        });
+        router.push('/admin');
+      } else {
+        throw new Error('Invalid email or password.');
+      }
+    } catch (error: any) {
+      toast({
+        variant: 'destructive',
+        title: 'Login Failed',
+        description: error.message || 'An unexpected error occurred.',
+      });
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
+      <Card className="w-full max-w-sm">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold tracking-tight">
+            EstimateFlow Admin
+          </CardTitle>
+          <CardDescription>
+            Welcome back! Please sign in to continue.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="admin@example.com"
+                {...register('email')}
+              />
+              {errors.email && (
+                <p className="text-sm text-destructive">{errors.email.message}</p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="password"
+                {...register('password')}
+              />
+              {errors.password && (
+                <p className="text-sm text-destructive">
+                  {errors.password.message}
+                </p>
+              )}
+            </div>
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting ? 'Signing In...' : 'Sign In'}
+            </Button>
+          </form>
+        </CardContent>
+        <CardFooter>
+            <p className="text-xs text-center w-full text-muted-foreground">Use admin@example.com and 'password' to sign in.</p>
+        </CardFooter>
+      </Card>
+    </main>
+  );
+}