mediahub-fe/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx

"use client";

import SiteBreadcrumb from "@/components/site-breadcrumb";
import { zodResolver } from "@hookform/resolvers/zod";
import { Check, ChevronsUpDown, Eye, EyeOff } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { cn, getCookiesDecrypt } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  AdministrationLevelList,
  getListCompetencies,
  getListEducation,
  getListSchools,
  saveUserInternal,
} from "@/service/management-user/management-user";
import { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Link, useRouter } from "@/i18n/routing";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import dynamic from "next/dynamic";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { close, error, loading } from "@/config/swal";

const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
  ssr: false,
});

const sns = [
  {
    key: 1,
    id: "comment",
    typeId: 1,
    name: "Komentar Konten",
  },
  {
    key: 2,
    id: "fb",
    typeId: 2,
    name: "Facebook",
  },
  {
    key: 3,
    id: "ig",
    typeId: 3,
    name: "Instagram",
  },
  {
    key: 4,
    id: "twt",
    typeId: 4,
    name: "Twitter",
  },
  {
    key: 5,
    id: "yt",
    typeId: 5,
    name: "Youtube",
  },
  {
    key: 6,
    id: "emergency",
    typeId: 6,
    name: "Emergency Issue",
  },
  {
    key: 7,
    id: "email",
    typeId: 7,
    name: "Email",
  },
  {
    key: 8,
    id: "inbox",
    typeId: 8,
    name: "Pesan Masuk",
  },
  {
    key: 9,
    id: "whatsapp",
    typeId: 9,
    name: "Whatssapp",
  },
  {
    key: 10,
    id: "tiktok",
    typeId: 10,
    name: "Tiktok",
  },
];

interface RoleData {
  id: number;
  label: string;
  name: string;
  value: string;
  levelNumber: number;
}

const FormSchema = z.object({
  level: z.string({
    required_error: "Required",
  }),
  fullname: z.string({
    required_error: "Required",
  }),
  username: z.string({
    required_error: "Required",
  }),
  role: z.string({
    required_error: "Required",
  }),
  nrp: z.string({
    required_error: "Required",
  }),
  address: z.string({
    required_error: "Required",
  }),
  email: z.string({
    required_error: "Required",
  }),
  phoneNumber: z.string({
    required_error: "Required",
  }),
  password: z.string({
    required_error: "Required",
  }),
  confirmPassword: z.string({
    required_error: "Required",
  }),
  isValidPassword: z.boolean().refine((val) => val === true, {
    message: "Check Password",
  }),
  sns: z.array(z.string()).optional(),
  education: z.string().optional(),
  school: z.string().optional(),
  competency: z.string().optional(),
});

export default function CreateUserForm() {
  const router = useRouter();
  const MySwal = withReactContent(Swal);
  const levelName = getCookiesDecrypt("ulnae");
  const [roleList, setRoleList] = useState<RoleData[]>([]);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [userEducations, setUserEducations] = useState<any>();
  const [userSchools, setUserSchools] = useState<any>();
  const [userCompetencies, setUserCompetencies] = useState<any>();

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      password: "",
      confirmPassword: "",
      sns: [],
      education: "1",
      school: "4",
      competency: "2",
    },
  });

  const passwordVal = form.watch("password");
  const confPasswordVal = form.watch("confirmPassword");
  const selectedRole = form.watch("role");

  useEffect(() => {
    initFetch();
    getDataAdditional();
  }, []);

  const initFetch = async () => {
    const response = await AdministrationLevelList();
    const res = response?.data?.data;
    var levelsArr: RoleData[] = [];
    res.forEach((levels: RoleData) => {
      levelsArr.push({
        id: levels.id,
        label: levels.name,
        name: levels.name,
        value: String(levels.id),
        levelNumber: levels.levelNumber,
      });
    });
    setRoleList(levelsArr);
  };

  async function getDataAdditional() {
    const resEducations = await getListEducation();
    setUserEducations(resEducations?.data?.data);
    const resSchools = await getListSchools();
    setUserSchools(resSchools?.data?.data);
    const resCompetencies = await getListCompetencies();
    setUserCompetencies(resCompetencies?.data?.data);
  }

  const roles =
    levelName == "MABES POLRI"
      ? [
          {
            id: "ADM-ID",
            name: "Admin",
          },
          {
            id: "EXE-ID",
            name: "Eksekutif",
          },
          {
            id: "APP-ID",
            name: "Approver",
          },
          {
            id: "CON-ID",
            name: "Kontributor",
          },
          {
            id: "SPV-ID",
            name: "Supervisor Feedback Center",
          },
          {
            id: "OPT-ID",
            name: "Operator Feedback Center",
          },
          {
            id: "KKUR-ID",
            name: "Koor Kurator",
          },
          {
            id: "KUR-ID",
            name: "Kurator",
          },
        ]
      : [
          {
            id: "APP-ID",
            name: "Approver",
          },
          {
            id: "CON-ID",
            name: "Kontributor",
          },
        ];

  async function save(data: z.infer<typeof FormSchema>) {
    let req: any = {
      firstName: data.fullname,
      username: data.username,
      roleId: data.role,
      userLevelId: Number(data.level),
      memberIdentity: data.nrp,
      address: data.address,
      email: data.email,
      phoneNumber: data.phoneNumber,
      password: data.password,
      passwordConf: data.confirmPassword,
      isDefault: false,
      isAdmin: true,
    };

    if (data.role == "OPT-ID") {
      req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
    }

    if (data.role == "KUR-ID") {
      req.userEducationId = Number(data.education);
      req.userSchoolsId = Number(data.school);
      req.userCompetencyId = Number(data.competency);
    }

    loading();
    const response = await saveUserInternal(req);

    if (response?.error) {
      error(response.message);
      return false;
    }

    close();
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Oke",
    }).then((result) => {
      if (result.isConfirmed) {
        router.push("/admin/management-user");
      }
    });
    return false;
  }

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

  return (
    <div>
      <SiteBreadcrumb />
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-6 bg-white dark:bg-black p-10 w-full"
        >
          <p className="text-xl">Data Pengelola Media Hub</p>
          <FormField
            control={form.control}
            name="level"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Pilih Level</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[400px] justify-between",
                          !field.value && "text-muted-foreground"
                        )}
                      >
                        {field.value
                          ? roleList.find((role) => role.value === field.value)
                              ?.label
                          : "Pilih level"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[400px] p-0">
                    <Command>
                      <CommandInput />
                      <CommandList>
                        <CommandEmpty>No role found.</CommandEmpty>
                        <CommandGroup>
                          {roleList.map((role) => (
                            <CommandItem
                              value={role.label}
                              key={role.value}
                              onSelect={() => {
                                form.setValue("level", role.value);
                              }}
                            >
                              {role.label}
                              <Check
                                className={cn(
                                  "ml-auto",
                                  role.value === field.value
                                    ? "opacity-100"
                                    : "opacity-0"
                                )}
                              />
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="fullname"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nama Lengkap</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Masukkan nama lengkap"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input
                    placeholder="Masukkan username"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

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

          <FormField
            control={form.control}
            name="role"
            render={({ field }) => (
              <FormItem className="space-y-3">
                <FormLabel>Role</FormLabel>
                <FormControl>
                  <RadioGroup
                    onValueChange={field.onChange}
                    defaultValue={field.value}
                    className="flex flex-wrap gap-3 w-1/2"
                  >
                    {roles.map((role) => (
                      <FormItem
                        key={role.id}
                        className="flex items-center space-x-3 space-y-0"
                      >
                        <FormControl>
                          <RadioGroupItem value={role.id} />
                        </FormControl>
                        <FormLabel className="font-normal">
                          {role.name}
                        </FormLabel>
                      </FormItem>
                    ))}
                  </RadioGroup>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          {selectedRole === "OPT-ID" && (
            <FormField
              control={form.control}
              name="sns"
              render={() => (
                <FormItem>
                  <div className="mb-4">
                    <FormLabel>Social Media Yang Ditangani</FormLabel>
                  </div>
                  <div className="grid grid-cols-5 gap-2 w-1/2">
                    {sns.map((item) => (
                      <FormField
                        key={item.id}
                        control={form.control}
                        name="sns"
                        render={({ field }) => {
                          return (
                            <FormItem
                              key={item.typeId}
                              className="flex flex-row items-start space-x-3 space-y-0"
                            >
                              <FormControl>
                                <Checkbox
                                  checked={field.value?.includes(
                                    String(item.typeId)
                                  )}
                                  onCheckedChange={(checked) => {
                                    return checked
                                      ? field.onChange([
                                          ...(field.value || []),
                                          String(item.typeId),
                                        ])
                                      : field.onChange(
                                          (field.value || []).filter(
                                            (value) =>
                                              value !== String(item.typeId)
                                          )
                                        );
                                  }}
                                />
                              </FormControl>
                              <FormLabel className="font-normal">
                                {item.name}
                              </FormLabel>
                            </FormItem>
                          );
                        }}
                      />
                    ))}
                  </div>

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

          {selectedRole === "KUR-ID" && (
            <>
              <FormField
                control={form.control}
                name="education"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Pendidikan Terakhir</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {userEducations?.map((edu: any) => (
                          <SelectItem key={edu.id} value={String(edu.id)}>
                            {edu.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="school"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Universitas / Perguruan Tinggi</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {userSchools?.map((edu: any) => (
                          <SelectItem key={edu.id} value={String(edu.id)}>
                            {edu.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="competency"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Kompetensi</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {userCompetencies?.map((edu: any) => (
                          <SelectItem key={edu.id} value={String(edu.id)}>
                            {edu.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>

                    <FormMessage />
                  </FormItem>
                )}
              />
            </>
          )}
          <FormField
            control={form.control}
            name="nrp"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Masukkan NRP"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

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

          <FormField
            control={form.control}
            name="address"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Alamat</FormLabel>
                <FormControl>
                  <Textarea
                    placeholder="Masukkan alamat"
                    className="resize-none w-1/2"
                    {...field}
                  />
                </FormControl>

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

          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input
                    type="email"
                    placeholder="Masukkan email"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

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

          <FormField
            control={form.control}
            name="phoneNumber"
            render={({ field }) => (
              <FormItem>
                <FormLabel>No. Handphone</FormLabel>
                <FormControl>
                  <Input
                    type="number"
                    placeholder="Masukkan nomor handphone"
                    {...field}
                    className="w-1/2"
                  />
                </FormControl>

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

          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <div className="relative w-1/2">
                    <Input
                      type={showPassword ? "text" : "password"}
                      placeholder="Masukkan kata sandi"
                      {...field}
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500"
                    >
                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                    </button>
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="confirmPassword"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Konfirmasi Kata Sandi</FormLabel>
                <FormControl>
                  <div className="relative w-1/2">
                    <Input
                      type={showConfirmPassword ? "text" : "password"}
                      placeholder="Masukkan kata sandi"
                      {...field}
                    />
                    <button
                      type="button"
                      onClick={() =>
                        setShowConfirmPassword(!showConfirmPassword)
                      }
                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500"
                    >
                      {showConfirmPassword ? (
                        <EyeOff size={18} />
                      ) : (
                        <Eye size={18} />
                      )}
                    </button>
                  </div>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <PasswordChecklist
            rules={["minLength", "specialChar", "number", "capital", "match"]}
            minLength={8}
            value={passwordVal || ""}
            valueAgain={confPasswordVal || ""}
            onChange={(isValid) => {
              form.setValue("isValidPassword", isValid);
            }}
            className="text-sm"
            messages={{
              minLength: "Password harus lebih dari 8 karakter",
              specialChar: "Password harus memiliki spesial karakter",
              number: "Password harus memiliki angka",
              capital: "Password harus memiliki huruf kapital",
              match: "Password sama",
            }}
          />
          <Link href="/admin/management-user">
            <Button type="button" color="primary" variant="outline">
              Back
            </Button>
          </Link>
          <Button type="submit" color="primary" className="mx-3">
            Submit
          </Button>
        </form>
      </Form>
    </div>
  );
}