Find and read ALL page.tsx, layout.tsx, loading.tsx, error.tsx, and not-found.tsx files in /home/ccuser/rateright-v2/src/app/. Read every single one completely. Also read any component files in src/components/. Report the full contents. Look for:
- Missing 'use client' directives where client hooks are used
- Server components using client-only hooks (useState, useEffect, etc)
- Client components importing server-only modules
- Missing loading states
- Missing error boundaries
- Hydration mismatch risks
- Broken imports


I'll systematically search for and read all the relevant files in the app directory and components folder. Let me start by finding all the files.


/home/ccuser/rateright-v2/src/app/layout.tsx
/home/ccuser/rateright-v2/src/app/(authenticated)/layout.tsx


No files found


Now let me read all the page.tsx, layout.tsx and component files:


1→import Link from "next/link";
     2→import { Button } from "@/components/ui/button";
     3→import { Card, CardContent } from "@/components/ui/card";
     4→import {
     5→  Building2,
     6→  HardHat,
     7→  Zap,
     8→  DollarSign,
     9→  Shield,
    10→  CheckCircle2,
    11→  Search,
    12→  ArrowRight,
    13→  Sparkles,
    14→  MapPin,
    15→  Clock,
    16→  Users,
    17→} from "lucide-react";
    18→
    19→export default function LandingPage() {
    20→  return (
    21→

    22→      {/* Orange accent bar */}
    23→

    24→
    25→      {/* Header */}
    26→
    27→

    28→          <Link href="/" className="flex items-center gap-2">
    29→

    30→              <HardHat className="h-5 w-5 text-primary-foreground" />
    31→

    32→            RateRight
    33→          </Link>
    34→          <Link href="/auth/login">
    35→            <Button variant="ghost" size="sm">
    36→              Sign in
    37→            </Button>
    38→          </Link>
    39→

    40→
    41→
    42→      {/* Hero */}
    43→

    44→

    45→

    46→            <MapPin className="h-3.5 w-3.5" />
    47→            Now live in Sydney
    48→

    49→
    50→

    51→            Hire construction workers{" "}
    52→            in seconds
    53→

    54→
    55→

    56→            AI builds profiles and finds matches.
    57→            You just tap hire. $50 flat fee per hire.
    58→

    59→
    60→          {/* CTA Buttons - BIG touch targets */}
    61→

    62→            <Link href="/contractor/signup">
    63→              <Button className="h-14 w-full gap-3 text-base font-semibold shadow-lg shadow-primary/25">
    64→                <Building2 className="h-6 w-6" />
    65→                I'm Hiring
    66→                <ArrowRight className="ml-auto h-5 w-5" />
    67→              </Button>
    68→            </Link>
    69→            <Link href="/worker/signup">
    70→              <Button
    71→                variant="outline"
    72→                className="h-14 w-full gap-3 border-2 text-base font-semibold"
    73→              >
    74→                <HardHat className="h-6 w-6" />
    75→                I'm Looking For Work
    76→                <ArrowRight className="ml-auto h-5 w-5" />
    77→              </Button>
    78→            </Link>
    79→

    80→
    81→

    82→            Free to sign up. Workers always free.
    83→

    84→

    85→

    86→
    87→      {/* How it works */}
    88→

    89→

    90→

    91→            How it works
    92→

    93→

    94→            Three steps. Under two minutes.
    95→

    96→
    97→

    98→            <Step
    99→              number="1"
   100→              icon={<Search className="h-5 w-5" />}
   101→              title="Tell us your company"
   102→              description="Enter your company name or ABN. AI researches your business and builds your profile automatically."
   103→            />
   104→            <Step
   105→              number="2"
   106→              icon={<Sparkles className="h-5 w-5" />}
   107→              title="AI finds the best matches"
   108→              description="Post a job in 60 seconds. Smart matching ranks workers by distance, experience, and ratings."
   109→            />
   110→            <Step
   111→              number="3"
   112→              icon={<CheckCircle2 className="h-5 w-5" />}
   113→              title="One tap to hire"
   114→              description="See top matches, tap hire, worker accepts. $50 flat fee — only charged when you hire."
   115→            />
   116→

   117→

   118→

   119→
   120→      {/* For Contractors */}
   121→

   122→

   123→

   124→            <Building2 className="h-5 w-5 text-primary" />
   125→
For Contractors

   126→

   127→

   128→            Stop wasting time hiring
   129→

   130→
   131→

   132→            <FeatureCard
   133→              icon={<Zap className="h-5 w-5 text-primary" />}
   134→              title="AI does the work"
   135→              description="Company research, job descriptions, worker matching — all automated."
   136→            />
   137→            <FeatureCard
   138→              icon={<DollarSign className="h-5 w-5 text-primary" />}
   139→              title="$50 flat fee per hire"
   140→              description="No subscriptions, no percentages. Free to post. Only pay when you hire."
   141→            />
   142→            <FeatureCard
   143→              icon={<Shield className="h-5 w-5 text-primary" />}
   144→              title="Verified workers"
   145→              description="White Card verification, ratings, and real experience on every profile."
   146→            />
   147→            <FeatureCard
   148→              icon={<Clock className="h-5 w-5 text-primary" />}
   149→              title="Hire by tomorrow"
   150→              description="Post a job now, get matched in minutes. Workers on site tomorrow."
   151→            />
   152→

   153→

   154→

   155→
   156→      {/* For Workers */}
   157→

   158→

   159→

   160→            <HardHat className="h-5 w-5 text-primary" />
   161→
For Workers

   162→

   163→

   164→            Get on a job fast
   165→

   166→

   167→            Sign up free. Get matched to jobs near you. Know what you'll earn.
   168→

   169→
   170→

   171→            <Benefit
   172→              icon={<DollarSign className="h-4 w-4" />}
   173→              text="Always free — $0 to sign up, $0 to get hired"
   174→            />
   175→            <Benefit
   176→              icon={<Clock className="h-4 w-4" />}
   177→              text="Answer 5 questions, your profile is done in 2 minutes"
   178→            />
   179→            <Benefit
   180→              icon={<MapPin className="h-4 w-4" />}
   181→              text="Get matched to jobs within kilometres of you"
   182→            />
   183→            <Benefit
   184→              icon={<Users className="h-4 w-4" />}
   185→              text="See the pay rate upfront — no guessing"
   186→            />
   187→

   188→
   189→          <Link href="/worker/signup">
   190→            <Button className="mt-8 h-12 w-full gap-2 text-base font-semibold">
   191→              <HardHat className="h-5 w-5" />
   192→              Sign up free
   193→            </Button>
   194→          </Link>
   195→

   196→

   197→
   198→      {/* Pricing */}
   199→

   200→

   201→
Simple pricing

   202→

   203→            No hidden fees. No lock-in. No percentages.
   204→

   205→
   206→          <Card className="mt-6 border-2 border-primary/20">
   207→            <CardContent className="pt-8 pb-8">
   208→
$50

   209→

   210→                per hire — that's it
   211→

   212→

   213→                <BenefitCheck text="Free to post jobs" />
   214→                <BenefitCheck text="Free to browse workers" />
   215→                <BenefitCheck text="Free for workers — always" />
   216→                <BenefitCheck text="Only pay when you confirm a hire" />
   217→                <BenefitCheck text="No monthly subscriptions" />
   218→

   219→            </CardContent>
   220→          </Card>
   221→

   222→

   223→
   224→      {/* Final CTA */}
   225→

   226→

   227→
Ready to hire smarter?

   228→

   229→            Join Sydney contractors already using RateRight.
   230→

   231→

   232→            <Link href="/contractor/signup" className="w-full sm:w-auto">
   233→              <Button
   234→                variant="secondary"
   235→                className="h-12 w-full gap-2 text-base font-semibold"
   236→              >
   237→                <Building2 className="h-5 w-5" />
   238→                Start hiring
   239→              </Button>
   240→            </Link>
   241→            <Link href="/worker/signup" className="w-full sm:w-auto">
   242→              <Button
   243→                variant="secondary"
   244→                className="h-12 w-full gap-2 text-base font-semibold"
   245→              >
   246→                <HardHat className="h-5 w-5" />
   247→                Find work
   248→              </Button>
   249→            </Link>
   250→

   251→

   252→

   253→
   254→      {/* Footer */}
   255→
   256→

   257→

   258→

   259→              <HardHat className="h-4 w-4 text-primary-foreground" />
   260→

   261→            RateRight
   262→

   263→

   264→            The simplest way to hire construction workers in Australia.
   265→

   266→

   267→            © {new Date().getFullYear()} RateRight Pty Ltd. All rights
   268→            reserved.
   269→

   270→

   271→
   272→

   273→  );
   274→}
   275→
   276→function Step({
   277→  number,
   278→  icon,
   279→  title,
   280→  description,
   281→}: {
   282→  number: string;
   283→  icon: React.ReactNode;
   284→  title: string;
   285→  description: string;
   286→}) {
   287→  return (
   288→

   289→

   290→        {number}
   291→

   292→

   293→

   294→          {icon}
   295→
{title}

   296→

   297→

   298→          {description}
   299→

   300→

   301→

   302→  );
   303→}
   304→
   305→function FeatureCard({
   306→  icon,
   307→  title,
   308→  description,
   309→}: {
   310→  icon: React.ReactNode;
   311→  title: string;
   312→  description: string;
   313→}) {
   314→  return (
   315→

   316→
{icon}

   317→

   318→
{title}

   319→
{description}

   320→

   321→

   322→  );
   323→}
   324→
   325→function Benefit({
   326→  icon,
   327→  text,
   328→}: {
   329→  icon: React.ReactNode;
   330→  text: string;
   331→}) {
   332→  return (
   333→

   334→
{icon}

   335→      {text}
   336→

   337→  );
   338→}
   339→
   340→function BenefitCheck({ text }: { text: string }) {
   341→  return (
   342→

   343→      <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
   344→      {text}
   345→

   346→  );
   347→}
   348→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


     1→import type { Metadata, Viewport } from "next";
     2→import { Geist, Geist_Mono } from "next/font/google";
     3→import "./globals.css";
     4→
     5→const geistSans = Geist({
     6→  variable: "--font-geist-sans",
     7→  subsets: ["latin"],
     8→});
     9→
    10→const geistMono = Geist_Mono({
    11→  variable: "--font-geist-mono",
    12→  subsets: ["latin"],
    13→});
    14→
    15→export const metadata: Metadata = {
    16→  title: "RateRight — Hire Construction Workers Fast",
    17→  description:
    18→    "The simplest way to hire construction workers in Australia. AI does the work, you just tap. $50 flat fee per hire.",
    19→  keywords: [
    20→    "construction hiring",
    21→    "hire labourers",
    22→    "construction workers Australia",
    23→    "hire tradies",
    24→    "construction jobs Sydney",
    25→  ],
    26→  manifest: "/manifest.json",
    27→  appleWebApp: {
    28→    capable: true,
    29→    statusBarStyle: "default",
    30→    title: "RateRight",
    31→  },
    32→  other: {
    33→    "mobile-web-app-capable": "yes",
    34→    "apple-mobile-web-app-capable": "yes",
    35→    "application-name": "RateRight",
    36→    "msapplication-starturl": "/",
    37→    "msapplication-TileColor": "#2563eb",
    38→    "theme-color": "#2563eb",
    39→  },
    40→};
    41→
    42→export const viewport: Viewport = {
    43→  width: "device-width",
    44→  initialScale: 1,
    45→  maximumScale: 1,
    46→  themeColor: "#2563eb",
    47→};
    48→
    49→export default function RootLayout({
    50→  children,
    51→}: Readonly<{
    52→  children: React.ReactNode;
    53→}>) {
    54→  return (
    55→    <html lang="en-AU">
    56→      <head>
    57→        <link rel="manifest" href="/manifest.json" />
    58→        <link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
    59→        <link rel="icon" type="image/svg+xml" href="/icon-192x192.svg" />
    60→        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    61→        <meta name="apple-mobile-web-app-title" content="RateRight" />
    62→        <meta name="mobile-web-app-capable" content="yes" />
    63→        <meta name="apple-mobile-web-app-capable" content="yes" />
    64→        <meta name="application-name" content="RateRight" />
    65→        <meta name="msapplication-starturl" content="/" />
    66→        <meta name="msapplication-TileColor" content="#2563eb" />
    67→        <meta name="theme-color" content="#2563eb" />
    68→      </head>
    69→      <body
    70→        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}
    71→      >
    72→        {children}
    73→        <script
    74→          dangerouslySetInnerHTML={{
    75→            __html: `
    76→              if ('serviceWorker' in navigator) {
    77→                window.addEventListener('load', () => {
    78→                  navigator.serviceWorker.register('/sw.js').then(
    79→                    (registration) => {
    80→                      console.log('SW registered:', registration);
    81→                    },
    82→                    (err) => {
    83→                      console.log('SW registration failed:', err);
    84→                    }
    85→                  );
    86→                });
    87→              }
    88→            `,
    89→          }}
    90→        />
    91→      </body>
    92→    </html>
    93→  );
    94→}
    95→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


1→import { redirect } from 'next/navigation'
     2→import { createClient } from '@/lib/supabase/server'
     3→import Link from 'next/link'
     4→import { Home, Briefcase, MessageSquare, User } from 'lucide-react'
     5→
     6→export default async function AuthenticatedLayout({
     7→  children,
     8→}: {
     9→  children: React.ReactNode
    10→}) {
    11→  const supabase = await createClient()
    12→  const { data: { user } } = await supabase.auth.getUser()
    13→
    14→  if (!user) {
    15→    redirect('/auth/login')
    16→  }
    17→
    18→  return (
    19→

    20→      {/* Header */}
    21→
    22→

    23→          <Link href="/dashboard" className="text-xl font-bold text-blue-600">
    24→            RateRight
    25→          </Link>
    26→          {user.email}
    27→

    28→
    29→
    30→      {/* Main Content */}
    31→
    32→        {children}
    33→
    34→
    35→      {/* Bottom Navigation */}
    36→
    37→

    38→          <Link href="/dashboard" className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600">
    39→            <Home className="w-6 h-6" />
    40→            Home
    41→          </Link>
    42→          <Link href="/contractor/post-job" className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600">
    43→            <Briefcase className="w-6 h-6" />
    44→            Jobs
    45→          </Link>
    46→          <Link href="/messages" className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600">
    47→            <MessageSquare className="w-6 h-6" />
    48→            Messages
    49→          </Link>
    50→          <Link href="/worker/profile/build" className="flex flex-col items-center p-2 text-gray-600 hover:text-blue-600">
    51→            <User className="w-6 h-6" />
    52→            Profile
    53→          </Link>
    54→

    55→
    56→

    57→  )
    58→}
    59→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


1→"use client";
     2→
     3→import { useState } from "react";
     4→import { useRouter } from "next/navigation";
     5→import Link from "next/link";
     6→import { createClient } from "@/lib/supabase/client";
     7→import { Button } from "@/components/ui/button";
     8→import { Input } from "@/components/ui/input";
     9→import { Label } from "@/components/ui/label";
    10→import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
    11→
    12→export default function LoginPage() {
    13→  const [email, setEmail] = useState("");
    14→  const [password, setPassword] = useState("");
    15→  const [error, setError] = useState<string | null>(null);
    16→  const [loading, setLoading] = useState(false);
    17→  const router = useRouter();
    18→  const supabase = createClient();
    19→
    20→  async function handleLogin(e: React.FormEvent) {
    21→    e.preventDefault();
    22→    setLoading(true);
    23→    setError(null);
    24→
    25→    const { data, error } = await supabase.auth.signInWithPassword({
    26→      email,
    27→      password,
    28→    });
    29→
    30→    if (error) {
    31→      setError(error.message);
    32→      setLoading(false);
    33→      return;
    34→    }
    35→
    36→    // Check if email is verified before allowing dashboard access
    37→    if (data.user && !data.user.email_confirmed_at) {
    38→      router.push("/auth/verify-email");
    39→      router.refresh();
    40→      return;
    41→    }
    42→
    43→    router.push("/dashboard");
    44→    router.refresh();
    45→  }
    46→
    47→  return (
    48→

    49→      <Card className="w-full max-w-sm">
    50→        <CardHeader className="text-center">
    51→          <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
    52→          <CardDescription>Sign in to your RateRight account</CardDescription>
    53→        </CardHeader>
    54→        <CardContent>
    55→          <form onSubmit={handleLogin} className="space-y-5">
    56→

    57→              Email
    58→              <Input
    59→                id="email"
    60→                type="email"
    61→                placeholder="you@example.com"
    62→                value={email}
    63→                onChange={(e) => setEmail(e.target.value)}
    64→                required
    65→                autoComplete="email"
    66→                className="h-14 text-base"
    67→              />
    68→

    69→

    70→              Password
    71→              <Input
    72→                id="password"
    73→                type="password"
    74→                placeholder="Your password"
    75→                value={password}
    76→                onChange={(e) => setPassword(e.target.value)}
    77→                required
    78→                autoComplete="current-password"
    79→                className="h-14 text-base"
    80→              />
    81→

    82→            {error && (
    83→
{error}

    84→            )}
    85→            <Button type="submit" className="w-full h-16 text-lg font-semibold" disabled={loading}>
    86→              {loading ? "Signing in..." : "Sign in"}
    87→            </Button>
    88→          </form>
    89→

    90→            Don't have an account?{" "}
    91→            <Link href="/auth/signup" className="text-primary underline hover:no-underline">
    92→              Sign up
    93→            </Link>
    94→

    95→        </CardContent>
    96→      </Card>
    97→

    98→  );
    99→}
   100→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


1→"use client";
     2→import { useState } from "react";
     3→import { useRouter } from "next/navigation";
     4→import Link from "next/link";
     5→import { createClient } from "@/lib/supabase/client";
     6→import { Button } from "@/components/ui/button";
     7→import { Input } from "@/components/ui/input";
     8→import { Label } from "@/components/ui/label";
     9→import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
    10→import { HardHat, Building2 } from "lucide-react";
    11→import type { UserType } from "@/lib/types";
    12→
    13→export default function SignupPage() {
    14→  const [email, setEmail] = useState("");
    15→  const [password, setPassword] = useState("");
    16→  const [userType, setUserType] = useState<UserType | null>(null);
    17→  const [error, setError] = useState<string | null>(null);
    18→  const [loading, setLoading] = useState(false);
    19→  const router = useRouter();
    20→  const supabase = createClient();
    21→
    22→  async function handleSignup(e: React.FormEvent) {
    23→    e.preventDefault();
    24→    if (!userType) {
    25→      setError("Please select whether you're hiring or looking for work");
    26→      return;
    27→    }
    28→
    29→    setLoading(true);
    30→    setError(null);
    31→
    32→    const { error } = await supabase.auth.signUp({
    33→      email,
    34→      password,
    35→      options: {
    36→        data: { type: userType },
    37→        emailRedirectTo: `${window.location.origin}/auth/callback`,
    38→      },
    39→    });
    40→
    41→    if (error) {
    42→      setError(error.message);
    43→      setLoading(false);
    44→      return;
    45→    }
    46→
    47→    // Redirect to email verification page instead of dashboard
    48→    router.push("/auth/verify-email");
    49→    router.refresh();
    50→  }
    51→
    52→  return (
    53→

    54→      <Card className="w-full max-w-md">
    55→        <CardHeader>
    56→          <CardTitle className="text-2xl font-bold text-center">Create your account</CardTitle>
    57→          <CardDescription className="text-center">
    58→            Sign up to find work or hire workers
    59→          </CardDescription>
    60→        </CardHeader>
    61→        <CardContent>
    62→          <form onSubmit={handleSignup} className="space-y-6">
    63→

    64→

    65→                Email address
    66→                <Input
    67→                  id="email"
    68→                  type="email"
    69→                  value={email}
    70→                  onChange={(e) => setEmail(e.target.value)}
    71→                  required
    72→                  placeholder="you@example.com"
    73→                />
    74→

    75→

    76→                Password
    77→                <Input
    78→                  id="password"
    79→                  type="password"
    80→                  value={password}
    81→                  onChange={(e) => setPassword(e.target.value)}
    82→                  required
    83→                  placeholder="••••••••"
    84→                  minLength={6}
    85→                />
    86→

    87→

    88→
    89→

    90→              I am a...
    91→

    92→                <Button
    93→                  type="button"
    94→                  variant={userType === "contractor" ? "default" : "outline"}
    95→                  onClick={() => setUserType("contractor")}
    96→                  className="h-24 flex-col gap-2"
    97→                >
    98→                  <Building2 className="h-6 w-6" />
    99→                  Contractor
   100→                  Hiring workers
   101→                </Button>
   102→                <Button
   103→                  type="button"
   104→                  variant={userType === "worker" ? "default" : "outline"}
   105→                  onClick={() => setUserType("worker")}
   106→                  className="h-24 flex-col gap-2"
   107→                >
   108→                  <HardHat className="h-6 w-6" />
   109→                  Worker
   110→                  Looking for work
   111→                </Button>
   112→

   113→

   114→
   115→            {error && (
   116→

   117→
{error}

   118→

   119→            )}
   120→
   121→            <Button type="submit" className="w-full" disabled={loading}>
   122→              {loading ? "Creating account..." : "Create account"}
   123→            </Button>
   124→
   125→

   126→              Already have an account?{" "}
   127→              <Link href="/auth/login" className="font-medium text-blue-600 hover:text-blue-500">
   128→                Sign in
   129→              </Link>
   130→

   131→          </form>
   132→        </CardContent>
   133→      </Card>
   134→

   135→  );
   136→}
   137→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


1→"use client";
     2→
     3→import { useState, useEffect } from "react";
     4→import { useRouter } from "next/navigation";
     5→import { createClient } from "@/lib/supabase/client";
     6→import { Button } from "@/components/ui/button";
     7→import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
     8→import { Mail, CheckCircle2, Clock } from "lucide-react";
     9→
    10→export default function VerifyEmailPage() {
    11→  const [emailSent, setEmailSent] = useState(false);
    12→  const [loading, setLoading] = useState(false);
    13→  const [error, setError] = useState<string | null>(null);
    14→  const router = useRouter();
    15→  const supabase = createClient();
    16→
    17→  useEffect(() => {
    18→    // Check if user is already logged in and email is verified
    19→    checkEmailStatus();
    20→  }, []);
    21→
    22→  async function checkEmailStatus() {
    23→    const { data: { user } } = await supabase.auth.getUser();
    24→
    25→    if (user?.email_confirmed_at) {
    26→      // Email is already verified, redirect to appropriate dashboard
    27→      const userType = user.user_metadata?.type;
    28→      if (userType === 'contractor') {
    29→        router.push('/contractor/dashboard');
    30→      } else if (userType === 'worker') {
    31→        router.push('/worker/dashboard');
    32→      } else {
    33→        router.push('/dashboard');
    34→      }
    35→    }
    36→  }
    37→
    38→  async function resendVerificationEmail() {
    39→    setLoading(true);
    40→    setError(null);
    41→
    42→    try {
    43→      const { data: { user } } = await supabase.auth.getUser();
    44→
    45→      if (!user) {
    46→        setError("No user found. Please log in again.");
    47→        setLoading(false);
    48→        return;
    49→      }
    50→
    51→      const { error } = await supabase.auth.resend({
    52→        type: 'signup',
    53→        email: user.email as string,
    54→      });
    55→
    56→      if (error) {
    57→        setError(error.message);
    58→      } else {
    59→        setEmailSent(true);
    60→      }
    61→    } catch (error) {
    62→      setError("Failed to resend verification email.");
    63→    } finally {
    64→      setLoading(false);
    65→    }
    66→  }
    67→
    68→  return (
    69→

    70→      <Card className="w-full max-w-md">
    71→        <CardHeader className="text-center">
    72→

    73→            <Mail className="h-6 w-6 text-blue-600" />
    74→

    75→          <CardTitle className="mt-6 text-3xl font-extrabold text-gray-900">
    76→            Check your email
    77→          </CardTitle>
    78→          <CardDescription className="mt-2 text-sm text-gray-600">
    79→            We've sent a verification email to your address. Please check your inbox and click the link to verify your email.
    80→          </CardDescription>
    81→        </CardHeader>
    82→        <CardContent className="space-y-6">
    83→

    84→

    85→              <Clock className="h-5 w-5 text-blue-400 mt-0.5" />
    86→

    87→
Didn't receive the email?

    88→

    89→
Check your spam folder or click the button below to resend the verification email.

    90→

    91→

    92→

    93→

    94→
    95→          {error && (
    96→

    97→

    98→

    99→
Error

   100→

   101→
{error}

   102→

   103→

   104→

   105→

   106→          )}
   107→
   108→          {emailSent && (
   109→

   110→

   111→                <CheckCircle2 className="h-5 w-5 text-green-400" />
   112→

   113→
Email sent!

   114→

   115→
We've resent the verification email. Please check your inbox.

   116→

   117→

   118→

   119→

   120→          )}
   121→
   122→

   123→            <Button
   124→              onClick={resendVerificationEmail}
   125→              disabled={loading || emailSent}
   126→              className="w-full"
   127→              variant="outline"
   128→            >
   129→              {loading ? "Sending..." : emailSent ? "Email sent" : "Resend verification email"}
   130→            </Button>
   131→
   132→            <Button
   133→              onClick={() => router.push('/auth/login')}
   134→              variant="ghost"
   135→              className="w-full"
   136→            >
   137→              Back to login
   138→            </Button>
   139→

   140→        </CardContent>
   141→      </Card>
   142→

   143→  );
   144→}
   145→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


1→import { redirect } from "next/navigation";
     2→import Link from "next/link";
     3→import { createClient } from "@/lib/supabase/server";
     4→import { Button } from "@/components/ui/button";
     5→import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
     6→import { Badge } from "@/components/ui/badge";
     7→import { Building2, HardHat, Plus, Briefcase, Users } from "lucide-react";
     8→import { SignOutButton } from "@/components/sign-out-button";
     9→import { BottomNavWrapper } from "@/components/bottom-nav-wrapper";
    10→
    11→export default async function DashboardPage() {
    12→  const supabase = await createClient();
    13→
    14→  const {
    15→    data: { user },
    16→  } = await supabase.auth.getUser();
    17→
    18→  if (!user) {
    19→    redirect("/auth/login");
    20→  }
    21→
    22→  const { data: profile } = await supabase
    23→    .from("profiles")
    24→    .select("*")
    25→    .eq("id", user.id)
    26→    .single();
    27→
    28→  const isContractor = profile?.type === "contractor";
    29→
    30→  // Fetch stats
    31→  let jobCount = 0;
    32→  let matchCount = 0;
    33→
    34→  if (isContractor) {
    35→    const { data: company } = await supabase
    36→      .from("companies")
    37→      .select("id")
    38→      .eq("profile_id", user.id)
    39→      .single();
    40→
    41→    if (company) {
    42→      const { count } = await supabase
    43→        .from("jobs")
    44→        .select("*", { count: "exact", head: true })
    45→        .eq("company_id", company.id)
    46→        .eq("status", "active");
    47→      jobCount = count || 0;
    48→
    49→      const { count: mCount } = await supabase
    50→        .from("matches")
    51→        .select("*, jobs!inner(company_id)", { count: "exact", head: true })
    52→        .eq("jobs.company_id", company.id)
    53→        .in("status", ["applied", "suggested"]);
    54→      matchCount = mCount || 0;
    55→    }
    56→  }
    57→
    58→  return (
    59→

    60→      {/* Header */}
    61→
    62→

    63→          <Link href="/dashboard" className="text-xl font-bold tracking-tight">
    64→            RateRight
    65→          </Link>
    66→

    67→            <Badge variant="secondary" className="text-sm py-1.5 px-3">
    68→              {isContractor ? "Contractor" : "Worker"}
    69→            </Badge>
    70→            <SignOutButton />
    71→

    72→

    73→
    74→
    75→
    76→

    77→          G'day{profile?.name ? `, ${profile.name}` : ""}!
    78→

    79→

    80→          {isContractor
    81→            ? "Ready to find your next worker?"
    82→            : "Let's get you on a job."}
    83→

    84→
    85→

    86→          {isContractor ? (
    87→            <>
    88→              {/* Quick stats */}
    89→

    90→                <Card>
    91→                  <CardContent className="flex flex-col items-center p-4">
    92→                    {jobCount}
    93→                    Active Jobs
    94→                  </CardContent>
    95→                </Card>
    96→                <Card>
    97→                  <CardContent className="flex flex-col items-center p-4">
    98→                    {matchCount}
    99→                    New Matches
   100→                  </CardContent>
   101→                </Card>
   102→

   103→
   104→              {/* Post a Job CTA */}
   105→              <Card className="border-primary/30 bg-primary/5">
   106→                <CardHeader className="pb-3">
   107→                  <CardTitle className="flex items-center gap-2 text-lg">
   108→                    <Plus className="h-6 w-6" />
   109→                    Post a Job
   110→                  </CardTitle>
   111→                  <CardDescription className="text-base">
   112→                    AI writes the post. You just tap.
   113→                  </CardDescription>
   114→                </CardHeader>
   115→                <CardContent>
   116→                  <Button asChild className="w-full h-16 text-lg font-semibold">
   117→                    <Link href="/contractor/post-job">Post a Job</Link>
   118→                  </Button>
   119→                </CardContent>
   120→              </Card>
   121→
   122→              {/* View Matches */}
   123→              {matchCount > 0 && (
   124→                <Card>
   125→                  <CardHeader className="pb-3">
   126→                    <CardTitle className="flex items-center gap-2 text-lg">
   127→                      <Users className="h-6 w-6" />
   128→                      {matchCount} Worker{matchCount > 1 ? "s" : ""} Matched
   129→                    </CardTitle>
   130→                    <CardDescription className="text-base">
   131→                      Workers have applied to your jobs
   132→                    </CardDescription>
   133→                  </CardHeader>
   134→                  <CardContent>
   135→                    <Button asChild variant="outline" className="w-full h-14 text-base font-semibold">
   136→                      <Link href="/contractor/matches">View Matches</Link>
   137→                    </Button>
   138→                  </CardContent>
   139→                </Card>
   140→              )}
   141→
   142→              {/* Company profile */}
   143→              <Card>
   144→                <CardHeader className="pb-3">
   145→                  <CardTitle className="flex items-center gap-2 text-lg">
   146→                    <Building2 className="h-6 w-6" />
   147→                    Company Profile
   148→                  </CardTitle>
   149→                  <CardDescription className="text-base">
   150→                    Manage your company details
   151→                  </CardDescription>
   152→                </CardHeader>
   153→                <CardContent>
   154→                  <Button variant="outline" className="w-full h-14 text-base">
   155→                    Edit Profile
   156→                  </Button>
   157→                </CardContent>
   158→              </Card>
   159→            </>
   160→          ) : (
   161→            <>
   162→              {/* Browse Jobs CTA */}
   163→              <Card className="border-primary/30 bg-primary/5">
   164→                <CardHeader className="pb-3">
   165→                  <CardTitle className="flex items-center gap-2 text-lg">
   166→                    <Briefcase className="h-6 w-6" />
   167→                    Find Work
   168→                  </CardTitle>
   169→                  <CardDescription className="text-base">
   170→                    Browse available construction jobs near you
   171→                  </CardDescription>
   172→                </CardHeader>
   173→                <CardContent>
   174→                  <Button asChild className="w-full h-16 text-lg font-semibold">
   175→                    <Link href="/worker/jobs">Browse Jobs</Link>
   176→                  </Button>
   177→                </CardContent>
   178→              </Card>
   179→
   180→              {/* Profile */}
   181→              <Card>
   182→                <CardHeader className="pb-3">
   183→                  <CardTitle className="flex items-center gap-2 text-lg">
   184→                    <HardHat className="h-6 w-6" />
   185→                    Your Profile
   186→                  </CardTitle>
   187→                  <CardDescription className="text-base">
   188→                    A strong profile gets you more matches
   189→                  </CardDescription>
   190→                </CardHeader>
   191→                <CardContent>
   192→                  <Button variant="outline" className="w-full h-14 text-base">
   193→                    Edit Profile
   194→                  </Button>
   195→                </CardContent>
   196→              </Card>
   197→            </>
   198→          )}
   199→

   200→
   201→
   202→      <BottomNavWrapper userType={profile?.type || "worker"} />
   203→

   204→  );
   205→}
   206→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


1→"use client";
     2→
     3→import { useState, useEffect } from "react";
     4→import { useRouter } from "next/navigation";
     5→import Link from "next/link";
     6→import { createClient } from "@/lib/supabase/client";
     7→import { Button } from "@/components/ui/button";
     8→import { Input } from "@/components/ui/input";
     9→import { Label } from "@/components/ui/label";
    10→import { Card, CardContent } from "@/components/ui/card";
    11→import {
    12→  HardHat,
    13→  ArrowLeft,
    14→  ArrowRight,
    15→  Loader2,
    16→  CheckCircle2,
    17→  Sparkles,
    18→  MapPin,
    19→  Clock,
    20→  Shield,
    21→  Edit3,
    22→  Wrench,
    23→  Calendar,
    24→  Zap,
    25→} from "lucide-react";
    26→
    27→type Step = "trade" | "experience" | "location" | "availability" | "generating" | "review";
    28→
    29→const TRADES = [
    30→  "Labourer",
    31→  "Steel Fixer",
    32→  "Formworker",
    33→  "Carpenter",
    34→  "Electrician",
    35→  "Plumber",
    36→  "Concreter",
    37→  "Bricklayer",
    38→  "Painter",
    39→  "Roofer",
    40→  "Scaffolder",
    41→  "Tiler",
    42→  "Plasterer",
    43→  "Welder",
    44→  "Crane Operator",
    45→  "Excavator Operator",
    46→];
    47→
    48→const EXPERIENCE_OPTIONS = [
    49→  { label: "Less than 1 year", value: 0 },
    50→  { label: "1-3 years", value: 2 },
    51→  { label: "3-5 years", value: 4 },
    52→  { label: "5-10 years", value: 7 },
    53→  { label: "10+ years", value: 12 },
    54→];
    55→
    56→const AVAILABILITY_OPTIONS = [
    57→  { label: "Full-time", value: "full-time" as const, desc: "Mon-Fri, regular hours" },
    58→  { label: "Casual", value: "casual" as const, desc: "As needed, flexible" },
    59→  { label: "Weekends", value: "weekends" as const, desc: "Saturday & Sunday" },
    60→  { label: "Flexible", value: "flexible" as const, desc: "Any time, any days" },
    61→];
    62→
    63→interface ProfileData {
    64→  trade: string;
    65→  experience: number;
    66→  location: string;
    67→  availability: "full-time" | "casual" | "weekends" | "flexible";
    68→}
    69→
    70→interface GeneratedProfile {
    71→  bio: string;
    72→  skills: string[];
    73→  certifications: string[];
    74→}
    75→
    76→export default function ProfileBuildPage() {
    77→  const [step, setStep] = useState<Step>("trade");
    78→  const [loading, setLoading] = useState(true);
    79→  const [generating, setGenerating] = useState(false);
    80→  const [saving, setSaving] = useState(false);
    81→
    82→  // Form data
    83→  const [trade, setTrade] = useState<string>("");
    84→  const [experience, setExperience] = useState<number | null>(null);
    85→  const [location, setLocation] = useState("");
    86→  const [availability, setAvailability] = useState<ProfileData["availability"] | null>(null);
    87→
    88→  // Generated data
    89→  const [generatedBio, setGeneratedBio] = useState("");
    90→  const [generatedSkills, setGeneratedSkills] = useState<string[]>([]);
    91→  const [generatedCerts, setGeneratedCerts] = useState<string[]>([]);
    92→
    93→  // Editable states
    94→  const [editedBio, setEditedBio] = useState("");
    95→  const [editedSkills, setEditedSkills] = useState<string[]>([]);
    96→  const [editedCerts, setEditedCerts] = useState<string[]>([]);
    97→
    98→  const router = useRouter();
    99→  const supabase = createClient();
   100→
   101→  useEffect(() => {
   102→    async function checkAuth() {
   103→      const {
   104→        data: { user },
   105→      } = await supabase.auth.getUser();
   106→      if (!user) {
   107→        router.push("/auth/login");
   108→        return;
   109→      }
   110→      setLoading(false);
   111→    }
   112→    checkAuth();
   113→  }, [supabase.auth, router]);
   114→
   115→  async function generateProfile() {
   116→    if (!trade || experience === null || !location || !availability) return;
   117→
   118→    setGenerating(true);
   119→    setStep("generating");
   120→
   121→    try {
   122→      const response = await fetch("/api/ai/generate-profile", {
   123→        method: "POST",
   124→        headers: { "Content-Type": "application/json" },
   125→        body: JSON.stringify({
   126→          trade,
   127→          experience,
   128→          location,
   129→          availability,
   130→        }),
   131→      });
   132→
   133→      if (!response.ok) {
   134→        throw new Error("Failed to generate profile");
   135→      }
   136→
   137→      const data: GeneratedProfile = await response.json();
   138→
   139→      setGeneratedBio(data.bio);
   140→      setGeneratedSkills(data.skills);
   141→      setGeneratedCerts(data.certifications);
   142→
   143→      // Initialize editable versions
   144→      setEditedBio(data.bio);
   145→      setEditedSkills(data.skills);
   146→      setEditedCerts(data.certifications);
   147→
   148→      setStep("review");
   149→    } catch (error) {
   150→      console.error("Generation error:", error);
   151→      alert("Failed to generate profile. Please try again.");
   152→      setStep("availability");
   153→    } finally {
   154→      setGenerating(false);
   155→    }
   156→  }
   157→
   158→  async function handleSave() {
   159→    setSaving(true);
   160→
   161→    try {
   162→      const {
   163→        data: { user },
   164→      } = await supabase.auth.getUser();
   165→      if (!user) throw new Error("Not authenticated");
   166→
   167→      // Update or create worker profile
   168→      const { data: existingProfile } = await supabase
   169→        .from("worker_profiles")
   170→        .select("id")
   171→        .eq("profile_id", user.id)
   172→        .single();
   173→
   174→      const profileData = {
   175→        profile_id: user.id,
   176→        trades: [trade],
   177→        experience_years: experience,
   178→        availability,
   179→        certifications: editedCerts,
   180→        bio: editedBio,
   181→        ai_extracted: {
   182→          skills: editedSkills,
   183→          generated_at: new Date().toISOString(),
   184→          original_bio: generatedBio,
   185→          original_skills: generatedSkills,
   186→          original_certs: generatedCerts,
   187→        },
   188→      };
   189→
   190→      if (existingProfile) {
   191→        await supabase
   192→          .from("worker_profiles")
   193→          .update(profileData)
   194→          .eq("profile_id", user.id);
   195→      } else {
   196→        await supabase.from("worker_profiles").insert(profileData);
   197→      }
   198→
   199→      // Update main profile
   200→      await supabase
   201→        .from("profiles")
   202→        .update({
   203→          suburb: location,
   204→          onboarding_completed: true,
   205→        })
   206→        .eq("id", user.id);
   207→
   208→      router.push("/dashboard");
   209→      router.refresh();
   210→    } catch (error) {
   211→      console.error("Save error:", error);
   212→      alert("Failed to save profile. Please try again.");
   213→    } finally {
   214→      setSaving(false);
   215→    }
   216→  }
   217→
   218→  const stepOrder: Step[] = ["trade", "experience", "location", "availability", "generating", "review"];
   219→  const currentIndex = stepOrder.indexOf(step);
   220→  const totalSteps = 4; // Only count user-facing steps
   221→
   222→  if (loading) {
   223→    return (
   224→

   225→        <Loader2 className="h-8 w-8 animate-spin text-primary" />
   226→

   227→    );
   228→  }
   229→
   230→  return (
   231→

   232→      {/* Header */}
   233→
   234→

   235→          <Link href="/dashboard" className="flex items-center gap-2">
   236→

   237→              <HardHat className="h-5 w-5 text-primary-foreground" />
   238→

   239→            RateRight
   240→          </Link>
   241→

   242→
   243→
   244→
   245→        {/* Progress bar */}
   246→        {step !== "generating" && step !== "review" && (
   247→

   248→            {Array.from({ length: totalSteps }, (_, i) => (
   249→              <div
   250→                key={i}
   251→                className={`h-1.5 flex-1 rounded-full transition-colors ${
   252→                  i <= currentIndex ? "bg-primary" : "bg-muted"
   253→                }`}
   254→              />
   255→            ))}
   256→

   257→        )}
   258→
   259→        {/* Step: Trade */}
   260→        {step === "trade" && (
   261→

   262→            <StepHeader
   263→              icon={<Wrench className="h-5 w-5" />}
   264→              title="What's your trade?"
   265→              subtitle="Pick your primary trade"
   266→            />
   267→
   268→

   269→              {TRADES.map((t) => (
   270→                <button
   271→                  key={t}
   272→                  onClick={() => {
   273→                    setTrade(t);
   274→                    setStep("experience");
   275→                  }}
   276→                  className={`rounded-xl border-2 px-4 py-4 text-left text-base font-medium transition-colors active:scale-95 ${
   277→                    trade === t
   278→                      ? "border-primary bg-primary/10 text-primary"
   279→                      : "border-border hover:border-primary/50"
   280→                  }`}
   281→                  style={{ minHeight: "64px" }}
   282→                >
   283→                  {t}
   284→                </button>
   285→              ))}
   286→

   287→

   288→        )}
   289→
   290→        {/* Step: Experience */}
   291→        {step === "experience" && (
   292→

   293→            <StepHeader
   294→              icon={<Clock className="h-5 w-5" />}
   295→              title="Your experience?"
   296→              subtitle="Years in construction"
   297→            />
   298→
   299→

   300→              {EXPERIENCE_OPTIONS.map((opt) => (
   301→                <button
   302→                  key={opt.value}
   303→                  onClick={() => {
   304→                    setExperience(opt.value);
   305→                    setStep("location");
   306→                  }}
   307→                  className={`flex w-full items-center justify-between rounded-xl border-2 px-5 text-left text-base font-medium transition-colors active:scale-95 ${
   308→                    experience === opt.value
   309→                      ? "border-primary bg-primary/10 text-primary"
   310→                      : "border-border hover:border-primary/50"
   311→                  }`}
   312→                  style={{ minHeight: "64px" }}
   313→                >
   314→                  {opt.label}
   315→                  <ArrowRight className="h-5 w-5 text-muted-foreground" />
   316→                </button>
   317→              ))}
   318→

   319→
   320→            <button
   321→              onClick={() => setStep("trade")}
   322→              className="mt-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
   323→            >
   324→              <ArrowLeft className="h-4 w-4" />
   325→              Back
   326→            </button>
   327→

   328→        )}
   329→
   330→        {/* Step: Location */}
   331→        {step === "location" && (
   332→

   333→            <StepHeader
   334→              icon={<MapPin className="h-5 w-5" />}
   335→              title="Where are you based?"
   336→              subtitle="Your suburb or area"
   337→            />
   338→
   339→            <form
   340→              onSubmit={(e) => {
   341→                e.preventDefault();
   342→                if (location.trim()) setStep("availability");
   343→              }}
   344→              className="mt-6 space-y-4"
   345→            >
   346→

   347→                Suburb or Area
   348→                <Input
   349→                  id="location"
   350→                  placeholder="e.g. Parramatta, Blacktown"
   351→                  value={location}
   352→                  onChange={(e) => setLocation(e.target.value)}
   353→                  required
   354→                  autoFocus
   355→                  className="h-14 text-base"
   356→                />
   357→

   358→

   359→                We'll match you to nearby jobs
   360→

   361→
   362→

   363→                <Button
   364→                  type="button"
   365→                  variant="outline"
   366→                  onClick={() => setStep("experience")}
   367→                  className="h-14 w-14 p-0"
   368→                >
   369→                  <ArrowLeft className="h-5 w-5" />
   370→                </Button>
   371→                <Button
   372→                  type="submit"
   373→                  disabled={!location.trim()}
   374→                  className="h-14 flex-1 gap-2 text-base font-semibold"
   375→                >
   376→                  Continue
   377→                  <ArrowRight className="h-5 w-5" />
   378→                </Button>
   379→

   380→            </form>
   381→

   382→        )}
   383→
   384→        {/* Step: Availability */}
   385→        {step === "availability" && (
   386→

   387→            <StepHeader
   388→              icon={<Calendar className="h-5 w-5" />}
   389→              title="Your availability?"
   390→              subtitle="When can you work?"
   391→            />
   392→
   393→

   394→              {AVAILABILITY_OPTIONS.map((opt) => (
   395→                <button
   396→                  key={opt.value}
   397→                  onClick={() => {
   398→                    setAvailability(opt.value);
   399→                    generateProfile();
   400→                  }}
   401→                  className={`flex w-full items-start justify-between rounded-xl border-2 px-5 py-4 text-left transition-colors active:scale-95 ${
   402→                    availability === opt.value
   403→                      ? "border-primary bg-primary/10"
   404→                      : "border-border hover:border-primary/50"
   405→                  }`}
   406→                  style={{ minHeight: "64px" }}
   407→                >
   408→

   409→                    <p className={`text-base font-semibold ${availability === opt.value ? "text-primary" : ""}`}>
   410→                      {opt.label}
   411→

   412→
{opt.desc}

   413→

   414→                  <Zap className="h-5 w-5 shrink-0 text-primary" />
   415→                </button>
   416→              ))}
   417→

   418→
   419→            <button
   420→              onClick={() => setStep("location")}
   421→              className="mt-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
   422→            >
   423→              <ArrowLeft className="h-4 w-4" />
   424→              Back
   425→            </button>
   426→

   427→        )}
   428→
   429→        {/* Step: Generating */}
   430→        {step === "generating" && (
   431→

   432→

   433→              <Sparkles className="h-10 w-10 animate-pulse text-primary" />
   434→

   435→
Building your profile...

   436→

   437→              AI is generating your bio, skills, and certifications
   438→

   439→

   440→

   441→

   442→

   443→

   444→

   445→        )}
   446→
   447→        {/* Step: Review */}
   448→        {step === "review" && (
   449→

   450→

   451→

   452→                <Sparkles className="h-5 w-5" />
   453→

   454→

   455→
Review & Edit

   456→

   457→                  AI generated this — customize as needed
   458→

   459→

   460→

   461→
   462→            {/* Your Answers Summary */}
   463→            <Card className="mt-6">
   464→              <CardContent className="space-y-3 pt-6">
   465→

   466→

   467→                    <Wrench className="h-4 w-4 text-muted-foreground" />
   468→                    {trade}
   469→

   470→                  <button
   471→                    onClick={() => setStep("trade")}
   472→                    className="text-xs text-primary hover:underline"
   473→                  >
   474→                    Change
   475→                  </button>
   476→

   477→

   478→

   479→                    <Clock className="h-4 w-4 text-muted-foreground" />
   480→
   481→                      {EXPERIENCE_OPTIONS.find((o) => o.value === experience)?.label}
   482→
   483→

   484→                  <button
   485→                    onClick={() => setStep("experience")}
   486→                    className="text-xs text-primary hover:underline"
   487→                  >
   488→                    Change
   489→                  </button>
   490→

   491→

   492→

   493→                    <MapPin className="h-4 w-4 text-muted-foreground" />
   494→                    {location}
   495→

   496→                  <button
   497→                    onClick={() => setStep("location")}
   498→                    className="text-xs text-primary hover:underline"
   499→                  >
   500→                    Change
   501→                  </button>
   502→

   503→              </CardContent>
   504→            </Card>
   505→
   506→            {/* Bio */}
   507→

   508→

   509→
   510→                  <Sparkles className="h-4 w-4 text-primary" />
   511→                  Your Bio
   512→
   513→                AI-generated
   514→

   515→              <textarea
   516→                value={editedBio}
   517→                onChange={(e) => setEditedBio(e.target.value)}
   518→                className="min-h-[120px] w-full rounded-xl border-2 border-border bg-background px-4 py-3 text-base focus:border-primary focus:outline-none"
   519→                placeholder="Your professional bio..."
   520→              />
   521→

   522→
   523→            {/* Skills */}
   524→

   525→

   526→
   527→                  <Zap className="h-4 w-4 text-primary" />
   528→                  Skills
   529→
   530→                Tap to remove
   531→

   532→

   533→                {editedSkills.map((skill, idx) => (
   534→                  <button
   535→                    key={idx}
   536→                    onClick={() => setEditedSkills(editedSkills.filter((_, i) => i !== idx))}
   537→                    className="rounded-full border-2 border-primary bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition-colors hover:bg-primary/20 active:scale-95"
   538→                  >
   539→                    {skill} ×
   540→                  </button>
   541→                ))}
   542→

   543→

   544→
   545→            {/* Certifications */}
   546→

   547→

   548→
   549→                  <Shield className="h-4 w-4 text-primary" />
   550→                  Certifications
   551→
   552→                Tap to remove
   553→

   554→

   555→                {editedCerts.map((cert, idx) => (
   556→                  <button
   557→                    key={idx}
   558→                    onClick={() => setEditedCerts(editedCerts.filter((_, i) => i !== idx))}
   559→                    className="flex w-full items-center justify-between rounded-xl border-2 border-border bg-background px-4 py-3 text-left text-sm font-medium transition-colors hover:border-destructive hover:bg-destructive/5 active:scale-95"
   560→                  >
   561→                    {cert}
   562→                    Remove
   563→                  </button>
   564→                ))}
   565→

   566→

   567→

   568→        )}
   569→
   570→
   571→      {/* Bottom sticky CTA - only show on review step */}
   572→      {step === "review" && (
   573→

   574→

   575→            <Button
   576→              onClick={handleSave}
   577→              className="h-16 w-full gap-2 text-lg font-semibold"
   578→              disabled={saving}
   579→            >
   580→              {saving ? (
   581→                <>
   582→                  <Loader2 className="h-6 w-6 animate-spin" />
   583→                  Saving profile...
   584→                </>
   585→              ) : (
   586→                <>
   587→                  <CheckCircle2 className="h-6 w-6" />
   588→                  Save My Profile
   589→                </>
   590→              )}
   591→            </Button>
   592→

   593→

   594→      )}
   595→

   596→  );
   597→}
   598→
   599→function StepHeader({
   600→  icon,
   601→  title,
   602→  subtitle,
   603→}: {
   604→  icon: React.ReactNode;
   605→  title: string;
   606→  subtitle: string;
   607→}) {
   608→  return (
   609→

   610→

   611→        {icon}
   612→

   613→

   614→
{title}

   615→
{subtitle}

   616→

   617→

   618→  );
   619→}
   620→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>


1→"use client";
     2→
     3→import { useState, useEffect } from "react";
     4→import { useRouter } from "next/navigation";
     5→import Link from "next/link";
     6→import { createClient } from "@/lib/supabase/client";
     7→import { Button } from "@/components/ui/button";
     8→import { Input } from "@/components/ui/input";
     9→import { Label } from "@/components/ui/label";
    10→import { Card, CardContent } from "@/components/ui/card";
    11→import {
    12→  HardHat,
    13→  Keyboard,
    14→  Mic,
    15→  ArrowLeft,
    16→  ArrowRight,
    17→  Loader2,
    18→  CheckCircle2,
    19→  Sparkles,
    20→  MapPin,
    21→  Clock,
    22→  Shield,
    23→  Edit3,
    24→  Wrench,
    25→  Calendar,
    26→  Globe2,
    27→} from "lucide-react";
    28→
    29→type Step = "auth" | "method" | "trade" | "experience" | "location" | "availability" | "certs" | "review";
    30→
    31→const TRADES = [
    32→  "Labourer",
    33→  "Steel Fixer",
    34→  "Formworker",
    35→  "Carpenter",
    36→  "Electrician",
    37→  "Plumber",
    38→  "Concreter",
    39→  "Bricklayer",
    40→  "Painter",
    41→  "Roofer",
    42→  "Scaffolder",
    43→  "Tiler",
    44→  "Plasterer",
    45→  "Welder",
    46→  "Crane Operator",
    47→  "Excavator Operator",
    48→];
    49→
    50→const EXPERIENCE_OPTIONS = [
    51→  { label: "Less than 1 year", value: 0 },
    52→  { label: "1-3 years", value: 2 },
    53→  { label: "3-5 years", value: 4 },
    54→  { label: "5-10 years", value: 7 },
    55→  { label: "10+ years", value: 12 },
    56→];
    57→
    58→const AVAILABILITY_OPTIONS = [
    59→  { label: "Full-time", value: "full-time" as const, desc: "Mon-Fri, regular hours" },
    60→  { label: "Casual", value: "casual" as const, desc: "As needed, flexible" },
    61→  { label: "Weekends", value: "weekends" as const, desc: "Saturday & Sunday" },
    62→  { label: "Flexible", value: "flexible" as const, desc: "Any time, any days" },
    63→];
    64→
    65→const CERT_OPTIONS = [
    66→  "White Card",
    67→  "Forklift Licence",
    68→  "EWP (Elevated Work Platform)",
    69→  "Working at Heights",
    70→  "First Aid",
    71→  "Traffic Control",
    72→  "Rigging",
    73→  "Dogging",
    74→  "Confined Spaces",
    75→];
    76→
    77→interface WorkerData {
    78→  trades: string[];
    79→  experience: number;
    80→  suburb: string;
    81→  availability: "full-time" | "casual" | "weekends" | "flexible";
    82→  certifications: string[];
    83→}
    84→
    85→function generateBio(data: WorkerData): string {
    86→  const tradeStr = data.trades.join(" and ");
    87→  const expStr =
    88→    data.experience === 0
    89→      ? "under 1 year"
    90→      : data.experience >= 12
    91→        ? "10+ years"
    92→        : `${data.experience} years`;
    93→  const certStr =
    94→    data.certifications.length > 0
    95→      ? ` Holds ${data.certifications.join(", ")}.`
    96→      : "";
    97→
    98→  return `Experienced ${tradeStr.toLowerCase()} with ${expStr} in the construction industry. Based in ${data.suburb}, available for ${data.availability} work.${certStr}`;
    99→}
   100→
   101→export default function WorkerSignupPage() {
   102→  const [step, setStep] = useState<Step>("auth");
   103→  const [isAuthenticated, setIsAuthenticated] = useState(false);
   104→  const [loading, setLoading] = useState(true);
   105→
   106→  // Auth state
   107→  const [email, setEmail] = useState("");
   108→  const [password, setPassword] = useState("");
   109→  const [authError, setAuthError] = useState<string | null>(null);
   110→  const [authLoading, setAuthLoading] = useState(false);
   111→
   112→  // Worker data
   113→  const [selectedTrades, setSelectedTrades] = useState<string[]>([]);
   114→  const [experience, setExperience] = useState<number | null>(null);
   115→  const [suburb, setSuburb] = useState("");
   116→  const [availability, setAvailability] = useState<WorkerData["availability"] | null>(null);
   117→  const [certifications, setCertifications] = useState<string[]>([]);
   118→
   119→  const [saving, setSaving] = useState(false);
   120→
   121→  const router = useRouter();
   122→  const supabase = createClient();
   123→
   124→  useEffect(() => {
   125→    async function checkAuth() {
   126→      const {
   127→        data: { user },
   128→      } = await supabase.auth.getUser();
   129→      if (user) {
   130→        setIsAuthenticated(true);
   131→        setStep("method");
   132→      }
   133→      setLoading(false);
   134→    }
   135→    checkAuth();
   136→  }, [supabase.auth]);
   137→
   138→  async function handleAuth(e: React.FormEvent) {
   139→    e.preventDefault();
   140→    setAuthLoading(true);
   141→    setAuthError(null);
   142→
   143→    const { error } = await supabase.auth.signUp({
   144→      email,
   145→      password,
   146→      options: {
   147→        data: { type: "worker" },
   148→        emailRedirectTo: `${window.location.origin}/auth/callback`,
   149→      },
   150→    });
   151→
   152→    if (error) {
   153→      if (error.message.includes("already registered")) {
   154→        const { error: loginError } = await supabase.auth.signInWithPassword({
   155→          email,
   156→          password,
   157→        });
   158→        if (loginError) {
   159→          setAuthError(loginError.message);
   160→          setAuthLoading(false);
   161→          return;
   162→        }
   163→      } else {
   164→        setAuthError(error.message);
   165→        setAuthLoading(false);
   166→        return;
   167→      }
   168→    }
   169→
   170→    setIsAuthenticated(true);
   171→    setStep("method");
   172→    setAuthLoading(false);
   173→  }
   174→
   175→  function toggleTrade(trade: string) {
   176→    setSelectedTrades((prev) =>
   177→      prev.includes(trade) ? prev.filter((t) => t !== trade) : [...prev, trade]
   178→    );
   179→  }
   180→
   181→  function toggleCert(cert: string) {
   182→    setCertifications((prev) =>
   183→      prev.includes(cert) ? prev.filter((c) => c !== cert) : [...prev, cert]
   184→    );
   185→  }
   186→
   187→  async function handleConfirm() {
   188→    if (!availability || experience === null) return;
   189→    setSaving(true);
   190→
   191→    try {
   192→      const {
   193→        data: { user },
   194→      } = await supabase.auth.getUser();
   195→      if (!user) {
   196→        alert("Not logged in. Please sign in again.");
   197→        setSaving(false);
   198→        return;
   199→      }
   200→
   201→      const workerData: WorkerData = {
   202→        trades: selectedTrades,
   203→        experience,
   204→        suburb,
   205→        availability,
   206→        certifications,
   207→      };
   208→
   209→      const bio = generateBio(workerData);
   210→
   211→      console.log("Updating profile...", { userId: user.id, suburb });
   212→      const profileResult = await supabase.from("profiles").update({
   213→        name: user.email?.split("@")[0] ?? "",
   214→        suburb,
   215→        onboarding_completed: true,
   216→      }).eq("id", user.id);
   217→
   218→      if (profileResult.error) {
   219→        console.error("Profile update failed:", profileResult.error);
   220→        alert(`Profile update failed: ${profileResult.error.message}`);
   221→        setSaving(false);
   222→        return;
   223→      }
   224→
   225→      console.log("Inserting worker profile...", { profile_id: user.id });
   226→      const workerResult = await supabase.from("worker_profiles").insert({
   227→        profile_id: user.id,
   228→        trades: selectedTrades,
   229→        experience_years: experience,
   230→        availability,
   231→        certifications,
   232→        bio,
   233→        ai_extracted: {
   234→          source: "typed_answers",
   235→          created_at: new Date().toISOString(),
   236→        },
   237→      });
   238→
   239→      if (workerResult.error) {
   240→        console.error("Worker profile insert failed:", workerResult.error);
   241→        alert(`Worker profile creation failed: ${workerResult.error.message}`);
   242→        setSaving(false);
   243→        return;
   244→      }
   245→
   246→      console.log("Profile created successfully!");
   247→      router.push("/dashboard");
   248→      router.refresh();
   249→    } catch (error: any) {
   250→      console.error("Signup error:", error);
   251→      alert(`Something went wrong: ${error.message || "Unknown error"}`);
   252→      setSaving(false);
   253→    }
   254→  }
   255→
   256→  const workerData: WorkerData | null =
   257→    selectedTrades.length > 0 && experience !== null && suburb && availability
   258→      ? { trades: selectedTrades, experience, suburb, availability, certifications }
   259→      : null;
   260→
   261→  const stepOrder: Step[] = ["auth", "method", "trade", "experience", "location", "availability", "certs", "review"];
   262→  const activeSteps = isAuthenticated ? stepOrder.slice(1) : stepOrder;
   263→  const currentIndex = activeSteps.indexOf(step);
   264→  const totalSteps = activeSteps.length;
   265→
   266→  if (loading) {
   267→    return (
   268→

   269→        <Loader2 className="h-8 w-8 animate-spin text-primary" />
   270→

   271→    );
   272→  }
   273→
   274→  return (
   275→

   276→      {/* Header */}
   277→
   278→

   279→          <Link href="/" className="flex items-center gap-2">
   280→

   281→              <HardHat className="h-5 w-5 text-primary-foreground" />
   282→

   283→            RateRight
   284→          </Link>
   285→

   286→
   287→
   288→
   289→        {/* Progress bar */}
   290→

   291→          {Array.from({ length: totalSteps }, (_, i) => (
   292→            <div
   293→              key={i}
   294→              className={`h-1.5 flex-1 rounded-full transition-colors ${
   295→                i <= currentIndex ? "bg-primary" : "bg-muted"
   296→              }`}
   297→            />
   298→          ))}
   299→

   300→
   301→        {/* Step: Auth */}
   302→        {step === "auth" && (
   303→

   304→

   305→

   306→                <HardHat className="h-5 w-5" />
   307→

   308→

   309→
Create your account

   310→

   311→                  Always free for workers
   312→

   313→

   314→

   315→
   316→            <form onSubmit={handleAuth} className="mt-6 space-y-4">
   317→

   318→                Email
   319→                <Input
   320→                  id="email"
   321→                  type="email"
   322→                  placeholder="you@email.com"
   323→                  value={email}
   324→                  onChange={(e) => setEmail(e.target.value)}
   325→                  required
   326→                  autoComplete="email"
   327→                  className="h-12 text-base"
   328→                />
   329→

   330→

   331→                Password
   332→                <Input
   333→                  id="password"
   334→                  type="password"
   335→                  placeholder="Create a password"
   336→                  value={password}
   337→                  onChange={(e) => setPassword(e.target.value)}
   338→                  required
   339→                  minLength={6}
   340→                  autoComplete="new-password"
   341→                  className="h-12 text-base"
   342→                />
   343→

   344→
   345→              {authError && (
   346→
{authError}

   347→              )}
   348→
   349→              <Button
   350→                type="submit"
   351→                className="h-12 w-full gap-2 text-base font-semibold"
   352→                disabled={authLoading}
   353→              >
   354→                {authLoading ? (
   355→                  <>
   356→                    <Loader2 className="h-5 w-5 animate-spin" />
   357→                    Creating account...
   358→                  </>
   359→                ) : (
   360→                  <>
   361→                    Continue
   362→                    <ArrowRight className="h-5 w-5" />
   363→                  </>
   364→                )}
   365→              </Button>
   366→            </form>
   367→
   368→

   369→              Already have an account?{" "}
   370→              <Link
   371→                href="/auth/login"
   372→                className="text-primary underline hover:no-underline"
   373→              >
   374→                Sign in
   375→              </Link>
   376→

   377→

   378→        )}
   379→
   380→        {/* Step: Choose method */}
   381→        {step === "method" && (
   382→

   383→

   384→

   385→                <HardHat className="h-5 w-5" />
   386→

   387→

   388→
Build your profile

   389→

   390→                  How do you want to get started?
   391→

   392→

   393→

   394→
   395→

   396→              <button
   397→                onClick={() => setStep("trade")}
   398→                className="flex w-full items-center gap-4 rounded-xl border-2 border-primary bg-primary/5 p-5 text-left transition-colors hover:bg-primary/10"
   399→              >
   400→

   401→                  <Keyboard className="h-6 w-6" />
   402→

   403→

   404→
Type my answers

   405→

   406→                    5 quick questions, under 2 minutes
   407→

   408→

   409→                <ArrowRight className="ml-auto h-5 w-5 text-primary" />
   410→              </button>
   411→
   412→              <button
   413→                disabled
   414→                className="flex w-full items-center gap-4 rounded-xl border-2 border-muted p-5 text-left opacity-50"
   415→              >
   416→

   417→                  <Mic className="h-6 w-6" />
   418→

   419→

   420→
Send a voice note

   421→

   422→                    Coming soon — speak and AI builds your profile
   423→

   424→

   425→              </button>
   426→

   427→

   428→        )}
   429→
   430→        {/* Step: Select trade */}
   431→        {step === "trade" && (
   432→

   433→            <StepHeader
   434→              icon={<Wrench className="h-5 w-5" />}
   435→              title="What's your trade?"
   436→              subtitle="Select one or more"
   437→            />
   438→
   439→

   440→              {TRADES.map((trade) => (
   441→                <button
   442→                  key={trade}
   443→                  onClick={() => toggleTrade(trade)}
   444→                  className={`rounded-xl border-2 px-4 py-3 text-left text-sm font-medium transition-colors ${
   445→                    selectedTrades.includes(trade)
   446→                      ? "border-primary bg-primary/10 text-primary"
   447→                      : "border-border hover:border-primary/50"
   448→                  }`}
   449→                >
   450→                  {trade}
   451→                </button>
   452→              ))}
   453→

   454→
   455→

   456→              <Button
   457→                variant="outline"
   458→                onClick={() => setStep("method")}
   459→                className="h-12"
   460→              >
   461→                <ArrowLeft className="h-5 w-5" />
   462→              </Button>
   463→              <Button
   464→                onClick={() => setStep("experience")}
   465→                disabled={selectedTrades.length === 0}
   466→                className="h-12 flex-1 gap-2 text-base font-semibold"
   467→              >
   468→                Continue
   469→                <ArrowRight className="h-5 w-5" />
   470→              </Button>
   471→

   472→

   473→        )}
   474→
   475→        {/* Step: Experience */}
   476→        {step === "experience" && (
   477→

   478→            <StepHeader
   479→              icon={<Clock className="h-5 w-5" />}
   480→              title="How much experience?"
   481→              subtitle="In construction overall"
   482→            />
   483→
   484→

   485→              {EXPERIENCE_OPTIONS.map((opt) => (
   486→                <button
   487→                  key={opt.value}
   488→                  onClick={() => {
   489→                    setExperience(opt.value);
   490→                    setStep("location");
   491→                  }}
   492→                  className={`flex w-full items-center justify-between rounded-xl border-2 px-5 py-4 text-left text-base font-medium transition-colors ${
   493→                    experience === opt.value
   494→                      ? "border-primary bg-primary/10 text-primary"
   495→                      : "border-border hover:border-primary/50"
   496→                  }`}
   497→                >
   498→                  {opt.label}
   499→                  <ArrowRight className="h-4 w-4 text-muted-foreground" />
   500→                </button>
   501→              ))}
   502→

   503→
   504→            <button
   505→              onClick={() => setStep("trade")}
   506→              className="mt-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
   507→            >
   508→              <ArrowLeft className="h-4 w-4" />
   509→              Back
   510→            </button>
   511→

   512→        )}
   513→
   514→        {/* Step: Location */}
   515→        {step === "location" && (
   516→

   517→            <StepHeader
   518→              icon={<MapPin className="h-5 w-5" />}
   519→              title="Where are you based?"
   520→              subtitle="Your suburb or area"
   521→            />
   522→
   523→            <form
   524→              onSubmit={(e) => {
   525→                e.preventDefault();
   526→                if (suburb.trim()) setStep("availability");
   527→              }}
   528→              className="mt-6 space-y-4"
   529→            >
   530→              <Input
   531→                placeholder="e.g. Parramatta, Blacktown, Liverpool"
   532→                value={suburb}
   533→                onChange={(e) => setSuburb(e.target.value)}
   534→                required
   535→                autoFocus
   536→                className="h-12 text-base"
   537→              />
   538→

   539→                We'll match you to jobs near this location.
   540→

   541→
   542→

   543→                <Button
   544→                  type="button"
   545→                  variant="outline"
   546→                  onClick={() => setStep("experience")}
   547→                  className="h-12"
   548→                >
   549→                  <ArrowLeft className="h-5 w-5" />
   550→                </Button>
   551→                <Button
   552→                  type="submit"
   553→                  disabled={!suburb.trim()}
   554→                  className="h-12 flex-1 gap-2 text-base font-semibold"
   555→                >
   556→                  Continue
   557→                  <ArrowRight className="h-5 w-5" />
   558→                </Button>
   559→

   560→            </form>
   561→

   562→        )}
   563→
   564→        {/* Step: Availability */}
   565→        {step === "availability" && (
   566→

   567→            <StepHeader
   568→              icon={<Calendar className="h-5 w-5" />}
   569→              title="Your availability?"
   570→              subtitle="When can you work?"
   571→            />
   572→
   573→

   574→              {AVAILABILITY_OPTIONS.map((opt) => (
   575→                <button
   576→                  key={opt.value}
   577→                  onClick={() => {
   578→                    setAvailability(opt.value);
   579→                    setStep("certs");
   580→                  }}
   581→                  className={`flex w-full items-center justify-between rounded-xl border-2 px-5 py-4 text-left transition-colors ${
   582→                    availability === opt.value
   583→                      ? "border-primary bg-primary/10"
   584→                      : "border-border hover:border-primary/50"
   585→                  }`}
   586→                >
   587→

   588→                    <p className={`text-base font-medium ${availability === opt.value ? "text-primary" : ""}`}>
   589→                      {opt.label}
   590→

   591→
{opt.desc}

   592→

   593→                  <ArrowRight className="h-4 w-4 shrink-0 text-muted-foreground" />
   594→                </button>
   595→              ))}
   596→

   597→
   598→            <button
   599→              onClick={() => setStep("location")}
   600→              className="mt-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
   601→            >
   602→              <ArrowLeft className="h-4 w-4" />
   603→              Back
   604→            </button>
   605→

   606→        )}
   607→
   608→        {/* Step: Certifications */}
   609→        {step === "certs" && (
   610→

   611→            <StepHeader
   612→              icon={<Shield className="h-5 w-5" />}
   613→              title="Your certifications"
   614→              subtitle="Select all that apply (optional)"
   615→            />
   616→
   617→

   618→              {CERT_OPTIONS.map((cert) => (
   619→                <button
   620→                  key={cert}
   621→                  onClick={() => toggleCert(cert)}
   622→                  className={`flex w-full items-center gap-3 rounded-xl border-2 px-5 py-3.5 text-left text-sm font-medium transition-colors ${
   623→                    certifications.includes(cert)
   624→                      ? "border-primary bg-primary/10 text-primary"
   625→                      : "border-border hover:border-primary/50"
   626→                  }`}
   627→                >
   628→

   635→                    {certifications.includes(cert) && (
   636→                      <CheckCircle2 className="h-3.5 w-3.5" />
   637→                    )}
   638→

   639→                  {cert}
   640→                </button>
   641→              ))}
   642→

   643→
   644→

   645→              <Button
   646→                variant="outline"
   647→                onClick={() => setStep("availability")}
   648→                className="h-12"
   649→              >
   650→                <ArrowLeft className="h-5 w-5" />
   651→              </Button>
   652→              <Button
   653→                onClick={() => setStep("review")}
   654→                className="h-12 flex-1 gap-2 text-base font-semibold"
   655→              >
   656→                Review my profile
   657→                <ArrowRight className="h-5 w-5" />
   658→              </Button>
   659→

   660→

   661→        )}
   662→
   663→        {/* Step: Review */}
   664→        {step === "review" && workerData && (
   665→

   666→

   667→

   668→                <CheckCircle2 className="h-5 w-5" />
   669→

   670→

   671→
Your profile

   672→

   673→                  Review and confirm
   674→

   675→

   676→

   677→
   678→            <Card className="mt-6">
   679→              <CardContent className="space-y-4 pt-6">
   680→                <ReviewField
   681→                  icon={<Wrench className="h-4 w-4" />}
   682→                  label="Trade"
   683→                  value={workerData.trades.join(", ")}
   684→                  onEdit={() => setStep("trade")}
   685→                />
   686→                <ReviewField
   687→                  icon={<Clock className="h-4 w-4" />}
   688→                  label="Experience"
   689→                  value={
   690→                    workerData.experience === 0
   691→                      ? "Less than 1 year"
   692→                      : workerData.experience >= 12
   693→                        ? "10+ years"
   694→                        : `${workerData.experience} years`
   695→                  }
   696→                  onEdit={() => setStep("experience")}
   697→                />
   698→                <ReviewField
   699→                  icon={<MapPin className="h-4 w-4" />}
   700→                  label="Location"
   701→                  value={workerData.suburb}
   702→                  onEdit={() => setStep("location")}
   703→                />
   704→                <ReviewField
   705→                  icon={<Calendar className="h-4 w-4" />}
   706→                  label="Availability"
   707→                  value={
   708→                    AVAILABILITY_OPTIONS.find(
   709→                      (o) => o.value === workerData.availability
   710→                    )?.label ?? workerData.availability
   711→                  }
   712→                  onEdit={() => setStep("availability")}
   713→                />
   714→                <ReviewField
   715→                  icon={<Shield className="h-4 w-4" />}
   716→                  label="Certifications"
   717→                  value={
   718→                    workerData.certifications.length > 0
   719→                      ? workerData.certifications.join(", ")
   720→                      : "None added"
   721→                  }
   722→                  onEdit={() => setStep("certs")}
   723→                />
   724→              </CardContent>
   725→            </Card>
   726→
   727→            {/* AI-generated bio */}
   728→

   729→

   730→                <Sparkles className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
   731→

   732→

   733→                    AI-generated bio
   734→

   735→

   736→                    {generateBio(workerData)}
   737→

   738→

   739→

   740→

   741→
   742→            <Button
   743→              onClick={handleConfirm}
   744→              className="mt-6 h-14 w-full gap-2 text-base font-semibold"
   745→              disabled={saving}
   746→            >
   747→              {saving ? (
   748→                <>
   749→                  <Loader2 className="h-5 w-5 animate-spin" />
   750→                  Creating profile...
   751→                </>
   752→              ) : (
   753→                <>
   754→                  <CheckCircle2 className="h-5 w-5" />
   755→                  Looks good — create my profile
   756→                </>
   757→              )}
   758→            </Button>
   759→
   760→            <button
   761→              onClick={() => setStep("certs")}
   762→              className="mt-4 flex w-full items-center justify-center gap-1 text-sm text-muted-foreground hover:text-foreground"
   763→            >
   764→              <ArrowLeft className="h-4 w-4" />
   765→              Go back
   766→            </button>
   767→

   768→        )}
   769→
   770→

   771→  );
   772→}
   773→
   774→function StepHeader({
   775→  icon,
   776→  title,
   777→  subtitle,
   778→}: {
   779→  icon: React.ReactNode;
   780→  title: string;
   781→  subtitle: string;
   782→}) {
   783→  return (
   784→

   785→

   786→        {icon}
   787→

   788→

   789→
{title}

   790→
{subtitle}

   791→

   792→

   793→  );
   794→}
   795→
   796→function ReviewField({
   797→  icon,
   798→  label,
   799→  value,
   800→  onEdit,
   801→}: {
   802→  icon: React.ReactNode;
   803→  label: string;
   804→  value: string;
   805→  onEdit: () => void;
   806→}) {
   807→  return (
   808→    <button
   809→      onClick={onEdit}
   810→      className="flex w-full items-start gap-3 rounded-lg p-2 text-left transition-colors hover:bg-muted"
   811→    >
   812→
{icon}

   813→

   814→
{label}

   815→
{value}

   816→

   817→      <Edit3 className="mt-1 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
   818→    </button>
   819→  );
   820→}
   821→

<system-reminder>
Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.
</system-reminder>