From b96116c1d585e0b0c354eeba1c1ec7450facfef1 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Sun, 21 Apr 2024 23:20:06 +0700
Subject: [PATCH] feat:add form adn table master-user-level

---
 .../master/master-user-level/create/page.tsx  |  14 +
 app/admin/master/master-user-level/page.tsx   |  13 +
 .../master-menu/menu-data/menu-data-form.tsx  |   4 +-
 .../master-module/master-module-form.tsx      |   6 +-
 .../master-user-level-form.tsx                | 363 ++++++++++++++++++
 .../master-user-level-table.tsx               | 217 +++++++++++
 6 files changed, 612 insertions(+), 5 deletions(-)
 create mode 100644 app/admin/master/master-user-level/create/page.tsx
 create mode 100644 app/admin/master/master-user-level/page.tsx
 create mode 100644 components/form/master/master-user-level/master-user-level-form.tsx
 create mode 100644 components/table/master/master-user-level/master-user-level-table.tsx

diff --git a/app/admin/master/master-user-level/create/page.tsx b/app/admin/master/master-user-level/create/page.tsx
new file mode 100644
index 0000000..916eafe
--- /dev/null
+++ b/app/admin/master/master-user-level/create/page.tsx
@@ -0,0 +1,14 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import CreateMenuDataForm from '@/components/form/master/master-menu/menu-data/menu-data-form'
+import CreateMasterModuleForm from '@/components/form/master/master-module/master-module-form'
+import CreateMasterUserLevelForm from '@/components/form/master/master-user-level/master-user-level-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMasterUserLevelCreate = () => {
+    return (
+        <div><CreateMasterUserLevelForm /></div>
+    )
+}
+
+export default AdminMasterUserLevelCreate
\ No newline at end of file
diff --git a/app/admin/master/master-user-level/page.tsx b/app/admin/master/master-user-level/page.tsx
new file mode 100644
index 0000000..cb67e53
--- /dev/null
+++ b/app/admin/master/master-user-level/page.tsx
@@ -0,0 +1,13 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
+import MasterModuleTable from '@/components/table/master/master-module/master-module-table'
+import MasterUserLevelTable from '@/components/table/master/master-user-level/master-user-level-table'
+import React from 'react'
+
+const AdminMasterUserLevel = () => {
+    return (
+        <div><MasterUserLevelTable /></div>
+    )
+}
+
+export default AdminMasterUserLevel
\ No newline at end of file
diff --git a/components/form/master/master-menu/menu-data/menu-data-form.tsx b/components/form/master/master-menu/menu-data/menu-data-form.tsx
index 0c830e8..6859834 100644
--- a/components/form/master/master-menu/menu-data/menu-data-form.tsx
+++ b/components/form/master/master-menu/menu-data/menu-data-form.tsx
@@ -344,7 +344,7 @@ export default function CreateMenuDataForm() {
                                                     classNames={{
                                                         label: "!text-black",
                                                     }}
-                                                    value="no"
+                                                    value="1"
                                                 >
                                                     Active
                                                 </Radio>
@@ -352,7 +352,7 @@ export default function CreateMenuDataForm() {
                                                     classNames={{
                                                         label: "!text-black",
                                                     }}
-                                                    value="yes"
+                                                    value="2"
                                                 >
                                                     Inactive
                                                 </Radio>
diff --git a/components/form/master/master-module/master-module-form.tsx b/components/form/master/master-module/master-module-form.tsx
index a08aa9b..cedd20b 100644
--- a/components/form/master/master-module/master-module-form.tsx
+++ b/components/form/master/master-module/master-module-form.tsx
@@ -241,7 +241,7 @@ export default function CreateMasterModuleForm() {
                                                     classNames={{
                                                         label: "!text-black",
                                                     }}
-                                                    value="no"
+                                                    value="1"
                                                 >
                                                     Active
                                                 </Radio>
@@ -249,14 +249,14 @@ export default function CreateMasterModuleForm() {
                                                     classNames={{
                                                         label: "!text-black",
                                                     }}
-                                                    value="yes"
+                                                    value="2"
                                                 >
                                                     Inactive
                                                 </Radio>
                                             </RadioGroup>
                                         </div>
                                         <div className="flex flex-row gap-3 my-3">
-                                            <Link href="/admin/master/master-menu/menu-data">
+                                            <Link href="/admin/master/master-module">
                                                 <Button
                                                     variant="bordered"
                                                     className="bg-white border-grey-100  rounded-full text-[#8E5C18] mr-5"
diff --git a/components/form/master/master-user-level/master-user-level-form.tsx b/components/form/master/master-user-level/master-user-level-form.tsx
new file mode 100644
index 0000000..a26443b
--- /dev/null
+++ b/components/form/master/master-user-level/master-user-level-form.tsx
@@ -0,0 +1,363 @@
+'use client'
+import { Button } from "@nextui-org/button";
+import { Card, Checkbox, CheckboxGroup, Divider, Image, Input, Radio, RadioGroup, Select, SelectItem, SelectSection, Slider, Switch, Tab, Table, Tabs, Textarea, User } from "@nextui-org/react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { TimesIcon } from "@/components/icons";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { close, error, loading } from "@/config/swal";
+import Swal from 'sweetalert2';
+import withReactContent from 'sweetalert2-react-content';
+import dynamic from 'next/dynamic';
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const moduleList = [
+    { label: "Article", value: "article", id: 1 },
+    { label: "Caption", value: "caption", id: 2 },
+    { label: "Meme", value: "meme", id: 3 },
+    { label: "Video", value: "video", id: 4 },
+    { label: "Master Data", value: "master-data", id: 5 },
+];
+
+const provinceList = [
+    { label: "NTT", value: "1", id: 1 },
+    { label: "NTB", value: "2", id: 2 },
+    { label: "Aceh", value: "3", id: 3 },
+    { label: "Jawa Timur", value: "4", id: 4 },
+    { label: "Jawa Barat", value: "5", id: 5 },
+];
+
+export default function CreateMasterUserLevelForm() {
+    const router = useRouter();
+    const JoditEditor = dynamic(() => import('jodit-react'), { ssr: false });
+    const MySwal = withReactContent(Swal);
+    const [isVisible, setIsVisible] = useState(false);
+    const [tabs, setTabs] = useState<string>("personal-info")
+    const editor = useRef(null);
+    const [content, setContent] = useState('');
+    const [haveChildren, setHaveChildren] = useState("no");
+    const [active, setActive] = useState("1");
+    const handleTab = (tab: any) => {
+        setTabs(tab);
+    };
+
+    const handleActive = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setActive(e.target.value);
+    };
+
+    const handleHaveChildren = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setHaveChildren(e.target.value);
+    };
+
+    let [files, setFiles] = useState<File[]>([]);
+
+    const removeFile = (name: string) => {
+        const arrayFile: File[] = [];
+        for (const element of files) {
+            if (element.name !== name) {
+                arrayFile.push(element);
+            }
+        }
+        setFiles(arrayFile);
+    };
+
+    const handleFileChange = (event: any) => {
+        const newFiles: FileList | null = event.target.files;
+        if (newFiles) {
+            const allowedExtensions = ['.doc', '.docx', '.pdf', '.ppt', '.pptx', '.xlsx', '.csv'];
+            let temp: File[] = [...files]; // Salin file-file yang sudah ada
+            for (let i = 0; i < newFiles.length; i++) {
+                const file = newFiles[i];
+                const fileExtension = file.name.split('.').pop()?.toLowerCase();
+                if (fileExtension && allowedExtensions.includes(`.${fileExtension}`)) {
+                    temp.push(file);
+                } else {
+                    alert('Format file tidak valid. Hanya file .doc, .docx, .ppt, .pptx, .xlsx, .csv atau .pdf yang diperbolehkan.');
+                }
+            }
+            setFiles(temp);
+        }
+    };
+
+    const toggleVisibility = () => setIsVisible(!isVisible);
+
+    const validationSchema = z.object({
+        name: z.string().min(1, { message: "Required" }),
+        aliasName: z.string().min(1, { message: "Required" }),
+        levelNumber: z.string().min(1, { message: "Required" }),
+    });
+
+    const formOptions = { resolver: zodResolver(validationSchema) };
+    type ArticleSchema = z.infer<typeof validationSchema>;
+
+    const { register, handleSubmit, formState: { errors }, formState, setValue } = useForm<ArticleSchema>(formOptions);
+
+    const save = async (data: any) => {
+
+        const request = {
+            name: data.name,
+            aliasName: data.aliasName,
+            levelNumber: data.levelNumber,
+            status: 1,
+        };
+
+        console.log(request);
+        // loading();
+        // // const res = await saveManualContext(request);
+        // if (res.error) {
+        //     error(res.message);
+        //     return false; 
+        // }
+        close();
+        successSubmit("/admin/master/master-user-level")
+    }
+
+    async function onSubmit(data: any) {
+        MySwal.fire({
+            title: "Save Data",
+            text: "",
+            icon: "warning",
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonColor: "#3085d6",
+            confirmButtonText: "Save",
+        }).then((result) => {
+            if (result.isConfirmed) {
+                save(data);
+            }
+        });
+    }
+
+    function successSubmit(redirect: string) {
+        MySwal.fire({
+            title: 'Sukses',
+            icon: 'success',
+            confirmButtonColor: '#3085d6',
+            confirmButtonText: 'OK',
+        }).then((result) => {
+            if (result.isConfirmed) {
+                router.push(redirect);
+            }
+        });
+    }
+
+    return (
+        <div className="mx-3 my-5">
+            <div className="flex flex-col gap-3 mb-4">
+                <Card className="w-full bg-white">
+                    <div className="w-full mr-2 p-5 ">
+                        <form method="POST" onSubmit={handleSubmit(onSubmit)}>
+                            <>
+                                <div className="flex flex-row gap-1">
+                                    <div className="w-6/12 justify-start items-start mt-2 gap-3">
+                                        <div className="flex flex-col ">
+                                            <Input
+                                                type="text"
+                                                label="Nama"
+                                                id="name"
+                                                {...register("name")}
+                                                placeholder="Input Name"
+                                                labelPlacement="outside"
+                                                className=" font-semibold"
+                                                classNames={{
+                                                    label: "!text-black",
+                                                    input: "!text-black hover:!text-white focus:!text-white",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                }}
+                                                startContent={
+                                                    <div className="pointer-events-none flex items-center">
+                                                        <span className="text-default-400 text-small"></span>
+                                                    </div>
+                                                }
+                                            />
+                                            {errors.name?.message && (
+                                                <p className="text-red-400 text-sm">
+                                                    {errors.name?.message}
+                                                </p>
+                                            )}
+                                        </div>
+                                        <div className="flex flex-col mt-3">
+                                            <Input
+                                                type="text"
+                                                label="Alias Name"
+                                                id="aliasName"
+                                                {...register("aliasName")}
+                                                placeholder="Input Name"
+                                                labelPlacement="outside"
+                                                className=" font-semibold"
+                                                classNames={{
+                                                    label: "!text-black",
+                                                    input: "!text-black hover:!text-white focus:!text-white",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                }}
+                                                startContent={
+                                                    <div className="pointer-events-none flex items-center">
+                                                        <span className="text-default-400 text-small"></span>
+                                                    </div>
+                                                }
+                                            />
+                                            {errors.aliasName?.message && (
+                                                <p className="text-red-400 text-sm">
+                                                    {errors.aliasName?.message}
+                                                </p>
+                                            )}
+                                        </div>
+                                        <div className="flex flex-col mt-3">
+                                            <Input
+                                                type="text"
+                                                label="Level Number"
+                                                id="levelNumber"
+                                                {...register("levelNumber")}
+                                                placeholder="Input Description"
+                                                labelPlacement="outside"
+                                                className=" font-semibold"
+                                                classNames={{
+                                                    label: "!text-black",
+                                                    input: "!text-black hover:!text-white focus:!text-white",
+                                                    inputWrapper: "max-h-[40px] bg-transparant border text-white",
+                                                }}
+                                                startContent={
+                                                    <div className="pointer-events-none flex items-center">
+                                                        <span className="text-default-400 text-small"></span>
+                                                    </div>
+                                                }
+                                            />
+                                            {errors.levelNumber?.message && (
+                                                <p className="text-red-400 text-sm">
+                                                    {errors.levelNumber?.message}
+                                                </p>
+                                            )}
+                                        </div>
+                                        <div className="mt-3 ">
+                                            <p className="text-black text-sm mb-1 font-semibold">Parent LevelId</p>
+                                            <Select
+                                                variant="bordered"
+                                                selectionMode="single"
+                                                labelPlacement="outside"
+                                                placeholder="Select"
+                                                className="font-semibold"
+                                                items={moduleList}
+                                                classNames={{
+                                                    mainWrapper: "rounded",
+                                                    listboxWrapper:
+                                                        "bg-white w-full !text-indigo-500 text-center font-bold",
+                                                    popoverContent: "bg-white !text-indigo-500",
+                                                    trigger:
+                                                        "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                                                }}
+                                                listboxProps={{
+                                                    itemClasses: {
+                                                        base: [
+                                                            "!text-left",
+                                                            "!bg-white",
+                                                            "text-indigo-500 ",
+                                                            "data-[selectable=true]:!text-indigo-500",
+                                                            "data-[pressed=true]:text-indigo-500",
+                                                            "data-[hover=true]:!text-indigo-300",
+                                                        ],
+                                                        wrapper: ["!bg-white border-none"],
+                                                    },
+                                                }}
+                                                renderValue={(items) => {
+                                                    return items.map((item) => (
+                                                        <span key={item.props?.value} className="text-black text-xs">
+                                                            {item.textValue}
+                                                        </span>
+                                                    ));
+                                                }}
+                                            >
+                                                <SelectSection showDivider title="Module">
+                                                    {moduleList.map((list) => (
+                                                        <SelectItem key={list.id} value={list.id}>
+                                                            {list.label}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectSection>
+                                            </Select>
+                                        </div>
+                                        <div className="mt-3 ">
+                                            <p className="text-black text-sm mb-1 font-semibold">Provinsi</p>
+                                            <Select
+                                                variant="bordered"
+                                                selectionMode="single"
+                                                labelPlacement="outside"
+                                                placeholder="Select"
+                                                className="font-semibold"
+                                                items={provinceList}
+                                                classNames={{
+                                                    mainWrapper: "rounded",
+                                                    listboxWrapper:
+                                                        "bg-white w-full !text-indigo-500 text-center font-bold",
+                                                    popoverContent: "bg-white !text-indigo-500",
+                                                    trigger:
+                                                        "border-1 border-gray-200 hover:!bg-gray-100 !text-black",
+                                                }}
+                                                listboxProps={{
+                                                    itemClasses: {
+                                                        base: [
+                                                            "!text-left",
+                                                            "!bg-white",
+                                                            "text-indigo-500 ",
+                                                            "data-[selectable=true]:!text-indigo-500",
+                                                            "data-[pressed=true]:text-indigo-500",
+                                                            "data-[hover=true]:!text-indigo-300",
+                                                        ],
+                                                        wrapper: ["!bg-white border-none"],
+                                                    },
+                                                }}
+                                                renderValue={(items) => {
+                                                    return items.map((item) => (
+                                                        <span key={item.props?.value} className="text-black text-xs">
+                                                            {item.textValue}
+                                                        </span>
+                                                    ));
+                                                }}
+                                            >
+                                                <SelectSection showDivider title="Provinsi">
+                                                    {provinceList.map((list) => (
+                                                        <SelectItem key={list.id} value={list.id}>
+                                                            {list.label}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectSection>
+                                            </Select>
+                                        </div>
+                                        <div className="flex flex-row gap-3 my-3">
+                                            <Link href="/admin/master/master-user-level">
+                                                <Button
+                                                    variant="bordered"
+                                                    className="bg-white border-grey-100  rounded-full text-[#8E5C18] mr-5"
+                                                >
+                                                    Cancel
+                                                </Button>{" "}
+                                            </Link>
+                                            <Button
+                                                className="w-[50px]"
+                                                color="primary"
+                                                size="md"
+                                                type="submit">
+                                                Submit
+                                            </Button>
+                                        </div>
+                                    </div>
+                                    <div className="w-6/12 ">
+                                        <div className="flex items-center justify-center justify-items-center h-full">
+                                            <Image
+                                                width={400}
+                                                alt="NextUI hero Image"
+                                                src="/account-category.jpg"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </>
+                        </form>
+                    </div>
+                </Card>
+            </div>
+        </div >
+
+    )
+}
diff --git a/components/table/master/master-user-level/master-user-level-table.tsx b/components/table/master/master-user-level/master-user-level-table.tsx
new file mode 100644
index 0000000..865c245
--- /dev/null
+++ b/components/table/master/master-user-level/master-user-level-table.tsx
@@ -0,0 +1,217 @@
+"use client";
+import {
+    TableCell,
+    TableRow,
+    Table,
+    TableHeader,
+    TableColumn,
+    TableBody,
+    Pagination,
+    Dropdown,
+    DropdownTrigger,
+    DropdownMenu,
+    DropdownItem,
+    Input,
+    User,
+    Card,
+    Divider,
+    Chip,
+    ChipProps,
+} from "@nextui-org/react";
+import { Button } from "@nextui-org/button";
+import React, { Key, useCallback, useMemo, useState } from "react";
+import {
+    AddIcon,
+    CreateIconIon,
+    DeleteIcon,
+    DotsYIcon,
+    EyeFilledIcon,
+    EyeIconMdi,
+} from "@/components/icons";
+import Link from "next/link";
+
+type UserObject = {
+    id: number;
+    name: string;
+    levelNumber: string;
+    aliasName: string;
+    parentLevelId: string;
+    provinceId: string;
+};
+
+const statusColorMap = {
+    active: "success",
+    paused: "danger",
+    vacation: "warning",
+};
+
+
+export default function MasterUserLevelTable() {
+    type TableRow = (typeof masterUserLevelTable)[0];
+
+    const columns = [
+        { name: "No", uid: "no" },
+        { name: "Name", uid: "name" },
+        { name: "User Name", uid: "aliasName" },
+        { name: "Level Number", uid: "levelNumber" },
+        { name: "Parent Level", uid: "parentLevelId" },
+        { name: "Province", uid: "provinceId" },
+        { name: "Action", uid: "actions" },
+    ];
+
+    const masterUserLevelTable = [
+        {
+            id: 1,
+            name: "AI Journalist ",
+            aliasName: "Journalist",
+            levelNumber: "admin",
+            parentLevelId: "admin",
+            provinceId: "Sumatra Barat",
+        },
+        {
+            id: 2,
+            name: "AI Journalist ",
+            aliasName: "Journalist",
+            levelNumber: "admin",
+            parentLevelId: "admin",
+            provinceId: "Sumatra Barat",
+        },
+        {
+            id: 3,
+            name: "AI Journalist ",
+            aliasName: "Journalist",
+            levelNumber: "admin",
+            parentLevelId: "admin",
+            provinceId: "Sumatra Barat",
+        },
+        {
+            id: 4,
+            name: "AI Journalist ",
+            aliasName: "Journalist",
+            levelNumber: "admin",
+            parentLevelId: "admin",
+            provinceId: "Sumatra Barat",
+        },
+        {
+            id: 5,
+            name: "AI Journalist ",
+            aliasName: "Journalist",
+            levelNumber: "admin",
+            parentLevelId: "admin",
+            provinceId: "Sumatra Barat",
+        },
+    ];
+
+    const renderCell = useCallback((masterUserLevel: TableRow, columnKey: Key) => {
+        const cellValue = masterUserLevel[columnKey as keyof UserObject];
+        const statusColorMap: Record<string, ChipProps["color"]> = {
+            active: "success",
+            cancel: "danger",
+            pending: "warning",
+        };
+
+        switch (columnKey) {
+            case "no":
+                return (
+                    <div>{masterUserLevel.id}</div>
+                )
+
+            case "name":
+                return (
+                    <div className="w-[150px]">{masterUserLevel.name}</div>
+                )
+
+            case "aliasName":
+                return (
+                    <div className="">{masterUserLevel.aliasName}</div>
+                )
+
+            case "actions":
+                return (
+                    <div className="relative flex justify-star items-center gap-2">
+                        <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
+                            <DropdownTrigger>
+                                <Button isIconOnly size="lg" variant="light">
+                                    <DotsYIcon className="text-default-300" />
+                                </Button>
+                            </DropdownTrigger>
+                            <DropdownMenu>
+                                <DropdownItem
+                                >
+                                    <Link
+                                        href={`/admin/magazine/detail`}
+                                    >
+                                        <EyeIconMdi className="inline mr-2 mb-1" />
+                                        Detail
+                                    </Link>
+                                </DropdownItem>
+                                <DropdownItem
+                                >
+                                    <Link
+                                        href={`#`}
+                                    >
+                                        <CreateIconIon className="inline mr-2 mb-1" />
+                                        Edit
+                                    </Link>
+                                </DropdownItem>
+                                <DropdownItem
+                                >
+                                    <Link
+                                        href={`#`}
+                                    >
+                                        <DeleteIcon
+                                            width={20}
+                                            height={16}
+                                            className="inline mr-2 mb-1"
+                                        />
+                                        Delete
+                                    </Link>
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </div>
+                );
+
+            default:
+                return cellValue;
+        }
+    }, []);
+
+    return (
+        <>
+            <div className="mx-3 my-5">
+                <Link href="/admin/master/master-user-level/create" >
+                    <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Create New User Level</Button>
+                </Link>
+                <div className="flex flex-col items-center rounded-2xl">
+                    <Table
+                        // selectionMode="multiple"
+                        aria-label="micro issue table"
+                        className="rounded-xl"
+                        classNames={{
+                            th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
+                            base: "bg-white dark:bg-black border",
+                            wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
+                        }}
+                    >
+                        <TableHeader columns={columns}>
+                            {(column) => (
+                                <TableColumn key={column.uid}>{column.name}</TableColumn>
+                            )}
+                        </TableHeader>
+                        <TableBody items={masterUserLevelTable} emptyContent={"No data to display."}>
+                            {(item) => (
+                                <TableRow key={item.id}>
+                                    {(columnKey) => (
+                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
+                                    )}
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </div>
+            </div>
+
+        </>
+    );
+}