[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match IT company design brief with emerald green theme */ --background: oklch(1 0 0); --foreground: oklch(0.35 0 0); --card: oklch(0.97 0 0); --card-foreground: oklch(0.35 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.35 0 0); --primary: oklch(0.45 0.15 160); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.55 0.12 160); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.35 0 0); --accent: oklch(0.55 0.12 160); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.85 0 0); --input: oklch(0.97 0 0); --ring: oklch(0.45 0.15 160 / 0.5); --chart-1: oklch(0.45 0.15 160); --chart-2: oklch(0.55 0.12 160); --chart-3: oklch(0.4 0 0); --chart-4: oklch(0.98 0 0); --chart-5: oklch(1 0 0); --radius: 0.5rem; --sidebar: oklch(0.97 0 0); --sidebar-foreground: oklch(0.35 0 0); --sidebar-primary: oklch(0.45 0.15 160); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.55 0.12 160); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.85 0 0); --sidebar-ring: oklch(0.45 0.15 160 / 0.5); --font-dm-sans: "DM Sans", sans-serif; --font-space-grotesk: "Space Grotesk", sans-serif; } .dark { /* Updated dark mode tokens to maintain emerald theme consistency */ --background: oklch(0.08 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.08 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.55 0.12 160); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.55 0.12 160); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.55 0.12 160 / 0.5); --chart-1: oklch(0.55 0.12 160); --chart-2: oklch(0.65 0.1 160); --chart-3: oklch(0.7 0 0); --chart-4: oklch(0.2 0 0); --chart-5: oklch(0.12 0 0); --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.55 0.12 160); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.55 0.12 160 / 0.5); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Added font family mappings for Space Grotesk and DM Sans */ --font-sans: var(--font-dm-sans); --font-heading: var(--font-space-grotesk); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Added heading font utility class */ .font-heading { font-family: var(--font-heading); } } [V0_FILE]png:file="public/images/omgeaks-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Aug%2023%2C%202025%2C%2008_56_14%20PM-nzcHbvzzF7Yt1B3LMtCLKSDl2pYMYi.png" isMerged="true" [V0_FILE]typescriptreact:file="components/user-dashboard.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { User } from "@/lib/auth" import { LogOut, UserIcon, FolderOpen, MessageSquare, Plus, MessageCircleMore } from "lucide-react" import { ProjectManagement } from "@/components/project-management" interface UserDashboardProps { user: User onLogout: () => void } export function UserDashboard({ user, onLogout }: UserDashboardProps) { const [userSubmissions, setUserSubmissions] = useState([]) const [userProjects, setUserProjects] = useState([]) const [hasStartedProject, setHasStartedProject] = useState(false) useEffect(() => { loadUserData() }, [user.email]) const loadUserData = () => { // Load user's form submissions const stored = localStorage.getItem("omgeaks-submissions") const allSubmissions = stored ? JSON.parse(stored) : [] const filtered = allSubmissions.filter((sub: any) => sub.email === user.email) setUserSubmissions(filtered) // Load user's projects const projectsStored = localStorage.getItem("omgeaks-projects") const allProjects = projectsStored ? JSON.parse(projectsStored) : [] const userProjectsFiltered = allProjects.filter( (p: any) => p.clientEmail === user.email || p.assignedTo === user.email, ) setUserProjects(userProjectsFiltered) // Check if user has started any project setHasStartedProject(userProjectsFiltered.length > 0) } const connectWithAdmin = () => { // Create a direct connection request const connectionRequest = { id: Date.now().toString(), type: "direct_connection", userId: user.id, userName: user.name, userEmail: user.email, message: "User requested direct connection with admin", timestamp: new Date().toISOString(), status: "pending", } // Store in notifications for admin const notifications = localStorage.getItem("omgeaks-notifications") || "[]" const notificationList = JSON.parse(notifications) notificationList.push({ id: Date.now().toString(), type: "connection_request", title: "Direct Connection Request", message: `${user.name} (${user.email}) wants to connect directly`, timestamp: new Date().toISOString(), read: false, data: connectionRequest, }) localStorage.setItem("omgeaks-notifications", JSON.stringify(notificationList)) alert("Connection request sent! Admin will contact you soon.") } return (

OMGEAKS Dashboard

{user.name} User

Welcome back, {user.name}!

{hasStartedProject ? "Here's an overview of your projects and activity." : "Get started by connecting with our team or exploring our services."}

{!hasStartedProject && ( Ready to Start Your Project? Connect with our team directly or start a new project to unlock your full dashboard experience. )} Overview Projects Inquiries {hasStartedProject ? (

{/* Projects Summary */} Your Projects Quick overview of your active projects {userProjects.length === 0 ? (

No projects yet

) : (

{userProjects.slice(0, 3).map((project) => (

{project.name}

{project.status.replace("-", " ")}

Started: {new Date(project.startDate).toLocaleDateString()}

))} {userProjects.length > 3 && (

+{userProjects.length - 3} more projects

)}

)} {/* Recent Inquiries */} Recent Inquiries Your latest contact form submissions {userSubmissions.length === 0 ? (

No inquiries yet

) : (

{userSubmissions.slice(0, 2).map((submission, index) => (

Inquiry #{index + 1}

{submission.timestamp}

{submission.message}

))}

)}

) : (

Welcome to OMGEAKS!

You haven't started any projects yet. Connect with our team to begin your journey with us.

)} Your Inquiries All your contact form submissions and inquiries {userSubmissions.length === 0 ? (

No inquiries yet

) : (

{userSubmissions.map((submission, index) => (

Inquiry #{index + 1}

{submission.timestamp}

{submission.company && (

Company: {submission.company}

)}

{submission.message}

))}

)}

) } [V0_FILE]typescriptreact:file="components/admin-dashboard.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { type User, AuthService } from "@/lib/auth" import { ProjectManagement } from "@/components/project-management" import { LogOut, Users, MessageSquare, FolderOpen, Trash2, Shield, Bell, MessageCircleMore, UserPlus, CheckCircle, } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface AdminDashboardProps { user: User onLogout: () => void } export function AdminDashboard({ user, onLogout }: AdminDashboardProps) { const [allSubmissions, setAllSubmissions] = useState([]) const [allUsers, setAllUsers] = useState([]) const [chatSessions, setChatSessions] = useState([]) const [notifications, setNotifications] = useState([]) const [projects, setProjects] = useState([]) const [showAddUserModal, setShowAddUserModal] = useState(false) const [showNotificationModal, setShowNotificationModal] = useState(false) const [selectedNotification, setSelectedNotification] = useState(null) const { toast } = useToast() useEffect(() => { loadData() }, []) const loadData = () => { // Load all submissions const stored = localStorage.getItem("omgeaks-submissions") const submissions = stored ? JSON.parse(stored) : [] setAllSubmissions(submissions) // Load all users const users = AuthService.getUsers() setAllUsers(users) // Load chat sessions const chatStored = localStorage.getItem("omgeaks-chat-sessions") const sessions = chatStored ? JSON.parse(chatStored) : [] setChatSessions(sessions) // Load notifications const notifStored = localStorage.getItem("omgeaks-notifications") const notifs = notifStored ? JSON.parse(notifStored) : [] setNotifications(notifs) // Load projects const projectsStored = localStorage.getItem("omgeaks-projects") const allProjects = projectsStored ? JSON.parse(projectsStored) : [] setProjects(allProjects) } const clearAllSubmissions = () => { localStorage.removeItem("omgeaks-submissions") setAllSubmissions([]) toast({ title: "All submissions cleared", description: "All contact form submissions have been deleted.", }) } const deleteUser = (userId: string) => { if (userId === user.id) { toast({ title: "Cannot delete yourself", description: "You cannot delete your own admin account.", variant: "destructive", }) return } const users = AuthService.getUsers() const filteredUsers = users.filter((u: User) => u.id !== userId) localStorage.setItem("omgeaks_users", JSON.stringify(filteredUsers)) setAllUsers(filteredUsers) toast({ title: "User deleted", description: "User has been successfully removed from the system.", }) } const addUser = (userData: { name: string; email: string; password: string; role: string }) => { const existingUsers = AuthService.getUsers() const userExists = existingUsers.some((u: User) => u.email === userData.email) if (userExists) { toast({ title: "User already exists", description: "A user with this email already exists.", variant: "destructive", }) return } const newUser: User = { id: Date.now().toString(), name: userData.name, email: userData.email, password: userData.password, // In real app, this should be hashed role: userData.role as "admin" | "user", createdAt: new Date().toISOString(), } existingUsers.push(newUser) localStorage.setItem("omgeaks_users", JSON.stringify(existingUsers)) setAllUsers(existingUsers) setShowAddUserModal(false) toast({ title: "User added successfully", description: `${userData.name} has been added to the system.`, }) } const markNotificationAsRead = (notificationId: string) => { const updatedNotifications = notifications.map((notif) => notif.id === notificationId ? { ...notif, read: true } : notif, ) setNotifications(updatedNotifications) localStorage.setItem("omgeaks-notifications", JSON.stringify(updatedNotifications)) } const deleteNotification = (notificationId: string) => { const filteredNotifications = notifications.filter((notif) => notif.id !== notificationId) setNotifications(filteredNotifications) localStorage.setItem("omgeaks-notifications", JSON.stringify(filteredNotifications)) } const unreadNotifications = notifications.filter((notif) => !notif.read).length const AddUserForm = () => { const [formData, setFormData] = useState({ name: "", email: "", password: "", role: "user", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() addUser(formData) setFormData({ name: "", email: "", password: "", role: "user" }) } return ( ) } return (

OMGEAKS Admin Panel

{user.name} Super Admin

Admin Dashboard

Manage all users, projects, inquiries, and system notifications.

{/* Stats Cards */}

Total Users

{allUsers.length}

Total Inquiries

{allSubmissions.length}

Active Projects

{projects.filter((p) => p.status === "in-progress").length}

Chat Sessions

{chatSessions.length}

Notifications

{unreadNotifications}

Overview Projects Users Inquiries AI Chats Notifications

{/* Recent Inquiries */}

Recent Inquiries Latest contact form submissions

{allSubmissions.length === 0 ? (

No inquiries yet

) : (

{allSubmissions.slice(0, 5).map((submission, index) => (

{submission.name}

{submission.timestamp}

Email: {submission.email}

{submission.message}

))}

)} {/* Recent Projects */} Recent Projects Latest project activities

{projects.slice(0, 5).map((project) => (

{project.name}

{project.status.replace("-", " ")}

Client: {project.client}

))}

User Management Add, edit, or remove users from the system

{allUsers.length === 0 ? (

No users registered yet

) : (

{allUsers.map((u) => (

{u.name}

{u.email}

Joined: {new Date(u.createdAt).toLocaleDateString()}

{u.role === "admin" ? "Admin" : "User"} {u.id !== user.id && ( )}

))}

)}

All Inquiries Contact form submissions from all users

{allSubmissions.length === 0 ? (

No inquiries yet

) : (

{allSubmissions.map((submission, index) => (

{submission.name}

{submission.timestamp}

Email: {submission.email}

{submission.company && (

Company: {submission.company}

)}

{submission.message}

))}

)} AI Chat Sessions All completed AI chatbot consultations {chatSessions.length === 0 ? (

No chat sessions yet

) : (

{chatSessions.map((session) => (

{session.userInfo.name || "Anonymous"}

{new Date(session.createdAt).toLocaleString()}

Email: {session.userInfo.email}

Company: {session.userInfo.company || "N/A"}

Project Type: {session.userInfo.projectType}

Budget: {session.userInfo.budget}

Timeline: {session.userInfo.timeline}

Messages: {session.messages.length}

{session.userInfo.requirements && (

Requirements: {session.userInfo.requirements}

)}

))}

)} System Notifications All system notifications and alerts {notifications.length === 0 ? (

No notifications yet

) : (

{notifications.map((notification) => (

{!notification.read &&
} {notification.title}

{new Date(notification.timestamp).toLocaleString()} {!notification.read && ( )}

{notification.message}

))}

)}

{/* Notifications Modal */}

) } [V0_FILE]typescriptreact:file="hooks/use-auto-logout.ts" isMerged="true" "use client" import { useEffect, useRef } from "react" export function useAutoLogout(onLogout: () => void, timeoutMinutes = 1) { const timeoutRef = useRef() const lastActivityRef = useRef(Date.now()) const resetTimeout = () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) } lastActivityRef.current = Date.now() timeoutRef.current = setTimeout( () => { onLogout() }, timeoutMinutes * 60 * 1000, ) // Convert minutes to milliseconds } useEffect(() => { const events = ["mousedown", "mousemove", "keypress", "scroll", "touchstart", "click"] const handleActivity = () => { resetTimeout() } // Set initial timeout resetTimeout() // Add event listeners events.forEach((event) => { document.addEventListener(event, handleActivity, true) }) // Cleanup return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) } events.forEach((event) => { document.removeEventListener(event, handleActivity, true) }) } }, [onLogout, timeoutMinutes]) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive border-destructive/50 bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/auth-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { useToast } from "@/hooks/use-toast" import { AuthService } from "@/lib/auth" import { X } from "lucide-react" interface AuthModalProps { isOpen: boolean onClose: () => void onAuthSuccess: (user: any) => void } export function AuthModal({ isOpen, onClose, onAuthSuccess }: AuthModalProps) { const [isLogin, setIsLogin] = useState(true) const [loading, setLoading] = useState(false) const { toast } = useToast() if (!isOpen) return null const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) const formData = new FormData(e.currentTarget) const email = formData.get("email") as string const password = formData.get("password") as string const name = formData.get("name") as string try { const result = isLogin ? await AuthService.login(email, password) : await AuthService.register(email, password, name) if (result.success && result.user) { toast({ title: isLogin ? "Login successful!" : "Registration successful!", description: `Welcome ${result.user.name}!`, }) onAuthSuccess(result.user) onClose() } else { toast({ title: "Error", description: result.error || "Something went wrong", variant: "destructive", }) } } catch (error) { toast({ title: "Error", description: "Something went wrong", variant: "destructive", }) } finally { setLoading(false) } } return (

{isLogin ? "Login" : "Register"} {isLogin ? "Welcome back to OMGEAKS" : "Create your OMGEAKS account"}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Space_Grotesk, DM_Sans } from "next/font/google" import "./globals.css" import { Toaster } from "@/components/ui/toaster" const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], display: "swap", variable: "--font-space-grotesk", }) const dmSans = DM_Sans({ subsets: ["latin"], display: "swap", variable: "--font-dm-sans", }) export const metadata: Metadata = { title: "OMGEAKS - Software & Web Development Solutions", description: "Professional IT company providing custom software development and web solutions for businesses of all sizes. Transform your business with OMGEAKS innovative technology solutions.", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="hooks/use-toast.ts" isMerged="true" "use client" import * as React from "react" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 5000 type ToasterToast = { id: string title?: React.ReactNode description?: React.ReactNode action?: React.ReactElement variant?: "default" | "destructive" className?: string duration?: number } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useState, useEffect } from "react" import { AuthModal } from "@/components/auth-modal" import { UserDashboard } from "@/components/user-dashboard" import { AdminDashboard } from "@/components/admin-dashboard" import { AuthService, type User } from "@/lib/auth" import { useAutoLogout } from "@/hooks/use-auto-logout" import { ArrowRight, Code, Globe, Smartphone, Database, Shield, Zap, Users, CheckCircle, Star, Mail, Phone, MapPin, LogIn, UserPlus, Trash2, } from "lucide-react" import Image from "next/image" import { AIChatbot } from "@/components/ai-chatbot" export default function HomePage() { const [user, setUser] = useState(null) const [showAuthModal, setShowAuthModal] = useState(false) const [isLoading, setIsLoading] = useState(true) const [showSubmissions, setShowSubmissions] = useState(false) const [submissions, setSubmissions] = useState([]) const [showSuccessModal, setShowSuccessModal] = useState(false) useAutoLogout(() => { if (user) { handleLogout() alert("Session expired - You have been logged out due to inactivity.") } }, 1) // 1 minute timeout useEffect(() => { const currentUser = AuthService.getCurrentUser() setUser(currentUser) setIsLoading(false) }, []) const handleAuthSuccess = (authenticatedUser: User) => { setUser(authenticatedUser) } const handleLogout = () => { AuthService.logout() setUser(null) alert("Logged out successfully") } const loadSubmissions = () => { const stored = localStorage.getItem("omgeaks-submissions") const data = stored ? JSON.parse(stored) : [] setSubmissions(data) setShowSubmissions(true) } const clearSubmissions = () => { localStorage.removeItem("omgeaks-submissions") setSubmissions([]) alert("Submissions cleared - All stored form submissions have been deleted.") } if (isLoading) { return (

) } if (user) { return AuthService.isAdmin(user) ? ( ) : ( ) } return (

{/* Header */}

OMGEAKS

setShowAuthModal(false)} onAuthSuccess={handleAuthSuccess} /> {showSuccessModal && (

Message Sent Successfully! Thank you for reaching out to OMGEAKS

Our expert team will review your request and get back to you within 24 hours with a personalized consultation.

)} {showSubmissions && (

Stored Form Submissions All contact form submissions are stored locally

{submissions.length === 0 ? (

No submissions yet

) : (

{submissions.map((submission, index) => (

Name: {submission.name}

Email: {submission.email}

Company: {submission.company || "Not provided"}

Submitted: {submission.timestamp}

Message:

{submission.message}

))}

)}

)} {/* Hero Section */}

Innovative IT Solutions

Transform Your Business with OMGEAKS

We deliver cutting-edge software development and web solutions that drive growth, streamline operations, and give your business the competitive edge it needs in today's digital world.

{/* Services Section */}

Our Services

Comprehensive IT solutions tailored to meet your unique business requirements


                Custom Software Development
                
                  Tailored software solutions built with modern technologies to solve your specific business challenges.


              
                
                  
                    
                    Enterprise Applications
                  
                  
                    
                    API Development
                  
                  
                    
                    System Integration



            
              
                
                  
                
                Web Development
                
                  Modern, responsive websites and web applications that deliver exceptional user experiences.
                
              
              
                
                  
                    
                    React & Next.js
                  
                  
                    
                    E-commerce Solutions
                  
                  
                    
                    CMS Development
                  
                
              
            

            
              
                
                  
                
                Mobile App Development
                
                  Native and cross-platform mobile applications that engage users and drive business growth.
                
              
              
                
                  
                    
                    iOS & Android
                  
                  
                    
                    React Native
                  
                  
                    
                    App Store Optimization
                  
                
              
            

            
              
                
                  
                
                Database Solutions
                
                  Robust database design, optimization, and management for scalable data solutions.
                
              
              
                
                  
                    
                    Database Design
                  
                  
                    
                    Performance Optimization
                  
                  
                    
                    Data Migration
                  
                
              
            

            
              
                
                  
                
                Security & Compliance
                
                  Comprehensive security audits and compliance solutions to protect your digital assets.
                
              
              
                
                  
                    
                    Security Audits
                  
                  
                    
                    GDPR Compliance
                  
                  
                    
                    Penetration Testing
                  
                
              
            

            
              
                
                  
                
                IT Consulting
                
                  Strategic IT consulting to help you make informed technology decisions and optimize operations.
                
              
              
                
                  
                    
                    Technology Strategy
                  
                  
                    
                    Digital Transformation
                  
                  
                    
                    Process Optimization



      {/* About Section */}
      
        
          
            About OMGEAKS
            
              We are a team of passionate developers and IT professionals dedicated to transforming businesses through
              innovative technology solutions.
            
          

          
            
              Our Mission
              
                At OMGEAKS, we believe that technology should empower businesses, not complicate them. Our mission is to
                deliver cutting-edge software solutions that are not only powerful but also intuitive and user-friendly.
              
              
                
                  
                  5+ years of industry experience
                
                
                  
                  100+ successful projects delivered
                
                
                  
                  24/7 support and maintenance
                
              
            
            
              Why Choose Us?
              
                • Expert team with diverse technical skills
                • Agile development methodology
                • Transparent communication throughout projects
                • Competitive pricing with no hidden costs
                • Post-launch support and maintenance
              
            
          
        
      

      {/* Portfolio Section */}
      
        
          
            Our Portfolio
            
              Explore some of our recent projects and see how we've helped businesses achieve their goals
            
          

          
            
              
                
                  
                
                E-Commerce Platform
                
                  Modern e-commerce solution with advanced inventory management and payment processing.
                
              
              
                
                  React
                  Node.js
                  PostgreSQL
                
                
              
            

            
              
                
                  
                
                Healthcare Mobile App
                
                  Cross-platform mobile application for patient management and appointment scheduling.
                
              
              
                
                  React Native
                  Firebase
                  TypeScript
                
                
              
            

            
              
                
                  
                
                Enterprise CRM System
                
                  Custom CRM solution with advanced analytics and automated workflow management.
                
              
              
                
                  Next.js
                  Python
                  MongoDB
                
                
              
            
          
        
      

      {/* Testimonials Section */}
      
        
          
            What Our Clients Say
            
              Don't just take our word for it - hear from businesses we've helped transform
            
          

          
            
              
                
                  {[...Array(5)].map((_, i) => (
                    
                  ))}
                
                
                  "OMGEAKS delivered exactly what we needed. Their custom software solution increased our operational
                  efficiency by 40% and the team was incredibly professional."
                
              
              
                
                  
                    SM
                  
                  
                    Sarah Mitchell
                    CEO, RetailFlow Inc.
                  
                
              
            

            
              
                
                  {[...Array(5)].map((_, i) => (
                    
                  ))}
                
                
                  "Outstanding web development work! Our new e-commerce platform has tripled our online sales. The
                  OMGEAKS team understood our vision perfectly and delivered beyond expectations."
                
              
              
                
                  
                    MJ
                  
                  
                    Michael Johnson
                    Founder, GreenTech Solutions
                  
                
              
            

            
              
                
                  {[...Array(5)].map((_, i) => (
                    
                  ))}
                
                
                  "Their mobile app development expertise is top-notch. Our app now has over 50K downloads and excellent
                  user ratings. Highly recommend OMGEAKS services!"
                
              
              
                
                  
                    LC
                  
                  
                    Lisa Chen
                    CTO, HealthTrack Pro
                  
                
              
            
          
        
      

      
        
          
            Get In Touch
            
              Ready to start your project? Fill out the form below and we'll get back to you within 24 hours.
            
          

          
            
              Contact Information
              
                
                  
                    
                  
                  
                    Email
                    hello@omgeaks.com
                  
                
                
                  
                    
                  
                  
                    Phone
                    +1 (555) 123-4567
                  
                
                
                  
                    
                  
                  
                    Address
                    
                      123 Tech Street
                      

                      Innovation City, IC 12345
                    
                  
                
              
            

            
              
                Send us a message
                Tell us about your project and we'll provide a free consultation.
              
              
                 {
                    e.preventDefault()
                    const formData = new FormData(e.target as HTMLFormElement)
                    const data = {
                      name: formData.get("name"),
                      email: formData.get("email"),
                      company: formData.get("company"),
                      message: formData.get("message"),
                      timestamp: new Date().toLocaleString(),
                    }

                    const existingData = localStorage.getItem("omgeaks-submissions")
                    const submissions = existingData ? JSON.parse(existingData) : []
                    submissions.push(data)
                    localStorage.setItem("omgeaks-submissions", JSON.stringify(submissions))

                    console.log("[v0] Contact form submitted:", data.message)

                    setShowSuccessModal(true)
                    ;(e.target as HTMLFormElement).reset()
                  }}
                >
                  
                    
                      
                        Name *
                      
                      
                    
                    
                      
                        Email *
                      
                      
                    
                  
                  
                    
                      Company
                    
                    
                  
                  
                    
                      Message *
                    
                                      </div>
                  <Button type="submit" className="w-full bg-[#2B5A87] hover:bg-[#1E3F5F] text-white">
                    Send Message
                    <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-[#2B5A87] text-white">
        <div className="container mx-auto text-center max-w-3xl">
          <h2 className="text-3xl md:text-4xl font-bold font-heading mb-6">Ready to Transform Your Business?</h2>
          <p className="text-xl mb-8 opacity-90">
            Let's discuss how OMGEAKS custom software and web solutions can drive your business forward. Get a free
            consultation today.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" variant="secondary" className="text-lg px-8 bg-white text-[#2B5A87] hover:bg-gray-100">
              Get Free Consultation
              <ArrowRight className="w-5 h-5 ml-2" />
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="text-lg px-8 border-white text-white hover:bg-white hover:text-[#2B5A87] bg-transparent"
            >
              View Portfolio
            </Button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-card border-t py-12 px-4">
        <div className="container mx-auto">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-3 mb-4">
                <Image
                  src="/images/omgeaks-logo.png"
                  alt="OMGEAKS Logo"
                  width={32}
                  height={32}
                  className="rounded-lg"
                />
                <span className="text-lg font-bold font-heading text-[#2B5A87]">OMGEAKS</span>
              </div>
              <p className="text-muted-foreground text-sm leading-relaxed">
                Transforming businesses through innovative software and web solutions.
              </p>
            </div>

            <div>
              <h3 className="font-semibold mb-4">Services</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <a href="#services" className="hover:text-foreground transition-colors">
                    Software Development
                  </a>
                </li>
                <li>
                  <a href="#about" className="hover:text-foreground transition-colors">
                    Web Development
                  </a>
                </li>
                <li>
                  <a href="#portfolio" className="hover:text-foreground transition-colors">
                    Mobile Apps
                  </a>
                </li>
                <li>
                  <a href="#contact" className="hover:text-foreground transition-colors">
                    IT Consulting
                  </a>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4">Company</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <a href="#about" className="hover:text-foreground transition-colors">
                    About Us
                  </a>
                </li>
                <li>
                  <a href="#portfolio" className="hover:text-foreground transition-colors">
                    Portfolio
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-foreground transition-colors">
                    Careers
                  </a>
                </li>
                <li>
                  <a href="#contact" className="hover:text-foreground transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>

            <div>
              <h3 className="font-semibold mb-4">Contact Info</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>hello@omgeaks.com</li>
                <li>+1 (555) 123-4567</li>
                <li>
                  123 Tech Street
                  <br />
                  Innovation City, IC 12345
                </li>
              </ul>
            </div>
          </div>

          <div className="border-t mt-8 pt-8 text-center text-sm text-muted-foreground">
            <p>© 2024 OMGEAKS. All rights reserved.</p>
          </div>
        </div>
      </footer>

      {/* AI Chatbot Component */}
      <AIChatbot />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ai-chatbot.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { MessageCircle, X, Send, Bot, User, ArrowRight, Sparkles, Code, Wrench } from "lucide-react"

interface ChatMessage {
  id: string
  type: "bot" | "user"
  content: string
  timestamp: Date
}

interface ChatSession {
  id: string
  messages: ChatMessage[]
  userInfo: {
    name?: string
    email?: string
    company?: string
    projectType?: string
    budget?: string
    timeline?: string
    requirements?: string
  }
  status: "active" | "completed" | "connected"
  createdAt: Date
}

export function AIChatbot() {
  const [isOpen, setIsOpen] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: "1",
      type: "bot",
      content:
        "Hi! I'm OMGEAKS AI Assistant. I'm here to help you get started with your project. What brings you here today?",
      timestamp: new Date(),
    },
  ])
  const [userInput, setUserInput] = useState("")
  const [sessionData, setSessionData] = useState<Partial<ChatSession["userInfo"]>>({})
  const [isConnecting, setIsConnecting] = useState(false)

  const chatSteps = [
    {
      question: "What type of project are you looking for?",
      options: [
        { label: "Start from scratch", value: "new_project", icon: Sparkles },
        { label: "Modify existing product", value: "existing_project", icon: Wrench },
      ],
    },
    {
      question: "What's your project focus?",
      options: [
        { label: "Web Application", value: "web_app", icon: Code },
        { label: "Mobile App", value: "mobile_app", icon: Code },
        { label: "Custom Software", value: "custom_software", icon: Code },
        { label: "E-commerce Solution", value: "ecommerce", icon: Code },
      ],
    },
    {
      question: "What's your estimated budget range?",
      options: [
        { label: "$5K - $15K", value: "5k-15k" },
        { label: "$15K - $50K", value: "15k-50k" },
        { label: "$50K - $100K", value: "50k-100k" },
        { label: "$100K+", value: "100k+" },
      ],
    },
    {
      question: "What's your preferred timeline?",
      options: [
        { label: "1-2 months", value: "1-2_months" },
        { label: "3-6 months", value: "3-6_months" },
        { label: "6+ months", value: "6+_months" },
        { label: "Flexible", value: "flexible" },
      ],
    },
  ]

  const addMessage = (content: string, type: "bot" | "user") => {
    const newMessage: ChatMessage = {
      id: Date.now().toString(),
      type,
      content,
      timestamp: new Date(),
    }
    setMessages((prev) => [...prev, newMessage])
  }

  const handleOptionSelect = (value: string, label: string) => {
    addMessage(label, "user")

    // Store the answer
    const stepKey =
      currentStep === 0 ? "projectType" : currentStep === 1 ? "focus" : currentStep === 2 ? "budget" : "timeline"

    setSessionData((prev) => ({ ...prev, [stepKey]: value }))

    setTimeout(() => {
      if (currentStep < chatSteps.length - 1) {
        setCurrentStep(currentStep + 1)
        addMessage(chatSteps[currentStep + 1].question, "bot")
      } else {
        // All questions answered, ask for contact info
        addMessage(
          "Great! Now I need your contact information to connect you with our team. Please provide your details below:",
          "bot",
        )
        setCurrentStep(-1) // Special state for contact form
      }
    }, 500)
  }

  const handleContactSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const formData = new FormData(e.target as HTMLFormElement)

    const contactInfo = {
      name: formData.get("name") as string,
      email: formData.get("email") as string,
      company: formData.get("company") as string,
      requirements: formData.get("requirements") as string,
    }

    setSessionData((prev) => ({ ...prev, ...contactInfo }))
    setIsConnecting(true)

    // Store the complete chat session
    const chatSession: ChatSession = {
      id: Date.now().toString(),
      messages: [...messages],
      userInfo: { ...sessionData, ...contactInfo },
      status: "completed",
      createdAt: new Date(),
    }

    // Store in localStorage for admin to see
    const existingChats = localStorage.getItem("omgeaks-chat-sessions")
    const chatSessions = existingChats ? JSON.parse(existingChats) : []
    chatSessions.push(chatSession)
    localStorage.setItem("omgeaks-chat-sessions", JSON.stringify(chatSessions))

    // Also store as a notification for admin
    const notifications = localStorage.getItem("omgeaks-notifications") || "[]"
    const notificationList = JSON.parse(notifications)
    notificationList.push({
      id: Date.now().toString(),
      type: "chat_inquiry",
      title: "New Chat Inquiry",
      message: `${contactInfo.name} (${contactInfo.email}) completed the AI chat consultation`,
      timestamp: new Date().toISOString(),
      read: false,
      data: chatSession,
    })
    localStorage.setItem("omgeaks-notifications", JSON.stringify(notificationList))

    setTimeout(() => {
      addMessage(
        "Perfect! I've collected all your information and notified our team. Someone from OMGEAKS will contact you within 24 hours to discuss your project in detail. Thank you for choosing OMGEAKS!",
        "bot",
      )
      setIsConnecting(false)

      setTimeout(() => {
        setIsOpen(false)
        // Reset chat after closing
        setTimeout(() => {
          setCurrentStep(0)
          setMessages([
            {
              id: "1",
              type: "bot",
              content:
                "Hi! I'm OMGEAKS AI Assistant. I'm here to help you get started with your project. What brings you here today?",
              timestamp: new Date(),
            },
          ])
          setSessionData({})
        }, 1000)
      }, 3000)
    }, 2000)
  }

  return (
    <>
      {/* Chat Button */}
      <Button
        onClick={() => setIsOpen(true)}
        className="fixed bottom-6 right-6 h-14 w-14 rounded-full bg-[#2B5A87] hover:bg-[#1E3F5F] text-white shadow-lg z-40"
        size="lg"
      >
        <MessageCircle className="w-6 h-6" />
      </Button>

      {/* Chat Modal */}
      {isOpen && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-end justify-end p-4">
          <Card className="w-full max-w-md h-[600px] flex flex-col shadow-2xl">
            <CardHeader className="bg-[#2B5A87] text-white rounded-t-lg">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <Bot className="w-5 h-5" />
                  <div>
                    <CardTitle className="text-lg">OMGEAKS AI Assistant</CardTitle>
                    <CardDescription className="text-blue-100">Let's discuss your project</CardDescription>
                  </div>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setIsOpen(false)}
                  className="text-white hover:bg-white/20"
                >
                  <X className="w-4 h-4" />
                </Button>
              </div>
            </CardHeader>

            <CardContent className="flex-1 flex flex-col p-0">
              {/* Messages */}
              <div className="flex-1 overflow-y-auto p-4 space-y-4">
                {messages.map((message) => (
                  <div key={message.id} className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}>
                    <div
                      className={`max-w-[80%] p-3 rounded-lg ${
                        message.type === "user" ? "bg-[#2B5A87] text-white" : "bg-gray-100 text-gray-900"
                      }`}
                    >
                      <div className="flex items-start space-x-2">
                        {message.type === "bot" && <Bot className="w-4 h-4 mt-0.5 text-[#2B5A87]" />}
                        {message.type === "user" && <User className="w-4 h-4 mt-0.5" />}
                        <p className="text-sm">{message.content}</p>
                      </div>
                    </div>
                  </div>
                ))}

                {isConnecting && (
                  <div className="flex justify-start">
                    <div className="bg-gray-100 p-3 rounded-lg">
                      <div className="flex items-center space-x-2">
                        <Bot className="w-4 h-4 text-[#2B5A87]" />
                        <div className="flex space-x-1">
                          <div className="w-2 h-2 bg-[#2B5A87] rounded-full animate-bounce"></div>
                          <div
                            className="w-2 h-2 bg-[#2B5A87] rounded-full animate-bounce"
                            style={{ animationDelay: "0.1s" }}
                          ></div>
                          <div
                            className="w-2 h-2 bg-[#2B5A87] rounded-full animate-bounce"
                            style={{ animationDelay: "0.2s" }}
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>

              {/* Input Area */}
              <div className="border-t p-4">
                {currentStep >= 0 && currentStep < chatSteps.length && (
                  <div className="space-y-3">
                    <p className="text-sm font-medium text-gray-700">Choose an option:</p>
                    <div className="grid gap-2">
                      {chatSteps[currentStep].options.map((option) => (
                        <Button
                          key={option.value}
                          variant="outline"
                          className="justify-start h-auto p-3 text-left border-[#2B5A87]/20 hover:border-[#2B5A87] hover:bg-[#2B5A87]/5 bg-transparent"
                          onClick={() => handleOptionSelect(option.value, option.label)}
                        >
                          <div className="flex items-center space-x-2">
                            {option.icon && <option.icon className="w-4 h-4 text-[#2B5A87]" />}
                            <span>{option.label}</span>
                          </div>
                          <ArrowRight className="w-4 h-4 ml-auto text-[#2B5A87]" />
                        </Button>
                      ))}
                    </div>
                  </div>
                )}

                {currentStep === -1 && !isConnecting && (
                  <form onSubmit={handleContactSubmit} className="space-y-3">
                    <div className="grid grid-cols-2 gap-2">
                      <Input
                        name="name"
                        placeholder="Your Name"
                        required
                        className="text-sm border-[#2B5A87]/20 focus:border-[#2B5A87]"
                      />
                      <Input
                        name="email"
                        type="email"
                        placeholder="Email"
                        required
                        className="text-sm border-[#2B5A87]/20 focus:border-[#2B5A87]"
                      />
                    </div>
                    <Input
                      name="company"
                      placeholder="Company (Optional)"
                      className="text-sm border-[#2B5A87]/20 focus:border-[#2B5A87]"
                    />
                    <Textarea
                      name="requirements"
                      placeholder="Additional requirements or questions..."
                      rows={3}
                      className="text-sm border-[#2B5A87]/20 focus:border-[#2B5A87]"
                    />
                    <Button type="submit" className="w-full bg-[#2B5A87] hover:bg-[#1E3F5F] text-white">
                      Connect with Team
                      <Send className="w-4 h-4 ml-2" />
                    </Button>
                  </form>
                )}
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/project-management.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Plus,
  FolderOpen,
  Calendar,
  DollarSign,
  MessageCircle,
  Edit,
  Trash2,
  CheckCircle,
  Clock,
  AlertCircle,
} from "lucide-react"
import type { User as AuthUser } from "@/lib/auth"

interface Project {
  id: string
  name: string
  description: string
  client: string
  clientEmail: string
  status: "planning" | "in-progress" | "completed" | "on-hold"
  priority: "low" | "medium" | "high"
  budget: string
  startDate: string
  endDate?: string
  createdAt: string
  createdBy: string
  assignedTo?: string
  progress: number
  notes: string
}

interface ProjectManagementProps {
  user: AuthUser
  isAdmin: boolean
}

export function ProjectManagement({ user, isAdmin }: ProjectManagementProps) {
  const [projects, setProjects] = useState<Project[]>([])
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [editingProject, setEditingProject] = useState<Project | null>(null)
  const [filter, setFilter] = useState<string>("all")

  useEffect(() => {
    loadProjects()
  }, [])

  const loadProjects = () => {
    const stored = localStorage.getItem("omgeaks-projects")
    const allProjects = stored ? JSON.parse(stored) : []

    if (isAdmin) {
      setProjects(allProjects)
    } else {
      // Regular users only see their own projects
      const userProjects = allProjects.filter(
        (p: Project) => p.clientEmail === user.email || p.assignedTo === user.email,
      )
      setProjects(userProjects)
    }
  }

  const saveProject = (projectData: Partial<Project>) => {
    const stored = localStorage.getItem("omgeaks-projects")
    const allProjects = stored ? JSON.parse(stored) : []

    if (editingProject) {
      // Update existing project
      const updatedProjects = allProjects.map((p: Project) =>
        p.id === editingProject.id ? { ...p, ...projectData } : p,
      )
      localStorage.setItem("omgeaks-projects", JSON.stringify(updatedProjects))
    } else {
      // Create new project
      const newProject: Project = {
        id: Date.now().toString(),
        createdAt: new Date().toISOString(),
        createdBy: user.email,
        progress: 0,
        ...projectData,
      } as Project

      allProjects.push(newProject)
      localStorage.setItem("omgeaks-projects", JSON.stringify(allProjects))
    }

    loadProjects()
    setShowCreateModal(false)
    setEditingProject(null)
  }

  const deleteProject = (projectId: string) => {
    if (!isAdmin) return

    const stored = localStorage.getItem("omgeaks-projects")
    const allProjects = stored ? JSON.parse(stored) : []
    const filteredProjects = allProjects.filter((p: Project) => p.id !== projectId)

    localStorage.setItem("omgeaks-projects", JSON.stringify(filteredProjects))
    loadProjects()
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle className="w-4 h-4 text-green-600" />
      case "in-progress":
        return <Clock className="w-4 h-4 text-blue-600" />
      case "on-hold":
        return <AlertCircle className="w-4 h-4 text-yellow-600" />
      default:
        return <FolderOpen className="w-4 h-4 text-gray-600" />
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800"
      case "in-progress":
        return "bg-blue-100 text-blue-800"
      case "on-hold":
        return "bg-yellow-100 text-yellow-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "high":
        return "bg-red-100 text-red-800"
      case "medium":
        return "bg-orange-100 text-orange-800"
      default:
        return "bg-green-100 text-green-800"
    }
  }

  const filteredProjects = projects.filter((project) => {
    if (filter === "all") return true
    return project.status === filter
  })

  const ProjectForm = ({ project }: { project?: Project }) => {
    const [formData, setFormData] = useState({
      name: project?.name || "",
      description: project?.description || "",
      client: project?.client || "",
      clientEmail: project?.clientEmail || "",
      status: project?.status || "planning",
      priority: project?.priority || "medium",
      budget: project?.budget || "",
      startDate: project?.startDate || "",
      endDate: project?.endDate || "",
      assignedTo: project?.assignedTo || "",
      notes: project?.notes || "",
    })

    const handleSubmit = (e: React.FormEvent) => {
      e.preventDefault()
      saveProject(formData)
    }

    return (
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <Label htmlFor="name">Project Name *</Label>
            <Input
              id="name"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              required
            />
          </div>
          <div>
            <Label htmlFor="client">Client Name *</Label>
            <Input
              id="client"
              value={formData.client}
              onChange={(e) => setFormData({ ...formData, client: e.target.value })}
              required
            />
          </div>
        </div>

        <div>
          <Label htmlFor="clientEmail">Client Email *</Label>
          <Input
            id="clientEmail"
            type="email"
            value={formData.clientEmail}
            onChange={(e) => setFormData({ ...formData, clientEmail: e.target.value })}
            required
          />
        </div>

        <div>
          <Label htmlFor="description">Description</Label>
          <Textarea
            id="description"
            value={formData.description}
            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
            rows={3}
          />
        </div>

        <div className="grid grid-cols-3 gap-4">
          <div>
            <Label htmlFor="status">Status</Label>
            <Select
              value={formData.status}
              onValueChange={(value) => setFormData({ ...formData, status: value as any })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="planning">Planning</SelectItem>
                <SelectItem value="in-progress">In Progress</SelectItem>
                <SelectItem value="on-hold">On Hold</SelectItem>
                <SelectItem value="completed">Completed</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="priority">Priority</Label>
            <Select
              value={formData.priority}
              onValueChange={(value) => setFormData({ ...formData, priority: value as any })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">Low</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="high">High</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label htmlFor="budget">Budget</Label>
            <Input
              id="budget"
              value={formData.budget}
              onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
              placeholder="$10,000"
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <Label htmlFor="startDate">Start Date</Label>
            <Input
              id="startDate"
              type="date"
              value={formData.startDate}
              onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
            />
          </div>
          <div>
            <Label htmlFor="endDate">End Date</Label>
            <Input
              id="endDate"
              type="date"
              value={formData.endDate}
              onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
            />
          </div>
        </div>

        {isAdmin && (
          <div>
            <Label htmlFor="assignedTo">Assigned To (Email)</Label>
            <Input
              id="assignedTo"
              type="email"
              value={formData.assignedTo}
              onChange={(e) => setFormData({ ...formData, assignedTo: e.target.value })}
              placeholder="developer@omgeaks.com"
            />
          </div>
        )}

        <div>
          <Label htmlFor="notes">Notes</Label>
          <Textarea
            id="notes"
            value={formData.notes}
            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
            rows={3}
            placeholder="Additional project notes..."
          />
        </div>

        <div className="flex justify-end space-x-2">
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              setShowCreateModal(false)
              setEditingProject(null)
            }}
          >
            Cancel
          </Button>
          <Button type="submit" className="bg-[#2B5A87] hover:bg-[#1E3F5F]">
            {project ? "Update Project" : "Create Project"}
          </Button>
        </div>
      </form>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-[#2B5A87]">Project Management</h2>
          <p className="text-muted-foreground">
            {isAdmin ? "Manage all projects and assignments" : "View and track your projects"}
          </p>
        </div>
        {isAdmin && (
          <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
            <DialogTrigger asChild>
              <Button className="bg-[#2B5A87] hover:bg-[#1E3F5F]">
                <Plus className="w-4 h-4 mr-2" />
                New Project
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Create New Project</DialogTitle>
                <DialogDescription>Add a new project to the system and assign it to team members.</DialogDescription>
              </DialogHeader>
              <ProjectForm />
            </DialogContent>
          </Dialog>
        )}
      </div>

      {/* Filters */}
      <div className="flex items-center space-x-4">
        <Label>Filter by status:</Label>
        <Select value={filter} onValueChange={setFilter}>
          <SelectTrigger className="w-48">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Projects</SelectItem>
            <SelectItem value="planning">Planning</SelectItem>
            <SelectItem value="in-progress">In Progress</SelectItem>
            <SelectItem value="on-hold">On Hold</SelectItem>
            <SelectItem value="completed">Completed</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Projects Grid */}
      {filteredProjects.length === 0 ? (
        <Card>
          <CardContent className="py-12 text-center">
            <FolderOpen className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-lg font-semibold mb-2">No projects found</h3>
            <p className="text-muted-foreground mb-4">
              {isAdmin ? "Create your first project to get started." : "No projects have been assigned to you yet."}
            </p>
            {isAdmin && (
              <Button onClick={() => setShowCreateModal(true)} className="bg-[#2B5A87] hover:bg-[#1E3F5F]">
                <Plus className="w-4 h-4 mr-2" />
                Create Project
              </Button>
            )}
          </CardContent>
        </Card>
      ) : (
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredProjects.map((project) => (
            <Card key={project.id} className="hover:shadow-lg transition-shadow">
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between">
                  <div className="flex items-center space-x-2">
                    {getStatusIcon(project.status)}
                    <CardTitle className="text-lg">{project.name}</CardTitle>
                  </div>
                  {isAdmin && (
                    <div className="flex space-x-1">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          setEditingProject(project)
                          setShowCreateModal(true)
                        }}
                      >
                        <Edit className="w-4 h-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => deleteProject(project.id)}
                        className="text-red-600 hover:text-red-700"
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  )}
                </div>
                <CardDescription className="line-clamp-2">
                  {project.description || "No description provided"}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center justify-between">
                  <Badge className={getStatusColor(project.status)}>
                    {project.status.replace("-", " ").toUpperCase()}
                  </Badge>
                  <Badge className={getPriorityColor(project.priority)}>{project.priority.toUpperCase()}</Badge>
                </div>

                <div className="space-y-2 text-sm">
                  <div className="flex items-center space-x-2">
                    <FolderOpen className="w-4 h-4 text-muted-foreground" />
                    <span>{project.client}</span>
                  </div>
                  {project.budget && (
                    <div className="flex items-center space-x-2">
                      <DollarSign className="w-4 h-4 text-muted-foreground" />
                      <span>{project.budget}</span>
                    </div>
                  )}
                  {project.startDate && (
                    <div className="flex items-center space-x-2">
                      <Calendar className="w-4 h-4 text-muted-foreground" />
                      <span>{new Date(project.startDate).toLocaleDateString()}</span>
                    </div>
                  )}
                </div>

                {project.notes && (
                  <div className="pt-2 border-t">
                    <div className="flex items-start space-x-2">
                      <MessageCircle className="w-4 h-4 text-muted-foreground mt-0.5" />
                      <p className="text-sm text-muted-foreground line-clamp-2">{project.notes}</p>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Edit Project Modal */}
      {editingProject && (
        <Dialog
          open={showCreateModal}
          onOpenChange={(open) => {
            setShowCreateModal(open)
            if (!open) setEditingProject(null)
          }}
        >
          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Edit Project</DialogTitle>
              <DialogDescription>Update project details and assignments.</DialogDescription>
            </DialogHeader>
            <ProjectForm project={editingProject} />
          </DialogContent>
        </Dialog>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="lib/database.ts" isMerged="true"
// Database abstraction layer for OMGEAKS
// Currently uses localStorage but can be easily migrated to real database

export interface DatabaseUser {
  id: string
  name: string
  email: string
  password: string // In production, this should be hashed
  role: "admin" | "user"
  createdAt: string
  updatedAt: string
}

export interface DatabaseProject {
  id: string
  name: string
  description: string
  client: string
  clientEmail: string
  status: "planning" | "in-progress" | "completed" | "on-hold"
  priority: "low" | "medium" | "high"
  budget: string
  startDate: string
  endDate?: string
  createdAt: string
  updatedAt: string
  createdBy: string
  assignedTo?: string
  progress: number
  notes: string
}

export interface DatabaseSubmission {
  id: string
  name: string
  email: string
  company?: string
  message: string
  timestamp: string
  status: "new" | "read" | "responded"
  createdAt: string
}

export interface DatabaseChatSession {
  id: string
  userId?: string
  userInfo: {
    name?: string
    email?: string
    company?: string
    projectType?: string
    budget?: string
    timeline?: string
    requirements?: string
  }
  messages: Array<{
    id: string
    type: "bot" | "user"
    content: string
    timestamp: string
  }>
  status: "active" | "completed" | "abandoned"
  createdAt: string
  updatedAt: string
}

export interface DatabaseNotification {
  id: string
  type: "chat_inquiry" | "connection_request" | "project_update" | "system"
  title: string
  message: string
  data?: any
  read: boolean
  createdAt: string
  updatedAt: string
}

class DatabaseService {
  private static instance: DatabaseService
  private isInitialized = false

  private constructor() {}

  static getInstance(): DatabaseService {
    if (!DatabaseService.instance) {
      DatabaseService.instance = new DatabaseService()
    }
    return DatabaseService.instance
  }

  async initialize(): Promise<void> {
    if (this.isInitialized) return

    // Initialize database tables/collections
    // For localStorage, we just ensure the keys exist
    this.ensureLocalStorageKeys()
    this.isInitialized = true
  }

  private ensureLocalStorageKeys(): void {
    const keys = [
      "omgeaks_users",
      "omgeaks_projects",
      "omgeaks_submissions",
      "omgeaks_chat_sessions",
      "omgeaks_notifications",
    ]

    keys.forEach((key) => {
      if (!localStorage.getItem(key)) {
        localStorage.setItem(key, JSON.stringify([]))
      }
    })
  }

  // User operations
  async getUsers(): Promise<DatabaseUser[]> {
    const users = localStorage.getItem("omgeaks_users")
    return users ? JSON.parse(users) : []
  }

  async getUserById(id: string): Promise<DatabaseUser | null> {
    const users = await this.getUsers()
    return users.find((user) => user.id === id) || null
  }

  async getUserByEmail(email: string): Promise<DatabaseUser | null> {
    const users = await this.getUsers()
    return users.find((user) => user.email === email) || null
  }

  async createUser(userData: Omit<DatabaseUser, "id" | "createdAt" | "updatedAt">): Promise<DatabaseUser> {
    const users = await this.getUsers()
    const newUser: DatabaseUser = {
      ...userData,
      id: Date.now().toString(),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

    users.push(newUser)
    localStorage.setItem("omgeaks_users", JSON.stringify(users))
    return newUser
  }

  async updateUser(id: string, updates: Partial<DatabaseUser>): Promise<DatabaseUser | null> {
    const users = await this.getUsers()
    const userIndex = users.findIndex((user) => user.id === id)

    if (userIndex === -1) return null

    users[userIndex] = {
      ...users[userIndex],
      ...updates,
      updatedAt: new Date().toISOString(),
    }

    localStorage.setItem("omgeaks_users", JSON.stringify(users))
    return users[userIndex]
  }

  async deleteUser(id: string): Promise<boolean> {
    const users = await this.getUsers()
    const filteredUsers = users.filter((user) => user.id !== id)

    if (filteredUsers.length === users.length) return false

    localStorage.setItem("omgeaks_users", JSON.stringify(filteredUsers))
    return true
  }

  // Project operations
  async getProjects(): Promise<DatabaseProject[]> {
    const projects = localStorage.getItem("omgeaks_projects")
    return projects ? JSON.parse(projects) : []
  }

  async getProjectById(id: string): Promise<DatabaseProject | null> {
    const projects = await this.getProjects()
    return projects.find((project) => project.id === id) || null
  }

  async getProjectsByUser(userEmail: string): Promise<DatabaseProject[]> {
    const projects = await this.getProjects()
    return projects.filter((project) => project.clientEmail === userEmail || project.assignedTo === userEmail)
  }

  async createProject(projectData: Omit<DatabaseProject, "id" | "createdAt" | "updatedAt">): Promise<DatabaseProject> {
    const projects = await this.getProjects()
    const newProject: DatabaseProject = {
      ...projectData,
      id: Date.now().toString(),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

    projects.push(newProject)
    localStorage.setItem("omgeaks_projects", JSON.stringify(projects))
    return newProject
  }

  async updateProject(id: string, updates: Partial<DatabaseProject>): Promise<DatabaseProject | null> {
    const projects = await this.getProjects()
    const projectIndex = projects.findIndex((project) => project.id === id)

    if (projectIndex === -1) return null

    projects[projectIndex] = {
      ...projects[projectIndex],
      ...updates,
      updatedAt: new Date().toISOString(),
    }

    localStorage.setItem("omgeaks_projects", JSON.stringify(projects))
    return projects[projectIndex]
  }

  async deleteProject(id: string): Promise<boolean> {
    const projects = await this.getProjects()
    const filteredProjects = projects.filter((project) => project.id !== id)

    if (filteredProjects.length === projects.length) return false

    localStorage.setItem("omgeaks_projects", JSON.stringify(filteredProjects))
    return true
  }

  // Submission operations
  async getSubmissions(): Promise<DatabaseSubmission[]> {
    const submissions = localStorage.getItem("omgeaks_submissions")
    return submissions ? JSON.parse(submissions) : []
  }

  async createSubmission(
    submissionData: Omit<DatabaseSubmission, "id" | "createdAt" | "status">,
  ): Promise<DatabaseSubmission> {
    const submissions = await this.getSubmissions()
    const newSubmission: DatabaseSubmission = {
      ...submissionData,
      id: Date.now().toString(),
      status: "new",
      createdAt: new Date().toISOString(),
    }

    submissions.push(newSubmission)
    localStorage.setItem("omgeaks_submissions", JSON.stringify(submissions))
    return newSubmission
  }

  async updateSubmissionStatus(id: string, status: DatabaseSubmission["status"]): Promise<boolean> {
    const submissions = await this.getSubmissions()
    const submissionIndex = submissions.findIndex((sub) => sub.id === id)

    if (submissionIndex === -1) return false

    submissions[submissionIndex].status = status
    localStorage.setItem("omgeaks_submissions", JSON.stringify(submissions))
    return true
  }

  // Chat session operations
  async getChatSessions(): Promise<DatabaseChatSession[]> {
    const sessions = localStorage.getItem("omgeaks_chat_sessions")
    return sessions ? JSON.parse(sessions) : []
  }

  async createChatSession(
    sessionData: Omit<DatabaseChatSession, "id" | "createdAt" | "updatedAt">,
  ): Promise<DatabaseChatSession> {
    const sessions = await this.getChatSessions()
    const newSession: DatabaseChatSession = {
      ...sessionData,
      id: Date.now().toString(),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

    sessions.push(newSession)
    localStorage.setItem("omgeaks_chat_sessions", JSON.stringify(sessions))
    return newSession
  }

  // Notification operations
  async getNotifications(): Promise<DatabaseNotification[]> {
    const notifications = localStorage.getItem("omgeaks_notifications")
    return notifications ? JSON.parse(notifications) : []
  }

  async createNotification(
    notificationData: Omit<DatabaseNotification, "id" | "createdAt" | "updatedAt">,
  ): Promise<DatabaseNotification> {
    const notifications = await this.getNotifications()
    const newNotification: DatabaseNotification = {
      ...notificationData,
      id: Date.now().toString(),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

    notifications.push(newNotification)
    localStorage.setItem("omgeaks_notifications", JSON.stringify(notifications))
    return newNotification
  }

  async markNotificationAsRead(id: string): Promise<boolean> {
    const notifications = await this.getNotifications()
    const notificationIndex = notifications.findIndex((notif) => notif.id === id)

    if (notificationIndex === -1) return false

    notifications[notificationIndex].read = true
    notifications[notificationIndex].updatedAt = new Date().toISOString()
    localStorage.setItem("omgeaks_notifications", JSON.stringify(notifications))
    return true
  }

  async deleteNotification(id: string): Promise<boolean> {
    const notifications = await this.getNotifications()
    const filteredNotifications = notifications.filter((notif) => notif.id !== id)

    if (filteredNotifications.length === notifications.length) return false

    localStorage.setItem("omgeaks_notifications", JSON.stringify(filteredNotifications))
    return true
  }

  // Utility methods
  async clearAllData(): Promise<void> {
    const keys = [
      "omgeaks_users",
      "omgeaks_projects",
      "omgeaks_submissions",
      "omgeaks_chat_sessions",
      "omgeaks_notifications",
    ]

    keys.forEach((key) => localStorage.removeItem(key))
    this.isInitialized = false
  }

  async getStats(): Promise<{
    totalUsers: number
    totalProjects: number
    activeProjects: number
    totalSubmissions: number
    unreadNotifications: number
    totalChatSessions: number
  }> {
    const [users, projects, submissions, notifications, chatSessions] = await Promise.all([
      this.getUsers(),
      this.getProjects(),
      this.getSubmissions(),
      this.getNotifications(),
      this.getChatSessions(),
    ])

    return {
      totalUsers: users.length,
      totalProjects: projects.length,
      activeProjects: projects.filter((p) => p.status === "in-progress").length,
      totalSubmissions: submissions.length,
      unreadNotifications: notifications.filter((n) => !n.read).length,
      totalChatSessions: chatSessions.length,
    }
  }
}

export const db = DatabaseService.getInstance()
[V0_FILE]sql:file="scripts/database-schema.sql" isMerged="true"
-- OMGEAKS Database Schema
-- This script creates the database structure for when migrating from localStorage

-- Create database
CREATE DATABASE IF NOT EXISTS omgeaks;
USE omgeaks;

-- Users table
CREATE TABLE users (
    id VARCHAR(36) PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL, -- Should be hashed in production
    role ENUM('admin', 'user') DEFAULT 'user',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    INDEX idx_email (email),
    INDEX idx_role (role)
);

-- Projects table
CREATE TABLE projects (
    id VARCHAR(36) PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    client VARCHAR(255) NOT NULL,
    client_email VARCHAR(255) NOT NULL,
    status ENUM('planning', 'in-progress', 'completed', 'on-hold') DEFAULT 'planning',
    priority ENUM('low', 'medium', 'high') DEFAULT 'medium',
    budget VARCHAR(100),
    start_date DATE,
    end_date DATE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    created_by VARCHAR(255) NOT NULL,
    assigned_to VARCHAR(255),
    progress INT DEFAULT 0,
    notes TEXT,
    INDEX idx_client_email (client_email),
    INDEX idx_status (status),
    INDEX idx_assigned_to (assigned_to),
    INDEX idx_created_by (created_by)
);

-- Contact form submissions table
CREATE TABLE submissions (
    id VARCHAR(36) PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    company VARCHAR(255),
    message TEXT NOT NULL,
    timestamp VARCHAR(50), -- Keep for backward compatibility
    status ENUM('new', 'read', 'responded') DEFAULT 'new',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_email (email),
    INDEX idx_status (status),
    INDEX idx_created_at (created_at)
);

-- Chat sessions table
CREATE TABLE chat_sessions (
    id VARCHAR(36) PRIMARY KEY,
    user_id VARCHAR(36),
    user_info JSON, -- Store user information as JSON
    messages JSON, -- Store messages array as JSON
    status ENUM('active', 'completed', 'abandoned') DEFAULT 'active',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    INDEX idx_status (status),
    INDEX idx_created_at (created_at),
    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE SET NULL
);

-- Notifications table
CREATE TABLE notifications (
    id VARCHAR(36) PRIMARY KEY,
    type ENUM('chat_inquiry', 'connection_request', 'project_update', 'system') NOT NULL,
    title VARCHAR(255) NOT NULL,
    message TEXT NOT NULL,
    data JSON, -- Store additional data as JSON
    read_status BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    INDEX idx_type (type),
    INDEX idx_read_status (read_status),
    INDEX idx_created_at (created_at)
);

-- Insert default admin user (password should be hashed in production)
INSERT INTO users (id, name, email, password, role, created_at, updated_at) 
VALUES (
    '1', 
    'Super Admin', 
    'rajandhand17@gmail.com', 
    'admin123', -- This should be hashed
    'admin', 
    NOW(), 
    NOW()
) ON DUPLICATE KEY UPDATE id=id;

-- Create indexes for better performance
CREATE INDEX idx_projects_client_status ON projects(client_email, status);
CREATE INDEX idx_notifications_unread ON notifications(read_status, created_at);
CREATE INDEX idx_submissions_recent ON submissions(created_at DESC);
[V0_FILE]sql:file="scripts/migrate-from-localstorage.sql" isMerged="true"
-- Migration script to transfer data from localStorage to MySQL database
-- This script should be run after the database schema is created

-- Note: This is a template. In a real application, you would need to:
-- 1. Export data from localStorage to JSON files
-- 2. Use a migration tool or script to import the data
-- 3. Validate the data integrity after migration

-- Example migration queries (data would need to be inserted from exported JSON):

-- Migrate users
-- INSERT INTO users (id, name, email, password, role, created_at, updated_at)
-- SELECT 
--     JSON_UNQUOTE(JSON_EXTRACT(user_data, '$.id')),
--     JSON_UNQUOTE(JSON_EXTRACT(user_data, '$.name')),
--     JSON_UNQUOTE(JSON_EXTRACT(user_data, '$.email')),
--     JSON_UNQUOTE(JSON_EXTRACT(user_data, '$.password')),
--     JSON_UNQUOTE(JSON_EXTRACT(user_data, '$.role')),
--     STR_TO_DATE(JSON_UNQUOTE(JSON_EXTRACT(user_data, '$.createdAt')), '%Y-%m-%dT%H:%i:%s.%fZ'),
--     NOW()
-- FROM (
--     -- This would be populated from localStorage export
--     SELECT '{"id":"1","name":"Admin","email":"admin@omgeaks.com","password":"admin123","role":"admin","createdAt":"2024-01-01T00:00:00.000Z"}' as user_data
-- ) as temp_users;

-- Migrate projects
-- Similar pattern for projects, submissions, chat_sessions, and notifications

-- Verification queries
SELECT 'Users migrated:' as info, COUNT(*) as count FROM users;
SELECT 'Projects migrated:' as info, COUNT(*) as count FROM projects;
SELECT 'Submissions migrated:' as info, COUNT(*) as count FROM submissions;
SELECT 'Chat sessions migrated:' as info, COUNT(*) as count FROM chat_sessions;
SELECT 'Notifications migrated:' as info, COUNT(*) as count FROM notifications;
[V0_FILE]typescriptreact:file="lib/auth.ts" isEdit="true"
import { db, type DatabaseUser } from "./database"

export interface User {
  id: string
  email: string
  name: string
  role: "user" | "admin"
  createdAt: string
}

export interface AuthState {
  user: User | null
  isAuthenticated: boolean
}

export class AuthService {
  private static readonly STORAGE_KEY = "omgeaks-auth"
  private static readonly SUPER_ADMIN_EMAIL = "rajandhand17@gmail.com"

  private static async ensureInitialized(): Promise<void> {
    await db.initialize()
  }

  static getCurrentUser(): User | null {
    if (typeof window === "undefined") return null
    const stored = localStorage.getItem(this.STORAGE_KEY)
    return stored ? JSON.parse(stored) : null
  }

  static async login(email: string, password: string): Promise<{ success: boolean; user?: User; error?: string }> {
    await this.ensureInitialized()

    const dbUser = await db.getUserByEmail(email)
    if (!dbUser) {
      return { success: false, error: "User not found" }
    }

    // Simple password check (in real app, use proper hashing)
    if (dbUser.password !== password) {
      return { success: false, error: "Invalid password" }
    }

    const user: User = {
      id: dbUser.id,
      email: dbUser.email,
      name: dbUser.name,
      role: dbUser.role,
      createdAt: dbUser.createdAt,
    }

    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(user))
    return { success: true, user }
  }

  static async register(
    email: string,
    password: string,
    name: string,
  ): Promise<{ success: boolean; user?: User; error?: string }> {
    await this.ensureInitialized()

    const existingUser = await db.getUserByEmail(email)
    if (existingUser) {
      return { success: false, error: "Email already exists" }
    }

    const dbUser = await db.createUser({
      name,
      email,
      password, // In real app, this should be hashed
      role: email === this.SUPER_ADMIN_EMAIL ? "admin" : "user",
    })

    const user: User = {
      id: dbUser.id,
      email: dbUser.email,
      name: dbUser.name,
      role: dbUser.role,
      createdAt: dbUser.createdAt,
    }

    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(user))
    return { success: true, user }
  }

  static logout(): void {
    localStorage.removeItem(this.STORAGE_KEY)
  }

  static async getUsers(): Promise<User[]> {
    if (typeof window === "undefined") return []

    await this.ensureInitialized()
    const dbUsers = await db.getUsers()

    return dbUsers.map((dbUser) => ({
      id: dbUser.id,
      email: dbUser.email,
      name: dbUser.name,
      role: dbUser.role,
      createdAt: dbUser.createdAt,
    }))
  }

  static getUsers(): User[] {
    if (typeof window === "undefined") return []
    const stored = localStorage.getItem("omgeaks_users")
    return stored ? JSON.parse(stored) : []
  }

  static isAdmin(user: User | null): boolean {
    return user?.role === "admin"
  }

  static async createUser(userData: {
    name: string
    email: string
    password: string
    role: "admin" | "user"
  }): Promise<User> {
    await this.ensureInitialized()

    const dbUser = await db.createUser(userData)
    return {
      id: dbUser.id,
      email: dbUser.email,
      name: dbUser.name,
      role: dbUser.role,
      createdAt: dbUser.createdAt,
    }
  }

  static async deleteUser(userId: string): Promise<boolean> {
    await this.ensureInitialized()
    return await db.deleteUser(userId)
  }

  static async updateUser(userId: string, updates: Partial<DatabaseUser>): Promise<User | null> {
    await this.ensureInitialized()

    const dbUser = await db.updateUser(userId, updates)
    if (!dbUser) return null

    return {
      id: dbUser.id,
      email: dbUser.email,
      name: dbUser.name,
      role: dbUser.role,
      createdAt: dbUser.createdAt,
    }
  }
}
[V0_FILE]typescriptreact:file="lib/project-service.ts"
import { db, type DatabaseProject } from "./database"

export interface Project {
  id: string
  name: string
  description: string
  client: string
  clientEmail: string
  status: "planning" | "in-progress" | "completed" | "on-hold"
  priority: "low" | "medium" | "high"
  budget: string
  startDate: string
  endDate?: string
  createdAt: string
  updatedAt: string
  createdBy: string
  assignedTo?: string
  progress: number
  notes: string
}

export class ProjectService {
  private static async ensureInitialized(): Promise<void> {
    await db.initialize()
  }

  static async getAllProjects(): Promise<Project[]> {
    await this.ensureInitialized()
    const dbProjects = await db.getProjects()
    return dbProjects.map(this.mapDatabaseProject)
  }

  static async getProjectById(id: string): Promise<Project | null> {
    await this.ensureInitialized()
    const dbProject = await db.getProjectById(id)
    return dbProject ? this.mapDatabaseProject(dbProject) : null
  }

  static async getProjectsByUser(userEmail: string): Promise<Project[]> {
    await this.ensureInitialized()
    const dbProjects = await db.getProjectsByUser(userEmail)
    return dbProjects.map(this.mapDatabaseProject)
  }

  static async createProject(projectData: Omit<Project, "id" | "createdAt" | "updatedAt">): Promise<Project> {
    await this.ensureInitialized()
    const dbProject = await db.createProject(projectData)
    return this.mapDatabaseProject(dbProject)
  }

  static async updateProject(id: string, updates: Partial<Project>): Promise<Project | null> {
    await this.ensureInitialized()
    const dbProject = await db.updateProject(id, updates)
    return dbProject ? this.mapDatabaseProject(dbProject) : null
  }

  static async deleteProject(id: string): Promise<boolean> {
    await this.ensureInitialized()
    return await db.deleteProject(id)
  }

  private static mapDatabaseProject(dbProject: DatabaseProject): Project {
    return {
      id: dbProject.id,
      name: dbProject.name,
      description: dbProject.description,
      client: dbProject.client,
      clientEmail: dbProject.clientEmail,
      status: dbProject.status,
      priority: dbProject.priority,
      budget: dbProject.budget,
      startDate: dbProject.startDate,
      endDate: dbProject.endDate,
      createdAt: dbProject.createdAt,
      updatedAt: dbProject.updatedAt,
      createdBy: dbProject.createdBy,
      assignedTo: dbProject.assignedTo,
      progress: dbProject.progress,
      notes: dbProject.notes,
    }
  }
}
[V0_FILE]typescriptreact:file="lib/notification-service.ts"
import { db, type DatabaseNotification } from "./database"

export interface Notification {
  id: string
  type: "chat_inquiry" | "connection_request" | "project_update" | "system"
  title: string
  message: string
  data?: any
  read: boolean
  createdAt: string
  updatedAt: string
}

export class NotificationService {
  private static async ensureInitialized(): Promise<void> {
    await db.initialize()
  }

  static async getAllNotifications(): Promise<Notification[]> {
    await this.ensureInitialized()
    const dbNotifications = await db.getNotifications()
    return dbNotifications.map(this.mapDatabaseNotification)
  }

  static async createNotification(
    notificationData: Omit<Notification, "id" | "createdAt" | "updatedAt">,
  ): Promise<Notification> {
    await this.ensureInitialized()
    const dbNotification = await db.createNotification(notificationData)
    return this.mapDatabaseNotification(dbNotification)
  }

  static async markAsRead(id: string): Promise<boolean> {
    await this.ensureInitialized()
    return await db.markNotificationAsRead(id)
  }

  static async deleteNotification(id: string): Promise<boolean> {
    await this.ensureInitialized()
    return await db.deleteNotification(id)
  }

  static async getUnreadCount(): Promise<number> {
    await this.ensureInitialized()
    const notifications = await db.getNotifications()
    return notifications.filter((n) => !n.read).length
  }

  private static mapDatabaseNotification(dbNotification: DatabaseNotification): Notification {
    return {
      id: dbNotification.id,
      type: dbNotification.type,
      title: dbNotification.title,
      message: dbNotification.message,
      data: dbNotification.data,
      read: dbNotification.read,
      createdAt: dbNotification.createdAt,
      updatedAt: dbNotification.updatedAt,
    }
  }
}
[V0_FILE]typescriptreact:file="lib/submission-service.ts"
import { db, type DatabaseSubmission } from "./database"

export interface Submission {
  id: string
  name: string
  email: string
  company?: string
  message: string
  timestamp: string
  status: "new" | "read" | "responded"
  createdAt: string
}

export class SubmissionService {
  private static async ensureInitialized(): Promise<void> {
    await db.initialize()
  }

  static async getAllSubmissions(): Promise<Submission[]> {
    await this.ensureInitialized()
    const dbSubmissions = await db.getSubmissions()
    return dbSubmissions.map(this.mapDatabaseSubmission)
  }

  static async createSubmission(submissionData: Omit<Submission, "id" | "createdAt" | "status">): Promise<Submission> {
    await this.ensureInitialized()
    const dbSubmission = await db.createSubmission(submissionData)
    return this.mapDatabaseSubmission(dbSubmission)
  }

  static async updateStatus(id: string, status: Submission["status"]): Promise<boolean> {
    await this.ensureInitialized()
    return await db.updateSubmissionStatus(id, status)
  }

  static async getSubmissionsByEmail(email: string): Promise<Submission[]> {
    await this.ensureInitialized()
    const allSubmissions = await db.getSubmissions()
    return allSubmissions.filter((sub) => sub.email === email).map(this.mapDatabaseSubmission)
  }

  private static mapDatabaseSubmission(dbSubmission: DatabaseSubmission): Submission {
    return {
      id: dbSubmission.id,
      name: dbSubmission.name,
      email: dbSubmission.email,
      company: dbSubmission.company,
      message: dbSubmission.message,
      timestamp: dbSubmission.timestamp,
      status: dbSubmission.status,
      createdAt: dbSubmission.createdAt,
    }
  }
}</article></body></html>

Welcome back, {user.name}!

{project.name}

Inquiry #{index + 1}

Welcome to OMGEAKS!

Inquiry #{index + 1}

Admin Dashboard

{submission.name}

{project.name}

{u.name}

{submission.name}

{session.userInfo.name || "Anonymous"}

{!notification.read && } {notification.title}

Transform Your Business with OMGEAKS

Our Services

About OMGEAKS

Our Mission

Why Choose Us?

Our Portfolio

What Our Clients Say

Get In Touch

Contact Information

{!notification.read &&
} {notification.title}