mediahub-fe/app/[locale]/(protected)/admin/add-experts/create/page.tsx

"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useRouter } from "@/i18n/routing";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const FormSchema = z.object({
  name: z.string({
    required_error: "Required",
  }),
  phoneNumber: z.string({
    required_error: "Required",
  }),
  email: z.string({
    required_error: "Required",
  }),
  region: z.string({
    required_error: "Required",
  }),
  skills: z.string({
    required_error: "Required",
  }),
  experience: z.string({
    required_error: "Required",
  }),
  company: z.string({
    required_error: "Required",
  }),
});

export default function AddExpertForm() {
  const MySwal = withReactContent(Swal);
  const router = useRouter();
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });

  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
    MySwal.fire({
      title: "Simpan Data",
      text: "Apakah Anda yakin ingin menyimpan data ini?",
      icon: "warning",
      showCancelButton: true,
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Simpan",
    }).then((result) => {
      if (result.isConfirmed) {
        save(data);
      }
    });
  };

  const save = async (data: z.infer<typeof FormSchema>) => {
    console.log("data", data);

    //   successSubmit();
  };

  function successSubmit() {
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push("/admin/add-experts");
      }
    });
  }
  return (
    <div>
      <SiteBreadcrumb />

      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-3 bg-white rounded-sm p-4"
        >
          <p className="fonnt-semibold">Campaign</p>
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nama Lengkap</FormLabel>
                <Input
                  value={field.value}
                  placeholder="Masukkan Nama Lengkap"
                  onChange={field.onChange}
                />

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="phoneNumber"
            render={({ field }) => (
              <FormItem>
                <FormLabel>No. HP</FormLabel>
                <Input
                  type="number"
                  value={field.value}
                  placeholder="Masukkan Nama Lengkap"
                  onChange={field.onChange}
                />
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <Input
                  type="email"
                  value={field.value}
                  placeholder="Masukkan Nama Lengkap"
                  onChange={field.onChange}
                />
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="region"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Wilayah</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Pilih Region" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="nasional">Nasional</SelectItem>
                    <SelectItem value="jakarta">DKI Jakarta</SelectItem>
                    <SelectItem value="jabar">Jawa Barat</SelectItem>
                  </SelectContent>
                </Select>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="skills"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Bidang Keahlian</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Pilih Bidang Keahlian" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="komunikasi">Komunikasi</SelectItem>
                    <SelectItem value="hukum">Hukum</SelectItem>
                    <SelectItem value="bahasa">Bahasa</SelectItem>
                  </SelectContent>
                </Select>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="experience"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Pengalaman</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Pilih Pengalaman" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="akademisi">Akademisi</SelectItem>
                    <SelectItem value="praktisi">Praktisi</SelectItem>
                    <SelectItem value="akademisi+praktisi">
                      Akademisi + Praktisi
                    </SelectItem>
                  </SelectContent>
                </Select>

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="company"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nama Institusi/Perusahaan</FormLabel>
                <Input
                  type="text"
                  value={field.value}
                  placeholder="Nama Institusi/Perusahaan"
                  onChange={field.onChange}
                />
                <FormMessage />
              </FormItem>
            )}
          />

          <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
            <Button
              size="md"
              type="button"
              variant="outline"
              color="destructive"
              className="text-xs"
            >
              Cancel
            </Button>
            <Button size="md" type="submit" color="primary" className="text-xs">
              Submit
            </Button>
          </div>
        </form>
      </Form>
    </div>
  );
}