diff --git a/app/[locale]/(admin)/admin/management-user/edit/[id]/page.tsx b/app/[locale]/(admin)/admin/management-user/edit/[id]/page.tsx index 433866a..5646d94 100644 --- a/app/[locale]/(admin)/admin/management-user/edit/[id]/page.tsx +++ b/app/[locale]/(admin)/admin/management-user/edit/[id]/page.tsx @@ -1,48 +1,841 @@ "use client"; -import { useRouter } from "@/i18n/routing"; -import UserForm from "@/components/form/user/user-form"; -import { useSearchParams } from "next/navigation"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { Check, ChevronsUpDown } from "lucide-react"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; -export default function EditUserPage() { +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, + getUserById, + updateUserInternal, +} 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"; +import { useParams } from "next/navigation"; +import { getUserLevels } from "@/service/approval-workflows"; + +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 EditUserForm() { const router = useRouter(); - const params = useSearchParams(); - // const userId = params?.id ? Number(params.id) : undefined; - const userIdParam = params.get("id"); - const userId = userIdParam ? Number(userIdParam) : undefined; + const params = useParams(); + const id = params?.id; + const MySwal = withReactContent(Swal); + const levelName = getCookiesDecrypt("ulnae"); + const [roleList, setRoleList] = useState([]); - const handleSuccess = () => { - router.push("/admin/management-user"); + const [userEducations, setUserEducations] = useState(); + const [userSchools, setUserSchools] = useState(); + const [userCompetencies, setUserCompetencies] = useState(); + + const form = useForm>({ + 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(() => { + getDataAdditional(); + initData(); + }, []); + + const initData = async () => { + loading(); + + // 1️⃣ Ambil level dulu + const levels = await initFetch(); + console.log("LEVEL READY:", levels); + + // 2️⃣ Ambil user + const response = await getUserById(String(id)); + close(); + + const list = response?.data?.data; + const user = list?.find((item: any) => item.id === Number(id)); + + if (!user) { + error("User tidak ditemukan"); + return; + } + + console.log("RESET WITH USER:", user); + + // 3️⃣ Reset SETELAH level ADA + form.reset({ + fullname: user.fullname ?? "", + username: user.username ?? "", + email: user.email ?? "", + address: user.address ?? "", + phoneNumber: user.phoneNumber ?? "", + // nrp: user.identityNumber ?? "", + level: String(user.userLevelId), + role: String(user.userRoleId ?? ""), + password: "", + confirmPassword: "", + sns: [], + education: "", + school: "", + competency: "", + }); }; - const handleCancel = () => { - router.push("/admin/management-user"); + // const initData = async () => { + // console.log("PARAM ID:", id); + + // loading(); + // const response = await getUserById(String(id)); + // const res = response?.data?.data; + // close(); + // console.log("FULL RESPONSE:", response); + // console.log("RESPONSE.DATA:", response?.data); + // console.log("RESPONSE.DATA.DATA:", response?.data?.data); + // if (Number(res.roleId) > 4) { + // form.setValue("fullname", res?.fullname); + // form.setValue("username", res?.username); + // form.setValue("phoneNumber", res?.phoneNumber); + // form.setValue("nrp", res?.memberIdentity); + // form.setValue("address", res?.address); + // form.setValue("email", res?.email); + // form.setValue("role", res?.role?.code); + // form.setValue("level", String(res?.userLevelId)); + // } else { + // initFetch(); + // form.setValue("fullname", res?.fullname); + // form.setValue("username", res?.username); + // form.setValue("phoneNumber", res?.phoneNumber); + // form.setValue("nrp", res?.memberIdentity); + // form.setValue("address", res?.address); + // form.setValue("email", res?.email); + // form.setValue("role", res?.role?.code); + // form.setValue("level", String(res?.userLevelId)); + // } + // }; + + const initFetch = async () => { + const response = await getUserLevels(); + const res = response?.data?.data ?? []; + + const levelsArr: RoleData[] = res.map((levels: any) => ({ + id: levels.id, + label: levels.aliasName ?? levels.name, + name: levels.name, + value: String(levels.id), + levelNumber: levels.levelNumber, + })); + + setRoleList(levelsArr); + return levelsArr; // ⬅️ PENTING }; - if (!userId) { - return ( -
-
-

User ID tidak valid

- -
-
- ); + 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 rawRoleId = getCookiesDecrypt("urie"); + const userRoleId = rawRoleId ? Number(rawRoleId) : undefined; + + if (!userRoleId || Number.isNaN(userRoleId)) { + error("Role user tidak valid, silakan login ulang"); + return; + } + + const roles = + levelName == "MABES POLRI" + ? [ + { + id: "ADM-ID", + name: "Admin", + }, + { + 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) { + const req = { + fullname: data.fullname, + username: data.username, + email: data.email, + address: data.address, + phoneNumber: data.phoneNumber, + userLevelId: Number(data.level), + userRoleId: userRoleId, + }; + + // let req: any = { + // id: Number(id), + // firstName: data.fullname, + // username: data.username, + // roleId: data.role, + // userLevelId: Number(data.level), + // memberIdentity: data.nrp, + // address: data.address, + // email: data.email, + // password: data.password, + // passwordConf: data.confirmPassword, + // isDefault: false, + // isAdmin: true, + // }; + + console.log("USER ROLE ID FROM COOKIE:", rawRoleId, userRoleId); + console.log("REQUEST UPDATE:", req); + + loading(); + const response = await updateUserInternal(Number(id), 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) { + MySwal.fire({ + title: "Simpan Data?", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#d33", + confirmButtonColor: "#3085d6", + confirmButtonText: "Simpan", + }).then((result) => { + if (result.isConfirmed) { + save(data); + } + }); } return ( -
- +
+ +
+ +

Data User

+ ( + + Pilih Level + + + + + + + + + + + No role found. + + {roleList.map((role) => ( + { + form.setValue("level", role.value); + }} + > + {role.label} + + + ))} + + + + + + + + )} + /> + ( + + Nama Lengkap + + + + + + + )} + /> + ( + + Username + + + + + + + )} + /> + + {/* ( + + Role + + + {roles.map((role) => ( + + + + + + {role.name} + + + ))} + + + + + )} + /> */} + {/* {selectedRole === "OPT-ID" && ( + ( + +
+ Social Media Yang Ditangani +
+
+ {sns.map((item) => ( + { + return ( + + + { + return checked + ? field.onChange([ + ...(field.value || []), + String(item.typeId), + ]) + : field.onChange( + (field.value || []).filter( + (value) => + value !== String(item.typeId), + ), + ); + }} + /> + + + {item.name} + + + ); + }} + /> + ))} +
+ + + + )} + /> + )} + + {selectedRole === "KUR-ID" && ( + <> + ( + + Pendidikan Terakhir + + + + + )} + /> + ( + + Universitas / Perguruan Tinggi + + + + + )} + /> + ( + + Kompetensi + + + + + )} + /> + + )} + ( + + Nomor Regitrasi Polri {`(NRP)`} + + + + + + + )} + /> */} + + ( + + Alamat + +