feat:add data table master-user-level

2024-04-23 12:17:21 +07:00 · 2024-04-23 12:17:21 +07:00 · fdb31a8953
parent b96116c1d5
commit fdb31a8953
10 changed files with 519 additions and 86 deletions
--- a/components/form/master/master-user-level/master-user-level-form.tsx
+++ b/components/form/master/master-user-level/master-user-level-form.tsx
@ -12,6 +12,14 @@ import dynamic from 'next/dynamic';
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { createUserLevels } from "@/services/user-levels/user-levels-service";
+
+const LevelList = [
+    { label: "Admin", value: "admin", id: 1 },
+    { label: "Super-Admin", value: "super-admin", id: 2 },
+    { label: "Kurator", value: "kurator", id: 3 },
+    { label: "Supervisor", value: "supervisor", id: 4 },
+];

 const moduleList = [
    { label: "Article", value: "article", id: 1 },
@ -38,13 +46,14 @@ export default function CreateMasterUserLevelForm() {
    const editor = useRef(null);
    const [content, setContent] = useState('');
    const [haveChildren, setHaveChildren] = useState("no");
-    const [active, setActive] = useState("1");
+    const [active, setTrue] = useState("true");
+    const [levelValue, setLevelValue] = useState<any>("");
    const handleTab = (tab: any) => {
        setTabs(tab);
    };

    const handleActive = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setActive(e.target.value);
+        setTrue(e.target.value);
    };

    const handleHaveChildren = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -86,7 +95,7 @@ export default function CreateMasterUserLevelForm() {
    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" }),
+        // levelNumber: z.string().min(1, { message: "Required" }),
    });

    const formOptions = { resolver: zodResolver(validationSchema) };
@ -95,21 +104,21 @@ export default function CreateMasterUserLevelForm() {
    const { register, handleSubmit, formState: { errors }, formState, setValue } = useForm<ArticleSchema>(formOptions);

    const save = async (data: any) => {
-
+        const selectedLevel = Number(Array.from(levelValue).pop());
        const request = {
            name: data.name,
            aliasName: data.aliasName,
-            levelNumber: data.levelNumber,
-            status: 1,
+            levelNumber: selectedLevel,
+            isActive: active,
        };

        console.log(request);
-        // loading();
-        // // const res = await saveManualContext(request);
-        // if (res.error) {
-        //     error(res.message);
-        //     return false; 
-        // }
+        loading();
+        const res = await createUserLevels(request);
+        if (res.error) {
+            error(res.message);
+            return false;
+        }
        close();
        successSubmit("/admin/master/master-user-level")
    }
@ -204,33 +213,47 @@ export default function CreateMasterUserLevelForm() {
                                                </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">Level Number</p>
+                                            <Select
+                                                variant="bordered"
+                                                labelPlacement="outside"
+                                                placeholder="Select Polda"
+                                                selectedKeys={levelValue}
+                                                onSelectionChange={setLevelValue}
+                                                className="w-full"
+                                                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"],
+                                                    },
+                                                }}
+                                            >
+                                                <SelectSection showDivider title="List Level">
+                                                    {LevelList.map((list: any) => (
+                                                        <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">Parent LevelId</p>
                                            <Select
                                                variant="bordered"
@ -324,6 +347,33 @@ export default function CreateMasterUserLevelForm() {
                                                </SelectSection>
                                            </Select>
                                        </div>
+                                        <div className="text-black">
+                                            <p className=" text-black ">Status</p>
+                                            <RadioGroup
+                                                orientation="horizontal"
+                                                id="radio-banned"
+                                                className="text-gray-950 mb-2"
+                                                onChange={handleActive}
+                                                defaultValue={active}
+                                            >
+                                                <Radio
+                                                    classNames={{
+                                                        label: "!text-black",
+                                                    }}
+                                                    value="true"
+                                                >
+                                                    Active
+                                                </Radio>
+                                                <Radio
+                                                    classNames={{
+                                                        label: "!text-black",
+                                                    }}
+                                                    value="false"
+                                                >
+                                                    Inactive
+                                                </Radio>
+                                            </RadioGroup>
+                                        </div> */}
                                        <div className="flex flex-row gap-3 my-3">
                                            <Link href="/admin/master/master-user-level">
                                                <Button
--- a/components/table/master/master-user-level/master-user-level-table.tsx
+++ b/components/table/master/master-user-level/master-user-level-table.tsx
@ -19,7 +19,7 @@ import {
    ChipProps,
 } from "@nextui-org/react";
 import { Button } from "@nextui-org/button";
-import React, { Key, useCallback, useMemo, useState } from "react";
+import React, { Key, useCallback, useEffect, useMemo, useState } from "react";
 import {
    AddIcon,
    CreateIconIon,
@ -29,6 +29,7 @@ import {
    EyeIconMdi,
 } from "@/components/icons";
 import Link from "next/link";
+import { getAllUserLevels } from "@/services/user-levels/user-levels-service";

 type UserObject = {
    id: number;
@ -37,6 +38,7 @@ type UserObject = {
    aliasName: string;
    parentLevelId: string;
    provinceId: string;
+    status: string;
 };

 const statusColorMap = {
@ -47,60 +49,54 @@ const statusColorMap = {


 export default function MasterUserLevelTable() {
+    const [totalPage, setTotalPage] = useState(1);
+    const [masterUserLevelTable, setmasterUserLevel] = useState<UserObject[]>([]);
+
    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: "User Name", uid: "alias_name" },
+        { name: "Level Number", uid: "level_number" },
+        { name: "Parent Level", uid: "parent_level_id" },
+        { name: "Province", uid: "province_id" },
+        { name: "Status", uid: "is_active" },
        { 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 [page, setPage] = useState(1);
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    async function fetchData() {
+        const request = {
+            page: page,
+            limit: 10,
+
+        };
+        const res = await getAllUserLevels(request);
+        const data = res?.data?.data;
+        setTotalPage(Math.ceil(res?.data?.total / 10));
+        initUserData(10, data);
+    }
+
+    function initUserData(limit: number, data?: any) {
+        if (data) {
+            console.log(data);
+            const startIndex = limit * (page - 1);
+            let iterate = 0;
+            const newData = data.map((value: any) => {
+                iterate++;
+                value.no = startIndex + iterate;
+                return value;
+            });
+            console.log("Data ::", newData);
+            setmasterUserLevel(newData);
+        }
+    }

    const renderCell = useCallback((masterUserLevel: TableRow, columnKey: Key) => {
        const cellValue = masterUserLevel[columnKey as keyof UserObject];
@ -121,10 +117,23 @@ export default function MasterUserLevelTable() {
                    <div className="w-[150px]">{masterUserLevel.name}</div>
                )

-            case "aliasName":
+            case "alias_Name":
                return (
                    <div className="">{masterUserLevel.aliasName}</div>
                )
+            case "is_active":
+                return (
+                    <Chip
+                        className="capitalize "
+                        color={statusColorMap[masterUserLevel.status]}
+                        size="lg"
+                        variant="flat"
+                    >
+                        <div className="flex flex-row items-center gap-2 justify-center">
+                            {cellValue}
+                        </div>
+                    </Chip>
+                );

            case "actions":
                return (
@ -209,6 +218,21 @@ export default function MasterUserLevelTable() {
                            )}
                        </TableBody>
                    </Table>
+                    <div className="mt-2">
+                        <Pagination
+                            isCompact
+                            showControls
+                            showShadow
+                            color="primary"
+                            classNames={{
+                                base: "bg-transparent",
+                                wrapper: "bg-transparent",
+                            }}
+                            page={page}
+                            total={totalPage}
+                            onChange={(page) => setPage(page)}
+                        />
+                    </div>
                </div>
            </div>

--- a/package-lock.json
+++ b/package-lock.json
@ -23,11 +23,13 @@
        "@nextui-org/theme": "2.1.17",
        "@react-aria/ssr": "^3.8.0",
        "@react-aria/visually-hidden": "^3.8.6",
+        "@types/js-cookie": "^3.0.6",
        "@types/node": "20.5.7",
        "@types/react": "18.2.21",
        "@types/react-datepicker": "^6.0.1",
        "@types/react-dom": "18.2.7",
        "autoprefixer": "10.4.16",
+        "axios": "^1.6.8",
        "clsx": "^2.0.0",
        "eslint": "8.48.0",
        "eslint-config-next": "14.0.2",
@ -2632,6 +2634,11 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ=="
+    },
    "node_modules/@types/json5": {
      "version": "0.0.29",
      "license": "MIT"
@ -2972,6 +2979,11 @@
        "has-symbols": "^1.0.3"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
    "node_modules/autobind-decorator": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.4.0.tgz",
@ -3033,6 +3045,16 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "3.2.1",
      "license": "Apache-2.0",
@ -3250,6 +3272,17 @@
      "version": "2.0.2",
      "license": "MIT"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "license": "MIT",
@ -3363,6 +3396,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/dequal": {
      "version": "2.0.3",
      "license": "MIT",
@ -4066,6 +4107,25 @@
      "version": "3.2.9",
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.3",
      "license": "MIT",
@ -4073,6 +4133,19 @@
        "is-callable": "^1.1.3"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "license": "MIT",
@ -4966,6 +5039,25 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "license": "ISC",
@ -5452,6 +5544,11 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "license": "MIT",
--- a/package.json
+++ b/package.json
@ -24,11 +24,13 @@
    "@nextui-org/theme": "2.1.17",
    "@react-aria/ssr": "^3.8.0",
    "@react-aria/visually-hidden": "^3.8.6",
+    "@types/js-cookie": "^3.0.6",
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-datepicker": "^6.0.1",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.16",
+    "axios": "^1.6.8",
    "clsx": "^2.0.0",
    "eslint": "8.48.0",
    "eslint-config-next": "14.0.2",
--- a/services/http-config/axios-base-instance.ts
+++ b/services/http-config/axios-base-instance.ts
@ -0,0 +1,12 @@
+import axios from "axios";
+
+const baseURL = "http://103.82.242.92:8888";
+
+const axiosBaseInstance = axios.create({
+  baseURL,
+  headers: {
+    "content-type": "application/json",
+  },
+});
+
+export default axiosBaseInstance;
--- a/services/http-config/axios-interceptor-instance.ts
+++ b/services/http-config/axios-interceptor-instance.ts
@ -0,0 +1,33 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+const baseURL = "http://103.82.242.92:8800";
+
+const refreshToken = Cookies.get("refresh_token");
+
+const axiosInterceptorInstance = axios.create({
+  baseURL,
+  headers: {
+    "content-type": "application/json",
+  },
+});
+
+// Request interceptor
+axiosInterceptorInstance.interceptors.request.use(
+  (config) => {
+    const accessToken = Cookies.get("access_token");
+    if (accessToken) {
+      if (config.headers)
+        config.headers.Authorization = "Bearer " + accessToken;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+// Response interceptor
+
+
+export default axiosInterceptorInstance;
--- a/services/http-config/http-base-services.ts
+++ b/services/http-config/http-base-services.ts
@ -0,0 +1,44 @@
+import axiosBaseInstance from "./axios-base-instance";
+
+export async function httpGet(pathUrl: any, headers: any) {
+  const response = await axiosBaseInstance
+    .get(pathUrl, { headers })
+    .catch((error) => error.response);
+  console.log("Response base svc : ", response);
+  if (response?.data.success) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  } else {
+    return {
+      error: true,
+      message: response?.data?.message || null,
+      data: null,
+    };
+  }
+}
+
+export async function httpPost(pathUrl: any, headers: any, data: any) {
+  const response = await axiosBaseInstance
+    .post(pathUrl, data, { headers })
+    .catch(function (error) {
+      console.log(error);
+      return error.response;
+    });
+  console.log("Response base svc : ", response);
+  if (response?.status == 200 || response?.status == 201) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  } else {
+    return {
+      error: true,
+      message: response?.data?.message || response?.data || null,
+      data: null,
+    };
+  }
+}
--- a/services/http-config/http-disestages-2-services.ts
+++ b/services/http-config/http-disestages-2-services.ts
@ -0,0 +1,70 @@
+import axiosDisestagesInstance2 from "./axios-disestages-instance-2";
+
+export async function httpPostDisestages(pathUrl: any, headers: any, data?: any) {
+    const response = await axiosDisestagesInstance2
+        .post(pathUrl, data, { headers })
+        .catch(function (error) {
+            console.log(error);
+            return error.response;
+        });
+    console.log("Response base svc : ", response);
+    if (response?.status == 200 || response?.status == 201) {
+        return {
+            error: false,
+            message: "success",
+            data: response?.data,
+        };
+    } else {
+        return {
+            error: true,
+            message: response?.data?.message || response?.data || null,
+            data: null,
+        };
+    }
+}
+
+export async function httpGetDisestages(pathUrl: any, headers: any) {
+    const response = await axiosDisestagesInstance2
+        .get(pathUrl, { headers })
+        .catch(function (error) {
+            console.log(error);
+            return error.response;
+        });
+    console.log("Response base svc : ", response);
+    if (response?.status == 200 || response?.status == 201) {
+        return {
+            error: false,
+            message: "success",
+            data: response?.data,
+        };
+    } else {
+        return {
+            error: true,
+            message: response?.data?.message || response?.data || null,
+            data: null,
+        };
+    }
+}
+
+// export async function httpDelete(pathUrl: any) {
+//   const response = await axiosDisestagesInstance
+//     .delete(pathUrl, data, { headers })
+//     .catch(function (error) {
+//       console.log(error);
+//       return error.response;
+//     });
+//   console.log("Response base svc : ", response);
+//   if (response?.status == 200 || response?.status == 201) {
+//     return {
+//       error: false,
+//       message: "success",
+//       data: response?.data,
+//     };
+//   } else {
+//     return {
+//       error: true,
+//       message: response?.data?.message || response?.data || null,
+//       data: null,
+//     };
+//   }
+// }
--- a/services/http-config/http-interceptor-services.ts
+++ b/services/http-config/http-interceptor-services.ts
@ -0,0 +1,75 @@
+import { useRouter } from "next/navigation";
+import axiosInterceptorInstance from "./axios-interceptor-instance";
+import Cookies from "js-cookie";
+
+export async function httpGetInterceptor(pathUrl: any) {
+  const response = await axiosInterceptorInstance
+    .get(pathUrl)
+    .catch((error) => error.response);
+  console.log("Response interceptor : ", response);
+  if (response?.status == 200 || response?.status == 201) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  } else if (response?.status == 401) {
+    Cookies.set("is_logout", "true");
+    window.location.href = "/";
+    return {
+      error: true,
+    };
+  } else {
+    return {
+      error: true,
+      message: response?.data?.message || response?.data || null,
+      data: null,
+    };
+  }
+}
+
+export async function httpPostInterceptor(pathUrl: any, data: any, headers?: any) {
+  const response = await axiosInterceptorInstance
+    .post(pathUrl, data, { headers })
+    .catch((error) => error.response);
+  console.log("Response interceptor : ", response);
+  if (response?.status == 200 || response?.status == 201) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  } else if (response?.status == 401) {
+    Cookies.set("is_logout", "true");
+    window.location.href = "/";
+  } else {
+    return {
+      error: true,
+      message: response?.data?.message || response?.data || null,
+      data: null,
+    };
+  }
+}
+
+export async function httpDeleteInterceptor(pathUrl: any) {
+  const response = await axiosInterceptorInstance
+    .delete(pathUrl)
+    .catch((error) => error.response);
+  console.log("Response interceptor : ", response);
+  if (response?.status == 200 || response?.status == 201) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  } else if (response?.status == 401) {
+    Cookies.set("is_logout", "true");
+    window.location.href = "/";
+  } else {
+    return {
+      error: true,
+      message: response?.data?.message || response?.data || null,
+      data: null,
+    };
+  }
+}
--- a/services/user-levels/user-levels-service.ts
+++ b/services/user-levels/user-levels-service.ts
@ -0,0 +1,26 @@
+import { httpGet, httpPost } from "../http-config/http-base-services";
+
+
+
+export async function getAllUserLevels(data: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`user-levels`, headers,);
+}
+
+export async function getAccountById(id: string) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`user-account/findById/${id}`, headers);
+
+}
+
+export async function createUserLevels(request: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpPost(`user-levels`, headers, request);
+}
+