Form Layout Template

1"use client";
2 
3import { useState } from "react";
4import { FormProvider, useForm } from "react-hook-form";
5import { zodResolver } from "@hookform/resolvers/zod";
6import { z } from "zod";
7import { Mail, FileText, Users } from "lucide-react";
8import { toast } from "sonner";
9 
10import { Button } from "@/components/ui/button";
11import { FieldRenderer, FormFieldType } from "@/components/forms/core";
12import { FieldGroup } from "@/components/forms/layout/FieldGroup";
13import { FormActionBar } from "@/components/forms/layout/FormActionBar";
14import { FormGrid } from "@/components/forms/layout/FormGrid";
15import { FormSection } from "@/components/forms/layout/FormSection";
16 
17const DUMMY_USERS = [
18  { id: 1, name: "Juan Dela Cruz", email: "jdelacruz@example.com", phone: "123-456-7890" },
19  { id: 2, name: "Maria Santos", email: "mariasantos@example.com", phone: "123-456-7890" },
20  { id: 3, name: "Pedro Reyes", email: "pereyes@example.com", phone: "123-456-7890" },
21  { id: 4, name: "Anna Marie Velasquez", email: "anna@example.com", phone: "123-456-7890" },
22  { id: 5, name: "John Mark Evangelista", email: "john@example.com", phone: "123-456-7890" },
23  { id: 6, name: "Catherine Cruz", email: "catherine@example.com", phone: "123-456-7890" },
24];
25 
26const storedFileSchema = z.object({
27  id: z.string().optional(),
28  name: z.string(),
29  type: z.string(),
30  size: z.number(),
31  data: z.string().optional(),
32  url: z.string().optional(),
33});
34 
35const formSchema = z.object({
36  userID: z.number().optional(),
37  name: z.string().min(3, { message: "Name must be at least 3 characters long" }),
38  email: z.email(),
39  mobile: z.string().min(13, { message: "Mobile number is required" }).max(13, {
40    message: "Mobile number must be 11 digits long",
41  }),
42  date_of_birth: z.date().optional(),
43  amount: z.number().optional(),
44  tin: z.string().optional(),
45  role_id: z.string().optional(),
46  rate: z.number().optional(),
47  active: z.boolean().optional(),
48  attachments: z.array(storedFileSchema).optional(),
49});
50 
51export default function FormComponent() {
52  const [isLoading, setIsLoading] = useState(false);
53  const form = useForm<z.infer<typeof formSchema>>({
54    resolver: zodResolver(formSchema),
55    defaultValues: {
56      userID: 0,
57      name: "",
58      email: "",
59      mobile: "",
60      role_id: "",
61      date_of_birth: undefined,
62      amount: undefined,
63      tin: "",
64      rate: undefined,
65      active: false,
66      attachments: [],
67    },
68  });
69 
70// … truncated