[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "YohDev Client Portal", description: "Manage your projects, tickets, and billing with YohDev", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import Link from "next/link" export default function Home() { return (

YohDev Client Portal

Welcome to YohDev Client Portal

Manage your projects, track tickets, and view your billing information all in one place.

Ticket Management

Submit new tickets, track progress, and view ticket history with ease.

Resource Tracking

Monitor project resource utilization and track hours remaining in your client bucket.

Financial Management

View invoices, current contracts, and manage your account information.

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" "use client" import type React from "react" import Link from "next/link" import { usePathname } from "next/navigation" import { BarChart3, FileText, Home, LifeBuoy, LogOut, Package, Settings, User, Users } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { const pathname = usePathname() const routes = [ { href: "/dashboard", label: "Dashboard", icon: Home, active: pathname === "/dashboard", }, { href: "/dashboard/tickets", label: "Tickets", icon: LifeBuoy, active: pathname.startsWith("/dashboard/tickets"), }, { href: "/dashboard/projects", label: "Projects", icon: Package, active: pathname.startsWith("/dashboard/projects"), }, { href: "/dashboard/resources", label: "Resources", icon: BarChart3, active: pathname.startsWith("/dashboard/resources"), }, { href: "/dashboard/invoices", label: "Invoices", icon: FileText, active: pathname.startsWith("/dashboard/invoices"), }, { href: "/dashboard/contracts", label: "Contracts", icon: Users, active: pathname.startsWith("/dashboard/contracts"), }, { href: "/dashboard/account", label: "Account", icon: User, active: pathname.startsWith("/dashboard/account"), }, { href: "/dashboard/settings", label: "Settings", icon: Settings, active: pathname.startsWith("/dashboard/settings"), }, ] return (

YohDev Client Portal

My Account Profile Settings Log out

{children}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import Link from "next/link" import { Activity, AlertCircle, CheckCircle2, Clock, FileText, LifeBuoy, Package } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function DashboardPage() { return (

Dashboard

Welcome back! Here's an overview of your projects and tickets.

Active Projects

+1 from last month

Open Tickets

-2 from last week

Hours Remaining

42.5

In your current bucket

Pending Invoices

Due in 7 days

Resource Utilization Hours used across your active projects

Website Redesign

65%

E-commerce Integration

42%

SEO Optimization

89%

Recent Tickets Latest updates on your support tickets Open In Progress Closed

Contact form not working

Opened 2 days ago

Need to update product images

Opened 3 days ago

Mobile menu not responsive

Updated 12 hours ago

Add new payment gateway

Updated 1 day ago

Update privacy policy page

Closed 1 week ago

Fix newsletter signup

Closed 2 weeks ago

) } [V0_FILE]typescriptreact:file="app/dashboard/tickets/page.tsx" isMerged="true" import Link from "next/link" import { Activity, AlertCircle, CheckCircle2, Filter, Plus, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" export default function TicketsPage() { return (

Tickets

Manage and track your support tickets with YohDev.

Filter by Status Open In Progress Closed

Open 3 tickets

Contact form not working

Opened 2 days ago

Website Redesign

Need to update product images

Opened 3 days ago

E-commerce Integration

Blog posts need SEO review

Opened 5 days ago

SEO Optimization

In Progress 2 tickets

Mobile menu not responsive

Updated 12 hours ago

Website Redesign

Add new payment gateway

Updated 1 day ago

E-commerce Integration

Closed 2 tickets

Update privacy policy page

Closed 1 week ago

Website Redesign

Fix newsletter signup

Closed 2 weeks ago

Website Redesign

All Tickets A comprehensive list of all your support tickets. ID Title Project Status Created Updated #1234 Contact form not working Website Redesign Open 2 days ago 2 days ago #1233 Need to update product images E-commerce Integration Open 3 days ago 3 days ago #1232 Mobile menu not responsive Website Redesign In Progress 4 days ago 12 hours ago #1231 Add new payment gateway E-commerce Integration In Progress 5 days ago 1 day ago #1230 Blog posts need SEO review SEO Optimization Open 5 days ago 5 days ago #1229 Update privacy policy page Website Redesign Closed 2 weeks ago 1 week ago #1228 Fix newsletter signup Website Redesign Closed 3 weeks ago 2 weeks ago

) } [V0_FILE]typescriptreact:file="app/dashboard/resources/page.tsx" isMerged="true" import { BarChart3, Clock, Package } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function ResourcesPage() { return (

Resources

Monitor project resource utilization and track hours remaining in your client bucket.

Total Hours Purchased

100

Current contract

Hours Used

57.5

57.5% of total hours

Hours Remaining

42.5

42.5% of total hours

Resource Utilization Hours used across your active projects Hours Percentage

Website Redesign

32.5 / 50 hours

E-commerce Integration

15 / 35 hours

SEO Optimization

10 / 15 hours

Website Redesign

65%

E-commerce Integration

42%

SEO Optimization

67%

Monthly Usage Hours used per month across all projects

{/* This would be a chart in a real application */}

Monthly usage chart would appear here

) } [V0_FILE]typescriptreact:file="app/dashboard/invoices/page.tsx" isMerged="true" import { Download, FileText, Filter, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" export default function InvoicesPage() { return (

Invoices

View and download your invoices from YohDev.

Filter by Status Paid Pending Overdue

Recent Invoices View and manage your recent invoices. Invoice # Date Amount Status Project Due Date INV-2024-001 Jan 15, 2024 $2,500.00 Paid Website Redesign Jan 30, 2024 INV-2024-002 Feb 15, 2024 $1,800.00 Paid E-commerce Integration Feb 28, 2024 INV-2024-003 Mar 15, 2024 $1,200.00 Pending SEO Optimization Mar 30, 2024

Payment History A record of all your payments to YohDev. Transaction ID Date Amount Method Invoice # TRX-2024-001 Jan 28, 2024 $2,500.00 Credit Card INV-2024-001 TRX-2024-002 Feb 25, 2024 $1,800.00 Bank Transfer INV-2024-002

) } [V0_FILE]typescriptreact:file="app/dashboard/contracts/page.tsx" isMerged="true" import { Calendar, Download, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" export default function ContractsPage() { return (

Contracts

View and manage your contracts with YohDev.

Active Contracts Your current active contracts with YohDev. Contract ID Project Start Date End Date Value Status CTR-2024-001 Website Redesign Jan 1, 2024 Jun 30, 2024 $12,000.00 Active CTR-2024-002 E-commerce Integration Feb 1, 2024 Jul 31, 2024 $8,500.00 Active CTR-2024-003 SEO Optimization Mar 1, 2024 Aug 31, 2024 $4,500.00 Active

Contract History Your past contracts with YohDev. Contract ID Project Start Date End Date Value Status CTR-2023-001 Website Maintenance Jan 1, 2023 Dec 31, 2023 $6,000.00 Completed CTR-2023-002 Content Creation Mar 1, 2023 Aug 31, 2023 $3,500.00 Completed

Contract Calendar Important dates related to your contracts.

Website Redesign - Milestone Review

April 15, 2024

E-commerce Integration - Final Delivery

July 31, 2024

SEO Optimization - Monthly Report

April 30, 2024

Contract Renewal Discussion

June 1, 2024

) } [V0_FILE]typescriptreact:file="app/dashboard/tickets/new/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" export default function NewTicketPage() { return (

Submit a New Ticket

Create a new support ticket for the YohDev team.

Ticket Details Provide details about your issue or request.

Title

Project

Priority

Description

</div>
          <div className="space-y-2">
            <Label htmlFor="attachments">Attachments</Label>
            <Input id="attachments" type="file" multiple />
            <p className="text-xs text-muted-foreground">
              You can upload multiple files (max 10MB each). Supported formats: JPG, PNG, PDF, DOC, DOCX.
            </p>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button>Submit Ticket</Button>
        </CardFooter>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

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

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }

[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[V0_FILE]typescriptreact:file="app/register/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ArrowLeft, ArrowRight, Building, CheckCircle, User } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function RegisterPage() {
  const router = useRouter()
  const [step, setStep] = useState(1)
  const [formData, setFormData] = useState({
    // Personal Info
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",

// Business Info
    companyName: "",
    website: "",
    industry: "",
    employeeCount: "",
    address: "",
    city: "",
    state: "",
    zipCode: "",

// Additional Info
    referralSource: "",
    projectDescription: "",
  })

// State to track if we're on a mobile device
  const [isMobile, setIsMobile] = useState(false)

// Check if we're on a mobile device on component mount
  useEffect(() => {
    const checkIfMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

checkIfMobile()
    window.addEventListener("resize", checkIfMobile)

return () => {
      window.removeEventListener("resize", checkIfMobile)
    }
  }, [])

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // In a real app, you would send the data to your backend
    console.log("Form submitted:", formData)
    router.push("/dashboard")
  }

const nextStep = () => setStep((prev) => Math.min(prev + 1, 3))
  const prevStep = () => setStep((prev) => Math.max(prev - 1, 1))

return (
    <div className="min-h-screen flex flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-2">
            <Link href="/" className="flex items-center gap-2">
              <span className="text-xl font-bold">YohDev</span>
              <span className="text-sm text-muted-foreground">Client Portal</span>
            </Link>
          </div>
          <div className="flex items-center gap-4">
            <Button asChild variant="ghost" size="sm">
              <Link href="/">
                <ArrowLeft className="mr-2 h-4 w-4" />
                Back to Home
              </Link>
            </Button>
          </div>
        </div>
      </header>

<main className="flex-1">
        <div className="container max-w-3xl mx-auto px-4 py-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold tracking-tight">Create Your Account</h1>
            <p className="text-muted-foreground">
              Register to access the YohDev client portal and manage your projects.
            </p>
          </div>

<div className="mb-8 sticky top-[4.5rem] bg-background pt-4 pb-4 z-10 border-b">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div
                  className={`flex h-10 w-10 items-center justify-center rounded-full ${step >= 1 ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
                >
                  {step > 1 ? <CheckCircle className="h-5 w-5" /> : <User className="h-5 w-5" />}
                </div>
                <span className={`${step >= 1 ? "font-medium" : "text-muted-foreground"} ${isMobile ? "text-xs" : ""}`}>
                  Personal
                </span>
              </div>
              <div className="h-px w-6 bg-muted md:w-24"></div>
              <div className="flex items-center gap-2">
                <div
                  className={`flex h-10 w-10 items-center justify-center rounded-full ${step >= 2 ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
                >
                  {step > 2 ? <CheckCircle className="h-5 w-5" /> : <Building className="h-5 w-5" />}
                </div>
                <span className={`${step >= 2 ? "font-medium" : "text-muted-foreground"} ${isMobile ? "text-xs" : ""}`}>
                  Business
                </span>
              </div>
              <div className="h-px w-6 bg-muted md:w-24"></div>
              <div className="flex items-center gap-2">
                <div
                  className={`flex h-10 w-10 items-center justify-center rounded-full ${step >= 3 ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
                >
                  <CheckCircle className="h-5 w-5" />
                </div>
                <span className={`${step >= 3 ? "font-medium" : "text-muted-foreground"} ${isMobile ? "text-xs" : ""}`}>
                  Confirm
                </span>
              </div>
            </div>
          </div>

<div className="sticky top-[10.5rem] pb-8">
            <form onSubmit={handleSubmit}>
              {step === 1 && (
                <Card className="shadow-sm">
                  <CardHeader>
                    <CardTitle>Personal Information</CardTitle>
                    <CardDescription>Please provide your personal details to create your account.</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                      <div className="space-y-2">
                        <Label htmlFor="firstName">First name</Label>
                        <Input
                          id="firstName"
                          name="firstName"
                          value={formData.firstName}
                          onChange={handleChange}
                          required
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="lastName">Last name</Label>
                        <Input
                          id="lastName"
                          name="lastName"
                          value={formData.lastName}
                          onChange={handleChange}
                          required
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        name="email"
                        type="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone number</Label>
                      <Input id="phone" name="phone" type="tel" value={formData.phone} onChange={handleChange} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="password">Password</Label>
                      <Input
                        id="password"
                        name="password"
                        type="password"
                        value={formData.password}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="confirmPassword">Confirm password</Label>
                      <Input
                        id="confirmPassword"
                        name="confirmPassword"
                        type="password"
                        value={formData.confirmPassword}
                        onChange={handleChange}
                        required
                      />
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={() => router.push("/")}>
                      Cancel
                    </Button>
                    <Button type="button" onClick={nextStep}>
                      Next Step
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </CardFooter>
                </Card>
              )}

{step === 2 && (
                <Card className="shadow-sm">
                  <CardHeader>
                    <CardTitle>Business Information</CardTitle>
                    <CardDescription>Tell us about your business so we can better serve you.</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="companyName">Company name</Label>
                      <Input
                        id="companyName"
                        name="companyName"
                        value={formData.companyName}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="website">Website</Label>
                      <Input id="website" name="website" type="url" value={formData.website} onChange={handleChange} />
                    </div>
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                      <div className="space-y-2">
                        <Label htmlFor="industry">Industry</Label>
                        <Input id="industry" name="industry" value={formData.industry} onChange={handleChange} />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="employeeCount">Number of employees</Label>
                        <Input
                          id="employeeCount"
                          name="employeeCount"
                          value={formData.employeeCount}
                          onChange={handleChange}
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="address">Address</Label>
                      <Input id="address" name="address" value={formData.address} onChange={handleChange} />
                    </div>
                    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                      <div className="space-y-2">
                        <Label htmlFor="city">City</Label>
                        <Input id="city" name="city" value={formData.city} onChange={handleChange} />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="state">State/Province</Label>
                        <Input id="state" name="state" value={formData.state} onChange={handleChange} />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="zipCode">ZIP/Postal code</Label>
                        <Input id="zipCode" name="zipCode" value={formData.zipCode} onChange={handleChange} />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="projectDescription">Tell us about your project needs</Label>
                      <Textarea
                        id="projectDescription"
                        name="projectDescription"
                        value={formData.projectDescription}
                        onChange={handleChange}
                        rows={4}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="referralSource">How did you hear about us?</Label>
                      <Input
                        id="referralSource"
                        name="referralSource"
                        value={formData.referralSource}
                        onChange={handleChange}
                      />
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={prevStep}>
                      <ArrowLeft className="mr-2 h-4 w-4" />
                      Previous Step
                    </Button>
                    <Button type="button" onClick={nextStep}>
                      Next Step
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  </CardFooter>
                </Card>
              )}

{step === 3 && (
                <Card className="shadow-sm">
                  <CardHeader>
                    <CardTitle>Review & Confirm</CardTitle>
                    <CardDescription>Please review your information before submitting.</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Tabs defaultValue="personal" className="w-full">
                      <TabsList className="grid w-full grid-cols-2">
                        <TabsTrigger value="personal">Personal Information</TabsTrigger>
                        <TabsTrigger value="business">Business Information</TabsTrigger>
                      </TabsList>
                      <TabsContent value="personal" className="space-y-4 pt-4">
                        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                          <div>
                            <h3 className="text-sm font-medium text-muted-foreground">First name</h3>
                            <p>{formData.firstName}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-muted-foreground">Last name</h3>
                            <p>{formData.lastName}</p>
                          </div>
                        </div>
                        <div>
                          <h3 className="text-sm font-medium text-muted-foreground">Email</h3>
                          <p>{formData.email}</p>
                        </div>
                        <div>
                          <h3 className="text-sm font-medium text-muted-foreground">Phone</h3>
                          <p>{formData.phone || "Not provided"}</p>
                        </div>
                      </TabsContent>
                      <TabsContent value="business" className="space-y-4 pt-4">
                        <div>
                          <h3 className="text-sm font-medium text-muted-foreground">Company name</h3>
                          <p>{formData.companyName}</p>
                        </div>
                        <div>
                          <h3 className="text-sm font-medium text-muted-foreground">Website</h3>
                          <p>{formData.website || "Not provided"}</p>
                        </div>
                        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                          <div>
                            <h3 className="text-sm font-medium text-muted-foreground">Industry</h3>
                            <p>{formData.industry || "Not provided"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-muted-foreground">Number of employees</h3>
                            <p>{formData.employeeCount || "Not provided"}</p>
                          </div>
                        </div>
                        <div>
                          <h3 className="text-sm font-medium text-muted-foreground">Address</h3>
                          <p>
                            {formData.address
                              ? `${formData.address}, ${formData.city || ""} ${formData.state || ""} ${formData.zipCode || ""}`
                              : "Not provided"}
                          </p>
                        </div>
                        <div>
                          <h3 className="text-sm font-medium text-muted-foreground">Project needs</h3>
                          <p>{formData.projectDescription || "Not provided"}</p>
                        </div>
                      </TabsContent>
                    </Tabs>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={prevStep}>
                      <ArrowLeft className="mr-2 h-4 w-4" />
                      Previous Step
                    </Button>
                    <Button type="submit">Complete Registration</Button>
                  </CardFooter>
                </Card>
              )}
            </form>
          </div>

{/* Add extra space at the bottom to allow scrolling */}
          <div className="h-[500px]"></div>
        </div>
      </main>

<footer className="border-t py-6 md:py-8">
        <div className="container flex flex-col items-center justify-center gap-4 md:flex-row md:justify-between">
          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
            © 2024 YohDev. All rights reserved.
          </p>
          <div className="flex items-center gap-4">
            <Link href="#" className="text-sm text-muted-foreground hover:underline">
              Terms of Service
            </Link>
            <Link href="#" className="text-sm text-muted-foreground hover:underline">
              Privacy Policy
            </Link>
            <Link href="#" className="text-sm text-muted-foreground hover:underline">
              Contact Us
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/account/page.tsx" isEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"

export default function AccountPage() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-2">
        <h1 className="text-3xl font-bold tracking-tight">Account</h1>
        <p className="text-muted-foreground">Manage your account settings and preferences.</p>
      </div>
      <Tabs defaultValue="profile" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="profile">Profile</TabsTrigger>
          <TabsTrigger value="company">Company</TabsTrigger>
          <TabsTrigger value="billing">Billing</TabsTrigger>
        </TabsList>
        <TabsContent value="profile" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Profile Information</CardTitle>
              <CardDescription>Update your personal information.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <Label htmlFor="first-name">First name</Label>
                  <Input id="first-name" defaultValue="John" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="last-name">Last name</Label>
                  <Input id="last-name" defaultValue="Doe" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input id="email" type="email" defaultValue="john.doe@example.com" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="phone">Phone</Label>
                <Input id="phone" type="tel" defaultValue="+1 (555) 123-4567" />
              </div>
            </CardContent>
            <CardFooter>
              <Button>Save Changes</Button>
            </CardFooter>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Password</CardTitle>
              <CardDescription>Update your password.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="current-password">Current password</Label>
                <Input id="current-password" type="password" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="new-password">New password</Label>
                <Input id="new-password" type="password" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="confirm-password">Confirm password</Label>
                <Input id="confirm-password" type="password" />
              </div>
            </CardContent>
            <CardFooter>
              <Button>Update Password</Button>
            </CardFooter>
          </Card>
        </TabsContent>
        <TabsContent value="company" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Company Information</CardTitle>
              <CardDescription>Update your company details.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="company-name">Company name</Label>
                <Input id="company-name" defaultValue="Acme Inc." />
              </div>
              <div className="space-y-2">
                <Label htmlFor="company-website">Website</Label>
                <Input id="company-website" type="url" defaultValue="https://acme.com" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="company-address">Address</Label>
                <Textarea id="company-address" defaultValue="123 Main St, Suite 100, Anytown, CA 12345" />
              </div>
            </CardContent>
            <CardFooter>
              <Button>Save Changes</Button>
            </CardFooter>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Team Members</CardTitle>
              <CardDescription>Manage team members who have access to your YohDev portal.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="rounded-lg border">
                <div className="flex items-center justify-between p-4">
                  <div className="space-y-1">
                    <p className="font-medium">John Doe</p>
                    <p className="text-sm text-muted-foreground">john.doe@example.com</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm">
                      Edit
                    </Button>
                    <Button variant="destructive" size="sm">
                      Remove
                    </Button>
                  </div>
                </div>
                <Separator />
                <div className="flex items-center justify-between p-4">
                  <div className="space-y-1">
                    <p className="font-medium">Jane Smith</p>
                    <p className="text-sm text-muted-foreground">jane.smith@example.com</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm">
                      Edit
                    </Button>
                    <Button variant="destructive" size="sm">
                      Remove
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button>Add Team Member</Button>
            </CardFooter>
          </Card>
        </TabsContent>
        <TabsContent value="billing" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Billing Information</CardTitle>
              <CardDescription>Update your billing details and payment methods.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="billing-email">Billing email</Label>
                <Input id="billing-email" type="email" defaultValue="billing@acme.com" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="billing-address">Billing address</Label>
                <Textarea id="billing-address" defaultValue="123 Main St, Suite 100, Anytown, CA 12345" />
              </div>
              <div className="space-y-2">
                <Label htmlFor="tax-id">Tax ID</Label>
                <Input id="tax-id" defaultValue="US123456789" />
              </div>
            </CardContent>
            <CardFooter>
              <Button>Save Changes</Button>
            </CardFooter>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Payment Methods</CardTitle>
              <CardDescription>Manage your payment methods.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="rounded-lg border">
                <div className="flex items-center justify-between p-4">
                  <div className="space-y-1">
                    <p className="font-medium">Credit Card</p>
                    <p className="text-sm text-muted-foreground">Visa ending in 4242</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm">
                      Edit
                    </Button>
                    <Button variant="destructive" size="sm">
                      Remove
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
            <CardFooter>
              <Button>Add Payment Method</Button>
            </CardFooter>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
</article></body></html>