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
index a26443b..bafa6e4 100644
--- 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
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
index 865c245..fa5b6f1 100644
--- 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>
 
diff --git a/package-lock.json b/package-lock.json
index fdd840a..6bf829c 100644
--- 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",
diff --git a/package.json b/package.json
index e160325..5e8e08f 100644
--- 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",
diff --git a/services/http-config/axios-base-instance.ts b/services/http-config/axios-base-instance.ts
new file mode 100644
index 0000000..aa6679f
--- /dev/null
+++ 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;
diff --git a/services/http-config/axios-interceptor-instance.ts b/services/http-config/axios-interceptor-instance.ts
new file mode 100644
index 0000000..9bef1d9
--- /dev/null
+++ 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;
diff --git a/services/http-config/http-base-services.ts b/services/http-config/http-base-services.ts
new file mode 100644
index 0000000..b6fc06f
--- /dev/null
+++ 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,
+    };
+  }
+}
diff --git a/services/http-config/http-disestages-2-services.ts b/services/http-config/http-disestages-2-services.ts
new file mode 100644
index 0000000..f348b39
--- /dev/null
+++ 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,
+//     };
+//   }
+// }
diff --git a/services/http-config/http-interceptor-services.ts b/services/http-config/http-interceptor-services.ts
new file mode 100644
index 0000000..ff772b2
--- /dev/null
+++ 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,
+    };
+  }
+}
diff --git a/services/user-levels/user-levels-service.ts b/services/user-levels/user-levels-service.ts
new file mode 100644
index 0000000..999bf4b
--- /dev/null
+++ 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);
+}
+