detailed-application-form

1"use client";
2 
3import { useState } from "react";
4import { useForm, Controller } from "react-hook-form";
5import { zodResolver } from "@hookform/resolvers/zod";
6import * as z from "zod";
7import { Button } from "@/components/ui/button";
8import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
9import { Input } from "@/components/ui/input";
10import { Label } from "@/components/ui/label";
11import { toast } from "sonner";
12import { cn } from "@/lib/utils";
13import { Progress } from "@/components/ui/progress";
14import { Textarea } from "@/components/ui/textarea";
15import {
16  Select,
17  SelectContent,
18  SelectItem,
19  SelectTrigger,
20  SelectValue,
21} from "@/components/ui/select";
22import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
23import PhoneInput from "react-phone-number-input";
24import "react-phone-number-input/style.css";
25 
26const formSchema = z.object({
27  fullName: z.string().min(2, "Name required"),
28  email: z.string().email("Invalid email address"),
29  phone: z.string().optional().or(z.literal("")),
30  currentRole: z.string().min(2, "Role required"),
31  experienceYears: z.string().min(1, "Required"),
32  skills: z.string().min(10, "List some skills"),
33  portfolioUrl: z.string().optional().or(z.literal("")),
34  availability: z.enum(["immediate", "two-weeks", "one-month"]),
35  comments: z.string().optional().or(z.literal("")),
36});
37 
38type FormValues = z.infer<typeof formSchema>;
39 
40export function DetailedApplicationForm() {
41  const [currentStep, setCurrentStep] = useState(0);
42  const steps = [
43  {
44    "id": "contact",
45    "title": "Contact Info",
46    "description": "How can we reach you?",
47    "fields": [
48      "fullName",
49      "email",
50      "phone"
51    ]
52  },
53  {
54    "id": "experience",
55    "title": "Experience",
56    "description": "Your professional background",
57    "fields": [
58      "currentRole",
59      "experienceYears",
60      "skills"
61    ]
62  },
63  {
64    "id": "additional",
65    "title": "Additional Info",
66    "description": "Almost there",
67    "fields": [
68      "portfolioUrl",
69      "availability",
70      "comments"
71    ]
72  }
73];
74 
75  const form = useForm<FormValues>({
76    resolver: zodResolver(formSchema),
77    defaultValues: {
78      fullName: "",
79      email: "",
80      phone: "",
81      currentRole: "",
82      experienceYears: "",
83      skills: "",
84      portfolioUrl: "",
85      availability: "immediate",
86      comments: "",
87    },
88    mode: "onChange",
89  });
90 
91// … truncated