admin/estimation-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

404 on /admin

Browse Source
This commit is contained in:
Leon Serfaty G
2025-07-18 02:59:11 +00:00
parent c714cd6c5d
commit 0da13bce65
7 changed files with 669 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/embed/page.tsx
+73
View File
@@ -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>
);
}
src/app/admin/layout.tsx
+103
View File
@@ -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;
src/app/admin/page.tsx
+53
View File
@@ -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>
);
}
src/app/admin/settings/general/page.tsx
+109
View File
@@ -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>
);
}
src/app/admin/settings/user/page.tsx
+180
View File
@@ -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>
);
}
src/app/api/settings/hourly_rate/route.ts
+38
View File
@@ -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 });
}
}
src/app/login/page.tsx
+113
View File
@@ -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>
);
}